展望中的Webpack问题与Axios -AddIn/React
展望中的Webpack问题与Axios -AddIn/React
提问于 2022-10-20 09:52:31
我对JS环境还有点陌生，迫切需要一些帮助。我想要创建一个Outlook外接程序与一个反应界面，并已经创建了一个模板通过尤曼生成器。最后，我通过npm向项目添加了一个名为axios的库。现在，在编译/调试时有几个错误：
错误出现在./node_modules/found重定向/index.js 3:11-26模块未找到:错误:无法解析'http‘在’PathToModule\节点_模块\后续-重定向‘
这些错误说了什么，我如何消除它们？
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): https://192.168.100.31:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\denny\FloxAddIn\public' directory
assets by path assets/*.png 88.2 KiB 6 assets
assets by path *.js 9.93 MiB
asset vendor.js 6.21 MiB [emitted] (name: vendor) 1 related asset
asset taskpane.js 2.6 MiB [emitted] (name: taskpane) 1 related asset
asset polyfill.js 888 KiB [emitted] (name: polyfill) 1 related asset
asset commands.js 249 KiB [emitted] (name: commands) 1 related asset
assets by path *.xml 8.42 KiB
asset manifest copy.xml 4.61 KiB [emitted] [from: manifest copy.xml] [copied]
asset manifest.xml 3.81 KiB [emitted] [from: manifest.xml] [copied]
assets by path *.html 1.55 KiB
asset taskpane.html 1.12 KiB [emitted]
asset commands.html 444 bytes [emitted]
asset 8557bda7801491dd2dad.css 1.48 KiB [emitted] [immutable] [from: src/taskpane/taskpane.css]
orphan modules 25.7 KiB [orphan] 182 modules
runtime modules 110 KiB 52 modules
modules by path ./node_modules/ 4.66 MiB 1433 modules
modules by path ./src/ 45.4 KiB
modules by path ./src/taskpane/components/*.js 41.4 KiB
./src/taskpane/components/App.js 10.6 KiB [built] [code generated]
./src/taskpane/components/Header.js 5 KiB [built] [code generated]
./src/taskpane/components/HeroList.js 5.41 KiB [built] [code generated]
./src/taskpane/components/Progress.js 5.15 KiB [built] [code generated]
./src/taskpane/components/BeteiligtenListe.js 5.49 KiB [built] [code generated]
./src/taskpane/components/BeteiligterAction.js 9.84 KiB [built] [code generated]
./src/taskpane/index.js 1.89 KiB [built] [code generated]
./src/commands/commands.js 2.02 KiB [built] [code generated]
./assets/logo-filled.png 42 bytes (javascript) 38.9 KiB (asset) [built] [code generated]
ERROR in ./node_modules/follow-redirects/index.js 3:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\denny\FloxAddIn\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/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
@ ./src/taskpane/components/App.js 36:0-52 203:45-62
@ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53
ERROR in ./node_modules/follow-redirects/index.js 4:12-28
Module not found: Error: Can't resolve 'https' in 'C:\Users\denny\FloxAddIn\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/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
@ ./src/taskpane/components/App.js 36:0-52 203:45-62
@ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53
ERROR in ./node_modules/follow-redirects/index.js 5:15-41
Module not found: Error: Can't resolve 'stream' in 'C:\Users\denny\FloxAddIn\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 }
@ ./node_modules/axios/dist/node/axios.cjs 9:24-51
@ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
@ ./src/taskpane/components/App.js 36:0-52 203:45-62
@ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53
ERROR in ./node_modules/follow-redirects/index.js 6:13-30
Module not found: Error: Can't resolve 'assert' in 'C:\Users\denny\FloxAddIn\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: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }
@ ./node_modules/axios/dist/node/axios.cjs 9:24-51
@ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
@ ./src/taskpane/components/App.js 36:0-52 203:45-62
@ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53
ERROR in ./node_modules/axios/dist/node/axios.cjs 7:13-28
Module not found: Error: Can't resolve 'http' in 'C:\Users\denny\FloxAddIn\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/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
@ ./src/taskpane/components/App.js 36:0-52 203:45-62
@ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53
ERROR in ./node_modules/axios/dist/node/axios.cjs 8:14-30
Module not found: Error: Can't resolve 'https' in 'C:\Users\denny\FloxAddIn\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/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
@ ./src/taskpane/components/App.js 36:0-52 203:45-62
@ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53
ERROR in ./node_modules/axios/dist/node/axios.cjs 10:13-28
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\denny\FloxAddIn\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 }
@ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
@ ./src/taskpane/components/App.js 36:0-52 203:45-62
@ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53
ERROR in ./node_modules/axios/dist/node/axios.cjs 11:15-32
Module not found: Error: Can't resolve 'stream' in 'C:\Users\denny\FloxAddIn\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 }
@ ./src/taskpane/components/BeteiligterAction.js 77:18-42 112:22-46
@ ./src/taskpane/components/App.js 36:0-52 203:45-62
@ ./src/taskpane/index.js 1:0-35 23:9-12 27:7-10 30:40-34:3 30:2-34:4 31:18-53
8 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.53.0 compiled with 8 errors in 17315 ms回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-20 17:13:05
解释这些错误的关键是“彻底改变: webpack <5”，默认情况下，webpack<5用于包含node.js核心模块的填充，现在情况不再是这样了。
由于这些项目使用webpack 5，那么聚合填充不会自动为您添加，您必须明确地这样做。对于每一个错误，您都会看到“如果您想要包含一个多边形填充，您需要.”接下来的两行将告诉您添加一个回退并安装一些东西。
添加回退指的是更新webpack配置文件。您需要将指定的行添加到配置文件的module.fallback部分(您应该已经看到了一些回退项)。第一个错误是“https”：require.resolve(“https-browserify”)。
对于安装，通过运行npm，您需要向项目中添加备用组件所需的依赖项。对于第一个错误，这意味着运行'npm安装https-browserify‘。
您需要对每个错误执行此操作。注意，错误可以自己重复，每个模块只需要重复一次。一旦您对每个模块执行了此操作，那么错误就会消失。
请注意，您可以选择在webpack配置文件中放置false，而不是不使用该模块，但结果可能会遇到其他错误。
Stack Overflow用户
发布于 2022-11-08 11:54:30
您使用的是哪个版本的axios？最新的axios似乎存在一个问题。
发布报告链接以供参考：https://github.com/axios/axios/issues/5154
如果你降低了axios版本的等级，它会很好的工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74137871
复制相关文章
相似问题
腾讯云开发者
