Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

20.3 asset-manifest.json 파일 내용 #360

Open
hyebinyu1110 opened this issue Jun 20, 2022 · 4 comments
Open

20.3 asset-manifest.json 파일 내용 #360

hyebinyu1110 opened this issue Jun 20, 2022 · 4 comments

Comments

@hyebinyu1110
Copy link

hyebinyu1110 commented Jun 20, 2022

챕터 20.3.5(전자책 p340-341)

책에서 적힌 코드 그대로 npm run build 를 하였으나 책 내용 상 build/asset-manifest.json 파일 내용에 포함되어있는 runtime-main.js 파일 등이 제 asset-manifest.json 파일 내용에는 나타나지 않습니다. 따라서 index.server.js에서 변수 내용으로 치환할수 없어 css를 서버사이드렌더링 시 로딩할 수 없습니다. 혹시 왜그런지 아시는분 도움 부탁드립니다.

// 아래는 npm run build 후 제 asset-manifest.json 파일 내용입니다.
{
"files": {
"main.css": "/static/css/main.a9ef2341.css",
"main.js": "/static/js/main.c15c2d12.js",
"index.html": "/index.html",
"main.a9ef2341.css.map": "/static/css/main.a9ef2341.css.map",
"main.c15c2d12.js.map": "/static/js/main.c15c2d12.js.map"
},
"entrypoints": [
"static/css/main.a9ef2341.css",
"static/js/main.c15c2d12.js"
]
}

@travelbeeee
Copy link

저도 동일한 이슈 재현되는데 아직 해결 방법을 못찾았습니다.

@bigtiger0405
Copy link

저도 아무리 빌드 해봐도 runtime-main.js 는 생성되지 않네요!! ㅠㅠ
방법좀 알려주세요~

@velopert
Copy link
Owner

velopert commented Feb 12, 2023

이 부분 작년 9쇄에 업데이트 했는데 깃허브에 공유를 못했네요 죄송합니다.

pg. 563
build/asset-manifest.json

{
  "files": {
    "main.css": "/static/css/main.384285ee.css",
    "main.js": "/static/js/main.c6e32ae5.js",
    "static/js/787.2bb6a743.chunk.js": "/static/js/787.2bb6a743.chunk.js",
    "index.html": "/index.html",
    "main.384285ee.css.map": "/static/css/main.384285ee.css.map",
    "main.c6e32ae5.js.map": "/static/js/main.c6e32ae5.js.map",
    "787.2bb6a743.chunk.js.map": "/static/js/787.2bb6a743.chunk.js.map"
  },
  "entrypoints": [
    "static/css/main.384285ee.css",
    "static/js/main.c6e32ae5.js"
  ]
}

pg.563
index.server.js

import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { StaticRouter } from 'react-router-dom/server';

import App from './App';
import path from 'path';
import fs from 'fs';

// asset-manifest.json에서 파일 경로들을 조회합니다.
const manifest = JSON.parse(
  fs.readFileSync(path.resolve('./build/asset-manifest.json'), 'utf8')
);

function createPage(root) {
  return `<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <link rel="shortcut icon" href="/favicon.ico" />
      <meta
        name="viewport"
        content="width=device-width,initial-scale=1,shrink-to-fit=no"
      />
      <meta name="theme-color" content="#000000" />
      <title>React App</title>
      <link href="${manifest.files['main.css']}" rel="stylesheet" />
    </head>
    <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root">${root}</div>
      <script src="${manifest.files['main.js']}"></script>
    </body>
  </html>
  `;
}

main.js를 넣으면 됩니다.

@bigtiger0405
Copy link

감사합니다!!~~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants