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

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

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

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

React.js

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

Q&A

解決済

1回答

1091閲覧

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

hiraganaaa

総合スコア1

Laravel

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

React.js

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

0グッド

0クリップ

投稿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/ツールのバージョンなど)

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

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

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

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

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

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

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')); }
guest

回答1

0

自己解決

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

投稿2022/11/16 05:22

hiraganaaa

総合スコア1

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問