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

Question

前提

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

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

Comments

[hoshi-takanori]

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

[hiraganaaa]

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

Answer 1

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