🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Node.js

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

React.js

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

Q&A

1回答

2508閲覧

npm run devができない React環境構築

OTAHARUNA

総合スコア0

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Node.js

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

React.js

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

0グッド

0クリップ

投稿2021/03/21 08:01

前提・実現したいこと

laravel6.0環境下でReactを入れたいです。

composer require laravel/ui --dev
php artisan ui react

ホストOS下でnpm installはできて
npm run dev
を実行しましたが下記エラーが起きます。

エラーメッセージ

λ npm run dev

@ dev C:\Users\chopp\Laravel_TRY\mySNS
npm run development

@ development C:\Users\chopp\Laravel_TRY\mySNS
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

ERROR Failed to compile with 2 errors 16:32:57
These dependencies were not found:

  • react in ./resources/js/components/Example.js
  • react-dom in ./resources/js/components/Example.js

To install them, you can run: npm install --save react react-dom
Asset Size Chunks Chunk Names
/css/app.css 179 KiB /js/app [emitted] /js/app
/js/app.js 1.08 MiB /js/app [emitted] /js/app

ERROR in ./resources/js/components/Example.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\chopp\Laravel_TRY\mySNS\resources\js\components'
@ ./resources/js/components/Example.js 1:0-26 5:22-27 7:18-23 9:18-23 11:18-23 13:18-23 15:40-45 23:32-37
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/components/Example.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\chopp\Laravel_TRY\mySNS\resources\js\components'
@ ./resources/js/components/Example.js 2:0-33 23:2-10
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development 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! C:\Users\chopp\AppData\Roaming\npm-cache_logs\2021-03-21T07_33_03_499Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: npm run development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev 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! C:\Users\chopp\AppData\Roaming\npm-cache_logs\2021-03-21T07_33_03_532Z-debug.log

~~下記試したこと
rm -rf node_modules && rm package-lock.json
npm cache clear --force && npm cache clean --force

npm uninstall --save-dev sass-loader
npm install --save-dev sass-loader@7.1.0

等試しましたが改善されません。

ご教授お願いいたします。

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

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

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

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

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

guest

回答1

0

エラーメッセージを読むと react と react-dom が入ってません。

npm install --save react react-dom

を実行してください。

エラーメッセージの読み方のおすすめ記事をシェアします。
エラーメッセージの読み方と対処, 検索や質問の原則

投稿2021/03/22 02:00

kaya754

総合スコア133

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問