Reactで最初につまずいていること

前提・実現したいこと

Reactを初めて触り動かしている最中サーバー自体はたてられたもののerrorがいくつか発生しているのでそれをなくしたいです.

発生している問題・エラーメッセージ

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve '/Users/yamaguchishuuhei/Programs/TryReact/src/index.html' in '  /Users/yamaguchishuuhei/Programs/TryReact'
  ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/yamaguchishuuhei/Programs/TryReact  /src/index.html' in '/Users/yamaguchishuuhei/Programs/TryReact'
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/Compilation.js:1773:28
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:814:1  3
      at eval (eval at create (/Users/yamaguchishuuhei/Programs/TryReact/node_modules/tapable/lib/HookCo  deFactory.js:33:10), <anonymous>:10:1)
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:286:2  2
      at eval (eval at create (/Users/yamaguchishuuhei/Programs/TryReact/node_modules/tapable/lib/HookCo  deFactory.js:33:10), <anonymous>:9:1)
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:442:2  2
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:128:1  1
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:676:2  5
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:885:8      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:1005:  5
  
  - Compilation.js:1773 
    [TryReact]/[webpack]/lib/Compilation.js:1773:28
  
  - NormalModuleFactory.js:814 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:814:13
  
  
  - NormalModuleFactory.js:286 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:286:22
  
  
  - NormalModuleFactory.js:442 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:442:22
  
  - NormalModuleFactory.js:128 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:128:11
  
  - NormalModuleFactory.js:676 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:676:25
  
  - NormalModuleFactory.js:885 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:885:8
  
  - NormalModuleFactory.js:1005 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:1005:5
  
  - child-compiler.js:169 
    [TryReact]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:548 
    [TryReact]/[webpack]/lib/Compiler.js:548:11
  
  - Compiler.js:1118 
    [TryReact]/[webpack]/lib/Compiler.js:1118:17
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [TryReact]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1114 
    [TryReact]/[webpack]/lib/Compiler.js:1114:33
  
  - Compilation.js:2256 finalCallback
    [TryReact]/[webpack]/lib/Compilation.js:2256:11
  
  - Compilation.js:2547 
    [TryReact]/[webpack]/lib/Compilation.js:2547:11
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [TryReact]/[tapable]/lib/Hook.js:18:14
  


1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.52.0 compiled with 2 errors in 6331 ms
^C%                                                                                                     
(base) yamaguchishuuhei@yamaguchishuuheinoMacBook-Air TryReact % npm run build

> react_start@1.0.0 prebuild /Users/yamaguchishuuhei/Programs/TryReact
> rimraf dist


> react_start@1.0.0 build /Users/yamaguchishuuhei/Programs/TryReact
> webpack --progress --mode production

assets by status 130 KiB [cached] 2 assets
modules by path ./node_modules/react/ 6.48 KiB
  ./node_modules/react/index.js 190 bytes [built] [code generated]
  ./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
modules by path ./node_modules/react-dom/ 119 KiB
  ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
  ./node_modules/react-dom/cjs/react-dom.production.min.js 118 KiB [built] [code generated]
modules by path ./node_modules/scheduler/ 4.91 KiB
  ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
  ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
