Compatibility with Webpack 5

[PiTomar]

After updating from Webpack 4 to 5.1.3. the following behavior occurs.

While building Webpack warns about the changed behavior about browser-polyfill.
The hoodie-plugin-store-crypto is affected by the “stream-browserify” polyfill and shows the following warning:

ERROR in ./node_modules/cipher-base/index.js 2:16-43
Module not found: Error: Can't resolve 'stream' in '...\node_modules\cipher-base'

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/browserify-aes/decrypter.js 5:16-38
 @ ./node_modules/browserify-aes/browser.js 2:16-38
 @ ./node_modules/hoodie-plugin-store-crypto/lib/helpers/encrypt-core.js 5:10-35
 @ ./node_modules/hoodie-plugin-store-crypto/lib/utils/create-password-check.js 7:14-48
 @ ./node_modules/hoodie-plugin-store-crypto/lib/helpers/change-password-and-update-docs.js 4:26-67
 @ ./node_modules/hoodie-plugin-store-crypto/lib/change-password.js 7:34-86
 @ ./node_modules/hoodie-plugin-store-crypto/lib/bind-functions.js 59:25-58
 @ ./node_modules/hoodie-plugin-store-crypto/index.js 5:20-51
 @...

So like the warning say I install stream-browserify (3.0.0) manually and add the fallback in the webpack file.

 module.exports = {
    ...
    resolve: {  
        ...
        fallback: {
            'stream': require.resolve('stream-browserify')
        }      
      
    },

Result: the webpack warning is gone but when I load my app the browser (chrome) shows the following error:
"default-encoding.js:3 Uncaught ReferenceError: process is not defined"

So I install process (0.11.10) manually and add it to the plugin section in the webpack file:

   new webpack.ProvidePlugin({
            process: 'process/browser',
        }),

After this the Browser brings the follwoing error when creating a new store.. (when loading an exisitng it fails alos but only shows an authentication error)
"ReferenceError: Buffer is not defined"

So I install buffer (5.6.0) and add it also to the plugin section in the webpack file:

 new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),

For now it seems to work, but I'm not sure if my doing is correct or has any side effects.
Maybe all this missing dependencies, polyfill and config should be add to the hoodie-plugin-store-crypto directly?

[Terreii]

🎉 This issue has been resolved in version 4.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Terreii]

This should now work.
I switched to use a Web-crypto-polyfill and manly use Web-APIs now.
But I intend to remove the polyfill in the next major release. Because most Apps/Pages will run on a secure environment where the Web-crypto-API is available (to an extend even IE 11).
But I will look into how to include the Crypto-Polyfill without increasing the bundle size for people that don't need it.

[Terreii]

I'm sorry but I have to reopen this issue and revert back some changes.
The last release did run to slow in node. Which made testing almost unusable.

But I made some preparations for supporting Ecmascript Modules-only bundlers and node at the same time. But I have first make some other bigger changes.

[PiTomar]

Hi,
ok thanks for information.
Didn’t notice any impact on my side. (May I wasn’t affected because I still had to load some of the library’s by myself because of another older pouch-package-dependency that also didn’t work with webpack 5)