質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1317閲覧

React(Node.js) で build後、コンポーネントが表示されない件

bizinesuwa

総合スコア2

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/02/27 08:41

実現したいこと

アプリケーションをビルド(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 } の有無

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mike2mike4

2023/02/27 09:47

buildするとパスが絶対パスになってしまう現象があるようなので、それかも。index.html内をみてください。
hoshi-takanori

2023/02/27 10:00

webpack.config.js で publicPath: '/', してるからでしょうね。とりあえず '.' にすれば動くかも?
bizinesuwa

2023/02/27 10:32

コメントいただき、ありがとうございます。 > mike2mike4 様 絶対パス、index.html を色々ググって見ましたが、改善策までの情報がヒットしませんでした。 絶対パスになる情報でもいただけた事、ありがとうございます。 > hoshi-takanori 様 コメントありがとうございます。 「publicPath: '/',」を削除(もしくは '.')とする事で正常にビルドが成功しました。 調べてみると、既に不要になっている項目(?)らしいので、今回は削除で対応致しました。 お二方、情報をいただきありがとうございます!
guest

回答1

0

自己解決

コメントいただききました内容で無事解決に至りました。

■ 解決策
「publicPath: '/',」を削除(もしくは '.')とする事で正常

ご指摘いただき、ありがとうございました。

投稿2023/02/27 10:34

bizinesuwa

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問