feat: Upgrade to Webpack 5

[loliver]

Working towards a fix for #215.

Our stack is React 17 with Treat, with our docs running on Gatsby.

The error I'm stuck on is getting pulled up in each imported component:

ERROR in ./node_modules/@oceanblue/textarea-field/dist/textarea-field.treat.js
Module build failed (from ./node_modules/treat/webpack-plugin/loader/dist/treat-webpack-plugin-loader.cjs.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (/Users/username/Documents/Repos/ob-docs/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:112:10)
    at /Users/username/Documents/Repos/ob-docs/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:40:19
    at Hook.eval [as call] (eval at create (/Users/username/Documents/Repos/ob-docs/node_modules/loliver-test-playroom/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/username/Documents/Repos/ob-docs/node_modules/loliver-test-playroom/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/username/Documents/Repos/ob-docs/node_modules/loliver-test-playroom/node_modules/webpack/lib/Compiler.js:1014:30)
    at /Users/username/Documents/Repos/ob-docs/node_modules/loliver-test-playroom/node_modules/webpack/lib/Compiler.js:1057:29
    at Hook.eval [as callAsync] (eval at create (/Users/username/Documents/Repos/ob-docs/node_modules/loliver-test-playroom/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/username/Documents/Repos/ob-docs/node_modules/loliver-test-playroom/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/Users/username/Documents/Repos/ob-docs/node_modules/loliver-test-playroom/node_modules/webpack/lib/Compiler.js:1052:28)
    at Compiler.runAsChild (/Users/username/Documents/Repos/ob-docs/node_modules/loliver-test-playroom/node_modules/webpack/lib/Compiler.js:518:8)
    at /Users/username/Documents/Repos/ob-docs/node_modules/treat/webpack-plugin/dist/treat-webpack-plugin.cjs.dev.js:343:21
    at Promise._execute (/Users/username/Documents/Repos/ob-docs/node_modules/bluebird/js/release/debuggability.js:384:9)
    at Promise._resolveFromExecutor (/Users/username/Documents/Repos/ob-docs/node_modules/bluebird/js/release/promise.js:518:18)
    at new Promise (/Users/username/Documents/Repos/ob-docs/node_modules/bluebird/js/release/promise.js:103:10)
    at compileTreatSource (/Users/username/Documents/Repos/ob-docs/node_modules/treat/webpack-plugin/dist/treat-webpack-plugin.cjs.dev.js:315:10)
    at getSource (/Users/username/Documents/Repos/ob-docs/node_modules/treat/webpack-plugin/dist/treat-webpack-plugin.cjs.dev.js:272:37)
 @ ./node_modules/@oceanblue/textarea-field/dist/index.js 69:29-62
 @ ./playroom/thematic/components.ts 20:17-75
 @ ./node_modules/loliver-test-playroom/src/components.js 2:0-58
 @ ./node_modules/loliver-test-playroom/src/frame.js 12:48-71 26:2-30:4 28:18-41 26:36-30:3

As well as the following which I'm pretty sure are just based on the Webpack builds failing per compnent:

ERROR in frame
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:9000' in '/Users/username/Documents/Repos/ob-docs'

ERROR in index
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:9000' in '/Users/username/Documents/Repos/ob-docs'

ERROR in preview
Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:9000' in '/Users/username/Documents/Repos/ob-docs'

Have published a smurf package to loliver-test-playroom as I was getting issues with multiple Webpack installs.

Hoping there are others out there that this can help and we can get to a solution.

Cheers.

[loliver]

Had some time tonight to dig in to the Cypress test failures, base64-url is still expecting Buffer from node to exist by default so I've added a plugin that polyfills Webpack 5 as per the older versions.

[belaczek]

Can somebody from maintainers please take a look at this PR? @markdalgleish @michaeltaranto @mattcompiles

[mattcompiles]

Hey 👋,

Sorry we haven't had bandwidth to look into this. Our main concern here is maintaining compatibility with webpack 4 as a lot of consumers are still using it. Not sure how difficult it would be to support both but otherwise we'll need to do a breaking change.

Also there are a lot of changes in this PR that seem unrelated to webpack 5 which makes it a bit hard to review.

[loliver]

Thanks all! :tada: