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

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

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

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

解決済

yarn webpack後にwebpack < 5 used to include polyfills for node.js core modules by default.のエラーメッセージが出る

sasaki0628
sasaki0628

総合スコア100

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

1回答

0グッド

0クリップ

1247閲覧

投稿2022/10/25 06:16

編集2022/10/25 06:30

yarn webpackコマンド実行後に以下のエラーメッセージが出力されます。

# yarn webpack yarn run v1.22.19 $ /usr/local/TEST/frontend/node_modules/.bin/webpack asset bundle.js 2.74 MiB [emitted] (name: main) orphan modules 498 KiB [orphan] 278 modules runtime modules 1.31 KiB 6 modules cacheable modules 2.24 MiB 299 modules ERROR in ./node_modules/follow-redirects/index.js 3:11-26 Module not found: Error: Can't resolve 'http' in '/usr/local/TEST/frontend/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 } @ ./node_modules/axios/dist/node/axios.cjs 9:24-51 @ ./src/components/pages/Login.tsx 63:30-46 @ ./src/App.tsx 5:14-49 @ ./src/index.tsx 8:12-28 ERROR in ./node_modules/follow-redirects/index.js 4:12-28 Module not found: Error: Can't resolve 'https' in '/usr/local/TEST/frontend/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 } @ ./node_modules/axios/dist/node/axios.cjs 9:24-51 @ ./src/components/pages/Login.tsx 63:30-46 @ ./src/App.tsx 5:14-49 @ ./src/index.tsx 8:12-28 ERROR in ./node_modules/zlib/lib/zlib.js 1:0-43 Module not found: Error: Can't resolve './zlib_bindings' in '/usr/local/TEST/frontend/node_modules/zlib/lib' @ ./node_modules/axios/dist/node/axios.cjs 10:13-28 @ ./src/components/pages/Login.tsx 63:30-46 @ ./src/App.tsx 5:14-49 @ ./src/index.tsx 8:12-28 ERROR in ./node_modules/axios/dist/node/axios.cjs 7:13-28 Module not found: Error: Can't resolve 'http' in '/usr/local/TEST/frontend/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 } @ ./src/components/pages/Login.tsx 63:30-46 @ ./src/App.tsx 5:14-49 @ ./src/index.tsx 8:12-28 ERROR in ./node_modules/axios/dist/node/axios.cjs 8:14-30 Module not found: Error: Can't resolve 'https' in '/usr/local/TEST/frontend/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 } @ ./src/components/pages/Login.tsx 63:30-46 @ ./src/App.tsx 5:14-49 @ ./src/index.tsx 8:12-28 5 errors have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it. webpack 5.74.0 compiled with 5 errors in 15654 ms error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

以下のコマンドを実行しましたが、解決しません。
yarn add http https
npm install https-browserify stream-http

解決方法をご存知の方がいればご教示願います…。

package.jsonは以下になります。

{ "name": "frontend", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", "@mui/material": "^5.10.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.0", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "assert": "^2.0.0", "axios": "^1.1.3", "browserify-zlib": "^0.2.0", "http": "^0.0.1-security", "https": "^1.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", "stream": "^0.0.2", "stream-browserify": "^3.0.0", "typescript": "^4.8.4", "url": "^0.11.0", "web-vitals": "^2.1.4", "zlib": "^1.0.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "https-browserify": "^1.0.0", "react-app-rewired": "^2.2.1", "stream-http": "^3.2.0", "ts-loader": "^9.4.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1" } }

tsconfig.jsonは以下になります。

{   "compilerOptions": {     "target": "es5", // コンパイル後のJavaScriptのバージョンの指定     "lib": [       "dom",       "dom.iterable",       "esnext"     ],     "allowJs": true,     "skipLibCheck": true,     "esModuleInterop": true, // CommonJS形式のモジュールを扱えるようにする     "allowSyntheticDefaultImports": true,     "strict": true,     "forceConsistentCasingInFileNames": true,     "noFallthroughCasesInSwitch": true,     "module": "commonjs", // コンパイル後のモジュールパターンの指定     "moduleResolution": "node",     "resolveJsonModule": true,     "isolatedModules": true,     "jsx": "react-jsx"   },   "include": [     "src"   ] }

webpack.config.jsは以下になります。

// パス操作を行うためのpathモジュールをインポート // Node.jsに標準搭載されている const path = require('path'); // モジュールの作成 module.exports = {     // モジュールバンドルを行うファイルの指定     mode: 'development',     entry: './src/index.tsx', //buildするファイル     output: {         filename: 'bundle.js', //build後のファイル名         path: path.join(__dirname, '../backend/static/js') //buildファイルが作成される場所     },     // モジュールに適用するルールの設定     module: {       // 拡張子が.tsで終わるファイルに対して、ts-loaderを適用している       rules: [{           test: /\.tsx?$/,           loader: 'ts-loader',           exclude: /node_modules/,       }, ],     },     // モジュール解決方法の設定     resolve: {       // モジュールとして扱いたいファイルの拡張子を省略する。       // import { hoge } from 'Hoge'; とあった場合 Hoge.ts を読み込む。なければ Hoge.tsx を読み込む。       extensions: ['.ts', '.tsx', '.js', '.jsx'],     } };

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

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

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

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

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

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

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

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

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

maisumakun

2022/10/25 06:25

以前コンパイルに成功した時と比べて、どのような変更を行いましたか?
sasaki0628

2022/10/25 06:27

まだ一度もyarn webpackは成功していません。
maisumakun

2022/10/25 06:29

webpack環境のセットアップはどのように行いましたか?

回答1

0

ベストアンサー

node_modules/axios/dist/node/axios.cjsと、間違ってNode.js用のAxiosを呼んでしまっているようです。

JavaScriptコードの参照あるいは設定が間違っていないか、あるいはNode.js専用で、ブラウザ環境では使えないライブラリを使っていないか確認してみましょう。

(なお、httphttpsモジュールはNode.js組付けのものであって、ブラウザでは使えませんので、手動でインストールしたところで問題は解決しません)

投稿2022/10/25 06:35

maisumakun

総合スコア141545

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

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

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

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

回答へのコメント

sasaki0628

2022/10/25 07:52

tsconfig.jsonの "module": "commonjs" を "module": "esnext", に変えたところ、解決いたしました。ありがとうございました。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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