Add webpack 5 support (#557)

* Add webpack 5 support

* Update packages/example-react/webpack.config.js

* lint

* Update yarn.lock

Co-authored-by: Jaco <jacogr@gmail.com>

.gitignore

@@ -3,6 +3,7 @@ build-docs/
 coverage/
 node_modules/
 tmp/
+.idea
 .DS_Store
 .env.local
 .env.development.local

package.json

@@ -38,16 +38,19 @@
     "@polkadot/ts": "^0.4.18",
     "@polkadot/x-bundle": "^8.1.2",
     "@types/jest": "^27.0.3",
+    "babel-loader": "^8.2.3",
     "babel-plugin-transform-vue-template": "^0.4.2",
     "empty": "^0.10.1",
+    "process": "^0.11.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-native": "^0.66.4",
+    "stream-browserify": "^3.0.0",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-serve": "^3.2.0"
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-serve": "^4.0.0"
   },
   "resolutions": {
     "typescript": "^4.5.3"

packages/example-react/webpack.config.js

@@ -3,10 +3,11 @@
 
 const path = require('path');
 const { WebpackPluginServe } = require('webpack-plugin-serve');
+const webpack = require('webpack');
 
 module.exports = {
   context: __dirname,
-  devtool: 'cheap-eval-source-map',
+  devtool: 'eval-cheap-source-map',
   entry: './src/index.tsx',
   mode: 'development',
   module: {
@@ -36,6 +37,12 @@ module.exports = {
       port: 8080,
       progress: false, // since we have hmr off, disable
       static: __dirname
+    }),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer']
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
     })
   ],
   resolve: {
@@ -43,9 +50,15 @@ module.exports = {
       '@polkadot/react-identicon': path.resolve(__dirname, '../react-identicon/build'),
       '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
       '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
+      'process/browser': require.resolve('process/browser'),
+      'react/jsx-runtime': require.resolve('react/jsx-runtime')
     },
-    extensions: ['.js', '.ts', '.tsx']
+    extensions: ['.js', '.ts', '.tsx'],
+    fallback: {
+      buffer: require.resolve('buffer'),
+      stream: require.resolve('stream-browserify')
+    }
   },
   watch: true
 };

packages/example-vue/webpack.config.js

@@ -4,10 +4,11 @@
 const path = require('path');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const { WebpackPluginServe } = require('webpack-plugin-serve');
+const webpack = require('webpack');
 
 module.exports = {
   context: __dirname,
-  devtool: 'cheap-eval-source-map',
+  devtool: 'eval-cheap-source-map',
   entry: './src/index.ts',
   mode: 'development',
   module: {
@@ -42,14 +43,21 @@ module.exports = {
       progress: false, // since we have hmr off, disable
       static: __dirname
     }),
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer']
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    })
   ],
   resolve: {
     alias: {
       '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
       '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
       '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
-      '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/build')
+      '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/build'),
+      'process/browser': require.resolve('process/browser')
     },
     extensions: ['.js', '.ts', '.tsx']
   },

packages/react-identicon/webpack.config.js

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 const path = require('path');
-
+const webpack = require('webpack');
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 
 module.exports = {
   context: __dirname,
-  devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
+  devtool: isProd ? 'source-map' : 'eval-cheap-source-map',
   entry: './src/Demo.tsx',
   mode: ENV,
   module: {
@@ -26,11 +26,19 @@ module.exports = {
     filename: './Demo.js',
     path: path.join(__dirname, 'build')
   },
-  plugins: [],
+  plugins: [
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer']
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    })
+  ],
   resolve: {
     alias: {
       '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
+      'process/browser': require.resolve('process/browser')
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx']
   }

packages/vue-identicon/webpack.config.js

@@ -3,13 +3,13 @@
 
 const path = require('path');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
-
+const webpack = require('webpack');
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 
 module.exports = {
   context: __dirname,
-  devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
+  devtool: isProd ? 'source-map' : 'eval-cheap-source-map',
   entry: './src/Demo.ts',
   mode: ENV,
   module: {
@@ -32,11 +32,18 @@ module.exports = {
     path: path.join(__dirname, 'build')
   },
   plugins: [
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer']
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    })
   ],
   resolve: {
     alias: {
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
+      'process/browser': require.resolve('process/browser')
     },
     extensions: ['.js', '.ts']
   }