BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

Question

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

symeonmattes opened this issue 2 years ago · comments

Expected Behavior:

In an angular12 project I have installed "@influxdata/influxdb-client": "1.25.0", and I have tried to use the example as it is described in

https://github.com/influxdata/influxdb-client-js/blob/master/examples/query.ts

Current Behavior:

I receive a message:

[ng] ./node_modules/@influxdata/influxdb-client/dist/index.mjs:1:28-51 - Error: Module not found: Error: Can't resolve 'http' in '/MyProject/node_modules/@influxdata/influxdb-client/dist'
[ng] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[ng] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[ng] If you want to include a polyfill, you need to:
[ng] 	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
[ng] 	- install 'stream-http'
[ng] If you don't want to include a polyfill, you can use an empty module like this:
[ng] 	resolve.fallback: { "http": false }
[ng] ./node_modules/@influxdata/influxdb-client/dist/index.mjs:1:51-75 - Error: Module not found: Error: Can't resolve 'https' in '/MyProject/node_modules/@influxdata/influxdb-client/dist'
[ng] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[ng] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[ng] If you want to include a polyfill, you need to:
[ng] 	- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
[ng] 	- install 'https-browserify'
[ng] If you don't want to include a polyfill, you can use an empty module like this:
[ng] 	resolve.fallback: { "https": false }
[ng] ./node_modules/@influxdata/influxdb-client/dist/index.mjs:1:107-127 - Error: Module not found: Error: Can't resolve 'zlib' in '/MyProject/node_modules/@influxdata/influxdb-client/dist'
[ng] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[ng] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[ng] If you want to include a polyfill, you need to:
[ng] 	- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
[ng] 	- install 'browserify-zlib'
[ng] If you don't want to include a polyfill, you can use an empty module like this:
[ng] 	resolve.fallback: { "zlib": false }

Specifications:

Version: 1.25.0
Platform: angular 12/ionic

Pavel Závora · Answer 1 · Sun Apr 24 2022 19:38:06 GMT+0800 (China Standard Time)

Hi, see https://github.com/influxdata/influxdb-client-js#installation ... if you target browser, use @influxdata/influxdb-client-browser.

RobRover · Answer 2 · Mon Apr 25 2022 17:48:40 GMT+0800 (China Standard Time)

I have the same issue and sranka solution, installing @influxdata/influxdb-client-browser instead of @influxdata/influxdb-client, does not work

Pavel Závora · Answer 3 · Mon Apr 25 2022 18:32:35 GMT+0800 (China Standard Time)

@RobRover can you please be more specific about what does not work and how it fails? It is not possible to fail with @influxdata/influxdb-client-browser on the same error. @symeonmattes can you please share your status?

The webpack configuration might affect the results in many ways, the most important when importing the libraries is the order of main fields, see https://webpack.js.org/configuration/resolve/#resolvemainfields . See also #321 (comment) for a deeper explanation. It seems to me that this issue is related to ionic/webpack, I would be glad if you could share your findings.

RobRover · Answer 4 · Mon Apr 25 2022 19:02:32 GMT+0800 (China Standard Time)

Using React 18, After installing.


npm install --save @influxdata/influxdb-client

npm install --save @influxdata/influxdb-client-apis

I try to use InfluxDB and I het the following error, similar to symeonmattes

Compiled with problems:

ERROR in ./node_modules/@influxdata/influxdb-client/dist/index.mjs 1:0-33

Module not found: Error: Can't resolve 'url' in '/home/cirici/Documents/cirici_projects/react-influx/node_modules/@influxdata/influxdb-client/dist'

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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/@influxdata/influxdb-client/dist/index.mjs 2:0-26

Module not found: Error: Can't resolve 'http' in '/home/cirici/Documents/cirici_projects/react-influx/node_modules/@influxdata/influxdb-client/dist'

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/@influxdata/influxdb-client/dist/index.mjs 3:0-27

Module not found: Error: Can't resolve 'https' in '/home/cirici/Documents/cirici_projects/react-influx/node_modules/@influxdata/influxdb-client/dist'

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/@influxdata/influxdb-client/dist/index.mjs 4:0-37

Module not found: Error: Can't resolve 'buffer' in '/home/cirici/Documents/cirici_projects/react-influx/node_modules/@influxdata/influxdb-client/dist'

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: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }


ERROR in ./node_modules/@influxdata/influxdb-client/dist/index.mjs 5:0-21

Module not found: Error: Can't resolve 'zlib' in '/home/cirici/Documents/cirici_projects/react-influx/node_modules/@influxdata/influxdb-client/dist'

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 }

After running this command

npm install buffer browserify-zlib stream-http url https-browserify

I get less errors but still

Compiled with problems:

ERROR in ./node_modules/@influxdata/influxdb-client/dist/index.mjs 2:0-26

Module not found: Error: Can't resolve 'http' in '/home/cirici/Documents/cirici_projects/react-influx/node_modules/@influxdata/influxdb-client/dist'

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/@influxdata/influxdb-client/dist/index.mjs 3:0-27

Module not found: Error: Can't resolve 'https' in '/home/cirici/Documents/cirici_projects/react-influx/node_modules/@influxdata/influxdb-client/dist'

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/@influxdata/influxdb-client/dist/index.mjs 5:0-21

Module not found: Error: Can't resolve 'zlib' in '/home/cirici/Documents/cirici_projects/react-influx/node_modules/@influxdata/influxdb-client/dist'

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 }

I also tried to install @influxdata/influxdb-client-browser instead of @influxdata/influxdb-client but still I got the same problem, Thanks

Pavel Závora · Answer 5 · Mon Apr 25 2022 19:24:55 GMT+0800 (China Standard Time)

@RobRover I am not much familiar with ionic, it seems to me that it requires a variant of a browser environment that preffers ESM modules. You cannot get into the same problems with @influxdata/influxdb-client-browser, simply because it does not use node libraries at all. After installing @influxdata/influxdb-client-browser, you also have to change your source files to import from @influxdata/influxdb-client-browser in place of @influxdata/influxdb-client. Alternatively, you might try to customize webpack configuration to load a browser version of the library (use module:browser as the first choice in the webpack main fields ... or resolve alias @influxdata/influxdb-client as @influxdata/influxdb-client-browser).

RobRover · Answer 6 · Mon Apr 25 2022 19:42:40 GMT+0800 (China Standard Time)

Firstly sorry, then thanks. I was missing the correct import in the index file. Using "@influxdata/influxdb-client-browser" worked perfectly :)

symeonmattes · Answer 7 · Wed Apr 27 2022 02:30:22 GMT+0800 (China Standard Time)

Hi,

Installing @influxdata/influxdb-client-browser worked for me as well.

Thanks