実現したいこと
アプリケーションをビルド（npm run build）した際、コンポーネントだけ表示されないため、
正常なbuildが行える様にしたい。
前提
現在、Node.js（React）の勉強をしており、自分の思うアプリに必須な設定をしている際、Create React App では必要な設定を行うのに不便を感じ、色々な参考サイトを元に、自力で開発環境を整えています。
主に、
https://qiita.com/hato8899/items/d9613e8bdd0ff470764d
https://dev-k.hatenablog.com/entry/building-react-with-webpack-for-beginners
改善したい部分は個別で検索、修正。
無事にブラウザでアプリの表示までは出来たのですが、
npm run build した際、出来上がったデータにはコンポーネント部分が表示されないデータが作成されました。
（下記コードの「直接記載 No.7」は勿論表示、「コンポーネント No.7」が非表示な状態）
これはどこの設定が関係しているのでしょうか。
基本的な事かもしれませんが、ご教授頂ければ幸いです。
何卒、よろしくお願い致します。
該当のソースコード
├ myapp7
├ dist
│ ├ bundle.js
│ └ index.html
├ node_modules
│ └ etc...
├ src
│ ├ App.jsx
│ ├ index.html
│ └ index.js
├ package-lock.json
├ package.json
└ webpack.config.js
package.json
1{ 2 "name": "myapp7", 3 "version": "1.0.0", 4 "description": "", 5 "main": "App.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "build": "webpack", 9 "start": "webpack-dev-server" 10 }, 11 "keywords": [], 12 "author": "", 13 "license": "ISC", 14 "dependencies": { 15 "express": "^4.18.2", 16 "html-webpack-plugin": "^5.5.0", 17 "mysql2": "^3.1.2", 18 "nodemon": "^2.0.20", 19 "react": "^18.2.0", 20 "react-dom": "^18.2.0" 21 }, 22 "devDependencies": { 23 "@babel/preset-env": "^7.18.6", 24 "@babel/preset-react": "^7.18.6", 25 "babel-loader": "^8.2.5", 26 "webpack": "^5.73.0", 27 "webpack-cli": "^4.10.0", 28 "webpack-dev-server": "^4.9.3" 29 }, 30 "babel": { 31 "presets": [ 32 "@babel/preset-env", 33 "@babel/preset-react" 34 ] 35 } 36}
webpack.config.js
1const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm 2//const webpack = require('webpack'); //to access built-in plugins 3const path = require('path'); 4 5module.exports = { 6 mode: 'development', 7 entry: path.resolve(__dirname, './src/index.js'), 8 output: { 9 path: path.resolve(__dirname, './dist'), 10 publicPath: '/', 11 filename: 'bundle.js' 12 }, 13 devServer: { 14 port: 3000, 15 static: { 16 directory: path.resolve( __dirname, "./dist" ), 17 } 18 }, 19 resolve: { 20 modules: [ path.resolve(__dirname, "src"), "node_modules" ], 21 extensions: ['*', '.js', '.jsx'] 22 }, 23 module: { 24 rules: [ 25 { 26 test: /\.(js|jsx)$/, 27 exclude: /node_modules/, 28 use: ['babel-loader'], 29 }, 30 ] 31 }, 32 plugins: [ 33 new HtmlWebpackPlugin({template: './src/index.html'}) 34 ] 35};
App.jsx
1import React from 'react'; 2 3function App() { 4 return ( 5 <div className="App"> 6 <header className="App-header"> 7 コンポーネント No.7 8 </header> 9 </div> 10 ); 11} 12 13export default App;
index.html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Hello - src</title> 8 </head> 9 <body> 10 <div id="root"></div> 11 直接記載 No.7 12 </body> 13</html>
index.js
1import React from 'react'; 2// import { createRoot } from 'react-dom/client'; 3import ReactDOM from 'react-dom/client'; 4import App from './App'; 5 6const root = ReactDOM.createRoot(document.getElementById('root')); 7root.render( 8 <React.StrictMode> 9 <App /> 10 </React.StrictMode> 11);
command:npm_run_build
1> myapp7@1.0.0 build 2> webpack 3asset bundle.js 1.12 MiB [compared for emit] (name: main) 4asset index.html 365 bytes [emitted] 5runtime modules 1.04 KiB 5 modules 6cacheable modules 1.08 MiB 7 modules by path ./node_modules/ 1.08 MiB 8 modules by path ./node_modules/react-dom/ 1000 KiB 9 ./node_modules/react-dom/client.js 619 bytes [built] [code generated] 10 + 2 modules 11 modules by path ./node_modules/react/ 85.7 KiB 12 ./node_modules/react/index.js 190 bytes [built] [code generated] 13 ./node_modules/react/cjs/react.development.js 85.5 KiB [built] [code generated] 14 modules by path ./node_modules/scheduler/ 17.3 KiB 15 ./node_modules/scheduler/index.js 198 bytes [built] [code generated] 16 ./node_modules/scheduler/cjs/scheduler.development.js 17.1 KiB [built] [code generated] 17 modules by path ./src/ 595 bytes 18 ./src/index.js 321 bytes [built] [code generated] 19 ./src/App.jsx 274 bytes [built] [code generated] 20webpack 5.75.0 compiled successfully in 908 ms
エラーが出ている様子はないように思いますが、、ありますでしょうか。
試したこと
package.json：mein の値の変更
webpack.config.js：const webpack の有無
webpack.config.js：entry: path.resolve() の値の変更
index.js：import { createRoot } の有無
0 コメント