I want to create a custom plugin or element based on a project in the asset gallery: weweb-assets · GitHub. I need to import some dependencies which I have done using “npm install”. But one dependency is dependent on several polyfills (crypto, stream, vm).
When running the build (npm run serve) on the element I get:
ERROR in ../../@toruslabs/eccrypto/dist/eccrypto.esm.js 1:0-32
Module not found: Error: Can't resolve 'crypto' in 'C:\Projects\ww-input-basic\node_modules\@toruslabs\eccrypto\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'
This means that to correct the issue I would need to modify webpack.config.js but as far as I understand WeWeb hides this configuration. When I add the file webpack.config.js nothing happens - it seems to not be taken into account.
Please advise, how do I add polyfills to custom components/elements/plugins? Like crypto-browserify, stream-browserify etc.
I mean, it tells you right there what to do. You add a fallback, and install the npm package called crypto browserify. Right? Hmm I see now, you need to update the webpack config. Maybe @aurelie could help?
I’d probably try some other npm package that mimics crypto, if you can swap it.
As i said, “ This means that to correct the issue I would need to modify webpack.config.js but as far as I understand WeWeb hides this configuration. When I add the file webpack.config.js nothing happens - it seems to not be taken into account.”
So the real question is how to add or work with webpack.config.js? As it seems the only way to specify a fallback.
I cannot remove this dependency because the polyfills are required by other libraries which I need, not my own code.
At the moment, there is no possibility to change the webpack configuration. It is a very internal implementation, which is use in three differents places and timing inside WeWeb and so this is not an easy feature to implement.
I would advice to find a workaround to install the polyfill, or move to an other library.
How React does it is that they give an option to specify config-overrides.js which will then be taken into account in the build pipeline. Also for vue-cli it was possible to add overrides into vue.config.js.
Would it be possible to add a similar method?
Using some of the polyfills is very common among libraries and unfortunately my selection is limited. Webpack 4 contained all the polyfills but from version 5 which WeWeb started to use from last summer the polyfills are optional in webpack. I don’t know any other option for a workaround.
Its also not easy to devise a workaround because the solution needs to be part of the webpack bundling cycle, when it builds the dependency graph. Which is exactly why they have the fallback feature which only can be set up using webpack.config.js or some fallback mechanism baked into the process. Would you be able to add a simple feature to (in ww-config.js maybe?) to add a simple mapping X → Y for replacements or a list for ignores.
Actually all my needed dependencies should exist in the browser so I would need to add “resolve.fallback: { “crypto”: false }” in webpack.config. It should not fail to bundle the js, it will work fine, the error should be ignored.