./src/App.jsx 258 bytes [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve '/Users/yamaguchishuuhei/Programs/TryReact/src/index.html' in '  /Users/yamaguchishuuhei/Programs/TryReact'
  ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/yamaguchishuuhei/Programs/TryReact  /src/index.html' in '/Users/yamaguchishuuhei/Programs/TryReact'
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/Compilation.js:1773:28
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:814:1  3
      at eval (eval at create (/Users/yamaguchishuuhei/Programs/TryReact/node_modules/tapable/lib/HookCo  deFactory.js:33:10), <anonymous>:10:1)
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:286:2  2
      at eval (eval at create (/Users/yamaguchishuuhei/Programs/TryReact/node_modules/tapable/lib/HookCo  deFactory.js:33:10), <anonymous>:9:1)
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:442:2  2
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:124:1  1
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:676:2  5
      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:885:8      at /Users/yamaguchishuuhei/Programs/TryReact/node_modules/webpack/lib/NormalModuleFactory.js:1005:  5
  
  - Compilation.js:1773 
    [TryReact]/[webpack]/lib/Compilation.js:1773:28
  
  - NormalModuleFactory.js:814 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:814:13
  
  
  - NormalModuleFactory.js:286 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:286:22
  
  
  - NormalModuleFactory.js:442 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:442:22
  
  - NormalModuleFactory.js:124 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:124:11
  
  - NormalModuleFactory.js:676 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:676:25
  
  - NormalModuleFactory.js:885 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:885:8
  
  - NormalModuleFactory.js:1005 
    [TryReact]/[webpack]/lib/NormalModuleFactory.js:1005:5
  
  - child-compiler.js:169 
    [TryReact]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:548 
    [TryReact]/[webpack]/lib/Compiler.js:548:11
  
  - Compiler.js:1118 
    [TryReact]/[webpack]/lib/Compiler.js:1118:17
  
  
  - task_queues.js:95 processTicksAndRejections
    internal/process/task_queues.js:95:5
  


1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.52.0 compiled with 2 errors in 8584 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react_start@1.0.0 build: `webpack --progress --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react_start@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yamaguchishuuhei/.npm/_logs/2021-09-07T02_26_59_691Z-debug.log

該当のソースコード

App.jsx

App.jsx
1import React from 'react';
2import ReactDOM from 'react-dom';
3
4
5const App = () => {
6  return <h1>Hello World!</h1>;
7};
8ReactDOM.render(<App />, document.getElementById('app'));

index.js

import React from 'react'
import ReactDOM from 'react-dom'


ReactDOM.render(
  <h1>Hello, world!!</h1>,
  document.getElementById('root')
)

package.json

{
  "name": "react_start",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "prebuild": "rimraf dist",
    "build": "webpack --progress --mode production"
  },
  "author": "dev.yakuza@gmail.com",
  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/preset-env": "7.4.5",
    "@babel/preset-react": "7.0.0",
    "babel-loader": "8.0.6",
    "cross-env": "5.2.0",
    "html-webpack-plugin": "3.2.0",
    "rimraf": "2.6.3",
    "webpack": "4.33.0",
    "webpack-cli": "3.3.4",
    "webpack-dev-server": "3.7.1"
  }
}

webpack.config.js

onst path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    'js/app': ['./src/App.jsx'],
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
};

index.html(編集:9/7/12:11)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World ygyu</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

補足情報

初心者ですよろしくお願いします.

退会済みユーザー

2021/09/07 03:08

index.htmlも質問に追記してほしいのやけど。そもそもindex.html作ってなくね？っていうのがあんねん。

退会済みユーザー

2021/09/07 03:13

追記しました.

退会済みユーザー

2021/09/07 03:18

はいどうも。そのindex.html ですが、 /Users/yamaguchishuuhei/Programs/TryReact/src/ にあるんでしょうか？それか、たとえば、ひとつ上の /Users/yamaguchishuuhei/Programs/TryReact/ にあったりするんでしょうか？

退会済みユーザー

2021/09/07 03:29

/Users/yamaguchishuuhei/Programs/TryReact/publicの中に入っています.

退会済みユーザー

2021/09/07 03:36

略 ├── package-lock.json ├── package.json ├── public │ ├── index.html │ └── js ├── src │ ├── App.jsx │ └── index.js ├── webpack.config.js └── yarn.lock

退会済みユーザー

2021/09/07 03:41

なるほど。そういう構成になっているんやね。いちおう回答しましたが、回答に書いたindex.htmlの移動だけでうまくいくかは分かりません。こういったディレクトリ・ファイル構成や webpack の設定などに時間をとられて、なかなか本題のReactの学習に入れなくて困るという場合は、 create-react-app を使うのもよいかもしれません。

行動規範の内容に同意します

回答1件

ベストアンサー

エラーメッセージに

Can't resolve '/Users/yamaguchishuuhei/Programs/TryReact/src/index.html'

とあるので、index.html は、質問への追記・修正から

/Users/yamaguchishuuhei/Programs/TryReact/publicの中に入っています.

とのことでしたが、

/Users/yamaguchishuuhei/Programs/TryReact/src

に移動してみるとうまくいくかもしれません。

投稿2021/09/07 03:37

退会済みユーザー

総合スコア0

退会済みユーザー

2021/09/07 03:42

(base) yamaguchishuuhei@yamaguchishuuheinoMacBook-Air TryReact % npm start > react_start@1.0.0 start /Users/yamaguchishuuhei/Programs/TryReact > webpack-dev-server --mode development [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:8080/ [webpack-dev-server] On Your Network (IPv4): http://10.78.80.21:8080/ [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/ [webpack-dev-server] Content not from webpack is served from '/Users/yamaguchishuuhei/Programs/TryReact/public' directory asset js/app.js 1.26 MiB [emitted] (name: js/app) asset index.html 208 bytes [emitted] runtime modules 26.3 KiB 13 modules modules by path ./node_modules/ 1.14 MiB modules by path ./node_modules/webpack-dev-server/client/ 51 KiB 12 modules modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules modules by path ./node_modules/scheduler/ 26.3 KiB 4 modules modules by path ./node_modules/url/ 37.4 KiB 3 modules modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules modules by path ./node_modules/react/ 70.6 KiB 2 modules modules by path ./node_modules/react-dom/ 875 KiB 2 modules ./node_modules/ansi-html/index.js 4.16 KiB [built] [code generated] ./node_modules/events/events.js 14.5 KiB [built] [code generated] ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated] ./src/App.jsx 258 bytes [built] [code generated] webpack 5.52.0 compiled successfully in 4526 ms うまく行きました!ありがとうございます! なぜpublicではなくsrcの方がうまくいくのでしょうか?

退会済みユーザー

2021/09/07 03:47

webpack.config.jsに plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), という設定があるのと、回答にも書いたとおり、 Can't resolve '/Users/yamaguchishuuhei/Programs/TryReact/src/index.html' というエラーメッセージがあったので、src/ に　index.html を移動すればうまくいくんやないの〜？と思っただけで確信はありませんでした。 index.htmlの場所をpublic/のままにしておきたいのなら、逆にwebpack.config.jsのほうを plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', }), に修正すればうまくいくかもしれません。

退会済みユーザー

2021/09/07 04:06

わかりやすい説明ありがとうございます! 教えていただいたcreate-react-appのチュートリアルで少し勉強しようと思いました!

行動規範の内容に同意します