実現したいこと
Hello,World を表示させたい(htmlをブラウザに表示させたい)
前提
初心者でReactの環境を構築しています。
https://qiita.com/EZ_Denta/items/9e6a47f330b5a01806aeを参考に
npm start までなんとか成功したのですが、
ブラウザに「cannot Get /」と表示されてしまいました。
htmlには「Hello,World」と表示させるように設定しています。
エラー文がなく、色々試してはいますが何も変わらず困っております。。。
発生している問題・エラーメッセージ
npm start をした後のログ
<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/ <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.10.31:8080/ <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/ <i> [webpack-dev-server] Content not from webpack is served from './dist' directory <i> [webpack-dev-server] 404s will fallback to '/index.html' <i> [webpack-dev-middleware] wait until bundle finished: / asset app.js 3.05 MiB [emitted] (name: app) runtime modules 26.2 KiB 11 modules modules by path ./node_modules/ 1.12 MiB modules by path ./node_modules/webpack-dev-server/client/ 68.9 KiB 16 modules modules by path ./node_modules/webpack/hot/*.js 4.59 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/react/ 70.6 KiB 2 modules modules by path ./node_modules/react-dom/ 875 KiB ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated] ./node_modules/react-dom/cjs/react-dom.development.js 874 KiB [built] [code generated] ./node_modules/ansi-html-community/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/index.js 214 bytes [built] [code generated] webpack 5.77.0 compiled successfully in 1004 ms
該当のソースコード
package.json
{ "name": "reacttest", "version": "1.0.0", "description": "React test", "private": true, "main": "src/index.js", "scripts": { "start": "webpack-dev-server", "webpack": "webpack" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "@babel/cli": "^7.17.3", "@babel/core": "^7.17.5", "@babel/eslint-parser": "^7.21.3", "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "babel-eslint": "^10.1.0", "babel-loader": "^8.2.3", "css-loader": "^6.6.0", "eslint": "^8.9.0", "eslint-plugin-react": "^7.28.0", "eslint-webpack-plugin": "^3.2.0", "style-loader": "^3.3.1", "webpack": "^5.69.1", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } }
webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin') module.exports = { entry: { app: "./src/index.js" }, output: { path: __dirname + "/public/js", publicPath: "/js/", filename: "[name].js" }, devServer: { historyApiFallback: true, static: { directory: './dist', }, port: 8080, open: true, }, devtool: "eval-source-map", mode: "development", module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] }, { test: /\.css$/, use: ["style-loader","css-loader"] }] }, plugins: [ new ESLintPlugin() ] };
試したこと
①<webpack.config.js>
devServer: {
historyApiFallback: true; ←追記
②<package.json>
main: src/index.js ←src/を追記
③npx webpack
disファイルが作成されませんでした。app.jsもおそらくないです。(これが原因かもしれません)
そしてHomeディレクトリ(Appディレクトリより上の階層)にpackage.jsonとpackage.lock.jsonファイルが作成されてしまい何が起きたのかわかりませんでした。
補足情報(FW/ツールのバージョンなど)
mac M1 Ventura 13.2.1

回答1件
あなたの回答
tips
プレビュー