問題点
タイトルの通り,Reactアプリをnpx create-react-app sample
という形で作成し,サンプルとして,以下に示すようにファイルを編集し,
npm run build
でbuild
ディレクトリを作成しました.
次に作成されたアプリを確認するためにbuild/index.html
をブラウザで確認したのですが,パスのエラーが生じてしまいます.
編集ファイル
public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>
src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; ReactDOM.render( <div>Hello World</div>, document.getElementById('root') );
src/index.css
body { color: blue; }
buildディレクトリ
❯ tree build build ├── asset-manifest.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── precache-manifest.c58a6fe284mffvwmfrefe64r.js ├── robots.txt ├── service-worker.js └── static ├── css │ ├── main.vnf34393.chunk.css │ └── main.vnf34393.chunk.css.map └── js ├── 2.33fds09f.chunk.js ├── 2.33fds09f.chunk.js.map ├── main.98v32429.chunk.js ├── main.98v32429.chunk.js.map ├── runtime~main.vf4of549.js └── runtime~main.vf4of549.js.map
build/index.html
<!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" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="manifest" href="/manifest.json" /> <title>React App</title> <link href="/static/css/main.vnf34393.chunk.css" rel="stylesheet"> </head> <body><noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script>...(略)...</script> <script src="/static/js/2.33fds09f.chunk.js"></script> <script src="/static/js/main.98v32429.chunk.js"></script> </body> </html>
エラーの詳細
main.vnf34393.chunk.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND 2.33fds09f.chunk.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND main.98v32429.chunk.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND /favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
つまり,jsファイルやcssファイルへのパスがうまくいっておらず,読み込めないためにエラーが生じています.
ちなみに,build/index.html
の各パスの前に.
をつけると,うまく読み込むことができます.(./static/...
のような感じです.)
知りたいこと
上記のエラーが生じる原因とその解決策を知りたいです.
もし宜しければ,回答お願いします.また,足りない情報があれば追記させていただきます.
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/12 15:53
退会済みユーザー
2019/08/12 15:55
退会済みユーザー
2019/08/12 15:56
退会済みユーザー
2019/08/12 15:56