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

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

新規登録して質問してみよう
ただいま回答率
85.42%
MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

React.js

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

Q&A

解決済

1回答

1315閲覧

npm startで起動させたブラウザに「Cannot Get \」と表示されてしまう

shii

総合スコア4

MacOS(OSX)

MacOSとは、Appleの開発していたGUI(グラフィカルユーザーインターフェース)を採用したオペレーションシステム(OS)です。Macintoshと共に、市場に出てGUIの普及に大きく貢献しました。

React.js

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

0グッド

0クリップ

投稿2023/04/05 06:59

実現したいこと

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

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

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

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

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

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

hoshi-takanori

2023/04/05 07:41

public/index.html 作りました? webpack.config.js の中身も参考記事と違うし…。
shii

2023/04/06 00:10

public/index.html は参考記事のものをコピペしています。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" /> <title>React App</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="js/app.js" charset="utf-8"></script> </body> </html> webpack.config.js の内容は変更しております。。。 当初はコピペしましたが、npm startでエラーが出てしまい、 私の環境ではそのまま使用できないようでした。(おそらく)
hoshi-takanori

2023/04/06 03:30

うーん、とりあえず参考記事のリンク先 https://github.com/yuumi3/react_book の projects/hello_react は動きましたよ。というか、react の環境構築は素直にcreate-react-app で良いのでは…。
guest

回答1

0

自己解決

こちらのサイトでできました

https://reffect.co.jp/react/setup-reactを参考(というかほぼまんまです)に作成しなおしたらできました。

おまけになぜこの設定が必要なのか?といった解説がわかりやすく、勉強になりました。
ありがとうございます!!

投稿2023/04/06 06:02

shii

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問