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

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

新規登録して質問してみよう
ただいま回答率
86.02%
Laravel

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

React.js

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

Q&A

解決済

Laravel+Reactでnpm run devが通らない。

hiraganaaa
hiraganaaa

総合スコア1

Laravel

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

React.js

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

1回答

0グッド

0クリップ

359閲覧

投稿2022/11/14 17:45

前提

npm run devでよくわからないエラーが出る
(例)
laravel7+Reactでプロジェクトを作成したいのだが、途中で行ったnpm run devでエラーが発生する。

Module not found: Error: Can't resolve 'http'

実現したいこと

ここに実現したいことを箇条書きで書いてください。
・エラーを解決させたい。

発生している問題・エラーメッセージ

Module not found: Error: Can't resolve 'http' ...```ここに言語を入力 コード
### 該当のソースコード ```ここに言語名を入力 dev > npm run development > development > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js × Mix Compiled with some errors in 4.60s ERROR in ./node_modules/follow-redirects/index.js 3:11-26 Module not found: Error: Can't resolve 'http' in 'C:\Users\81807\OneDrive\デスクトップ\Project\projectB\node_modules\follow-redirects' Did you mean './http'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false } ERROR in ./node_modules/follow-redirects/index.js 4:12-28 Module not found: Error: Can't resolve 'https' in 'C:\Users\81807\OneDrive\デスク トップ\Project\projectB\node_modules\follow-redirects' Did you mean './https'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false } ERROR in ./node_modules/follow-redirects/index.js 5:15-41 Module not found: Error: Can't resolve 'stream' in 'C:\Users\81807\OneDrive\デスクトップ\Project\projectB\node_modules\follow-redirects' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false } ERROR in ./node_modules/axios/dist/node/axios.cjs 7:13-28 Module not found: Error: Can't resolve 'http' in 'C:\Users\81807\OneDrive\デスクトップ\Project\projectB\node_modules\axios\dist\node' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false } ERROR in ./node_modules/axios/dist/node/axios.cjs 8:14-30 Module not found: Error: Can't resolve 'https' in 'C:\Users\81807\OneDrive\デスク トップ\Project\projectB\node_modules\axios\dist\node' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false } ERROR in ./node_modules/axios/dist/node/axios.cjs 10:13-28 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\81807\OneDrive\デスクトップ\Project\projectB\node_modules\axios\dist\node' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false } ERROR in ./node_modules/axios/dist/node/axios.cjs 11:15-32 Module not found: Error: Can't resolve 'stream' in 'C:\Users\81807\OneDrive\デスクトップ\Project\projectB\node_modules\axios\dist\node' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false } webpack compiled with 7 errors

試したこと

プロジェクトの作り直し、npm installを行った。

補足情報(FW/ツールのバージョンなど)

質問するのは初めてなので、不備があればお教えください。
よろしくお願いします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2022/11/14 18:36

React というか、ブラウザでは使えないパッケージを使おうとしてるかも? エラーメッセージだけじやなく、差し支えなければ React のソースも貼りましょう。
hiraganaaa

2022/11/15 07:14

React、その他ダウンロードしてすぐのデフォルトの状態です。 以下がコードになります。 import React from 'react'; import ReactDOM from 'react-dom'; function Example() { return ( <div className="container"> <div className="row justify-content-center"> <div className="col-md-8"> <div className="card"> <div className="card-header">Example Component</div> <div className="card-body">I'm an example component!</div> </div> </div> </div> </div> ); } export default Example; if (document.getElementById('example')) { ReactDOM.render(<Example />, document.getElementById('example')); }

回答1

0

自己解決

今回の問題は解決しませんでした。
しかし、nodeの再インストール、最新のlaravel,laravel/uiにてやり直すことによってエラーが出なくなりました。
私と同じようにどうしても解決できないエラーに直面している方は、最新のバージョンのインストールをお勧めします。
私とともに悩んでくださった方、ありがとうございました。

投稿2022/11/16 05:22

hiraganaaa

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Laravel

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

React.js

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