I'm still a little new to the JS environment and desperately need some help. I want to create an Outlook addin with a react-interface and have created a template via the yeoman generator. Finally I added a library called axios to the project via npm. Now there are several errors when compiling/debugging:
ERROR in ./node_modules/follow-redirects/index.js 3:11-26 Module not found: Error: Can't resolve 'http' in 'PathToModule\node_modules\follow-redirects'
What do the errors say and how can I eliminate them?
<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
The key to interpreting those errors is "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case."
Since these projects use webpack 5 then the polyfills aren't automatically added for you and you have to do it explicitly. For each error you will see the "If you want to include a polyfill, you need to ..." and the next two lines will tell you to add a fallback and install something.
Adding a fallback refers to updating the webpack config file. You need to add indicated line to the module.fallback section of the config file (you should see some fallback entries already there). For the first error this would be '"https": require.resolve("https-browserify")'.
For the install, you need to add a dependency to your project for the required module needed by the fallback by running npm install. For the first error this would mean running 'npm install https-browserify'.
You would need to do this for each error. Note that the errors can repeat themselves and you only have to do this once per module. Once you do this for each of the modules, then the error should go away.
Note that you do have the option of putting false in the webpack config file instead to not use the module, but you may find yourself running into other errors as a result.