Update webpack to v5

[bumi]

Currently we are using Webpack v4 (as provided by the extension boilerplate) we should update to v5. Maybe this also makes it easier to have good source maps? (#23 )

I tried to update all dependencies but getting the following error:

lightning/lightning-browser-extension@issue_23  » yarn dev:firefox
yarn run v1.22.10
$ cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --watch
[ Starting the Hot Extension Reload Server... ]
(node:47178) [DEP_WEBPACK_COMPILATION_AFTER_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: afterOptimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:47178) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:47178) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.chunks was changed from Array to Set (using Array method 'reduce' is deprecated)
wext-manifest-webpack-plugin: removed js/manifest.bundle.js
(node:47178) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
(node:47178) [DEP_WEBPACK_CHUNK_ENTRY_MODULE] DeprecationWarning: Chunk.entryModule: Use new ChunkGraph API
[webpack-cli] HookWebpackError: item.node is not a function
    at makeWebpackError (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack/lib/HookWebpackError.js:49:9)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack/lib/Compilation.js:2394:12
    at eval (eval at create (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:80:1)
-- inner error --
TypeError: item.node is not a function
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/ConcatSource.js:59:50
    at Array.map (<anonymous>)
    at ConcatSource.node (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/ConcatSource.js:58:63)
    at ConcatSource.proto.sourceAndMap (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/SourceAndMapMixin.js:29:18)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/dist/index.js:321:27
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:23:31
    at run (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:23:43)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:45:20
caused by plugins in Compilation.hooks.processAssets
TypeError: item.node is not a function
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/ConcatSource.js:59:50
    at Array.map (<anonymous>)
    at ConcatSource.node (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/ConcatSource.js:58:63)
    at ConcatSource.proto.sourceAndMap (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/webpack-sources/lib/SourceAndMapMixin.js:29:18)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/dist/index.js:321:27
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:23:31
    at run (/Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:23:43)
    at /Users/bumi/src/lightning/lightning-browser-extension/node_modules/terser-webpack-plugin/node_modules/p-limit/index.js:45:20
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[chris-aeviator]

working on it...got rid of the item.node error but many other things to fix...keep u updated

[chris-aeviator]

Seems we'll need to fork https://github.com/nitram509/macaroons.js & https://github.com/Tierion/lsat-js due to incompatibilities. Webpack 5 has removed automatic polyfill loading and it seems we need to add fallback resolve statements into those modules.

Module not found: Error: Can't resolve 'crypto' in '/home/korny/Development/WEBLN/lightning-browser-extension/node_modules/lsat-js/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 }

UPDATE: fixed that

[bumi]

no forking for crypto libraries! :D

[chris-aeviator]

the not so well documented alias and installing the polyfills manually solved this.

[bumi]

the extension reloader plugin seems to be the issue: it also seems that this package is not really maintained. wondering if there is an alternative we can use.

https://github.com/rubenspgcavalcante/webpack-extension-reloader/issues/110 https://github.com/rubenspgcavalcante/webpack-extension-reloader/issues/116

[chris-aeviator]

we could give https://github.com/webextension-toolbox/webextension-toolbox a spin

UPDATE: oh --> he's struggling updating to wp5 https://github.com/webextension-toolbox/webextension-toolbox/issues/309#issuecomment-729226633

lets see if we can find a webpack wizard instead