Hi,
I have a component library using React + Storybook and everything was working fine, then I created a new component (An Algolia search bar) which also worked fine (viewing in Storybook), but when I tried to export (in my index.ts - to be consumed by other libs) I got some errors with dependency:
Failed to compile.
Module not found: Error: Can't resolve 'crypto' in '[path]/design-system/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: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
ERROR in ../design-system/dist/index.es.js 12:0-36
Module not found: Error: Can't resolve 'crypto' in '[path]/design-system/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: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
ERROR in ../design-system/dist/index.es.js 13:0-29
Module not found: Error: Can't resolve 'http' in '[path]/design-system/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 ../design-system/dist/index.es.js 15:0-31
Module not found: Error: Can't resolve 'https' in '[path]/design-system/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 }
webpack compiled with 3 errors
No issues found.
The crypto one I fixed by adding this code to my design-system package.json file:
"browser": {
"crypto": false,
},
but the http and https, if I add them to this list above, I got another issue:
requester-node-http.esm.js:9 Uncaught TypeError: http__WEBPACK_IMPORTED_MODULE_6__.Agent is not a constructor
at ../design-system/dist/index.es.js (requester-node-http.esm.js:9:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
I’m using the latest version of Storybook but wondering if I’m missing some setting required to get Algolia component ready to be imported by external libraries.