Update Storybook to use Webpack 5

Author: julianguyen

client/.storybook/main.js

@@ -2,6 +2,9 @@ const path = require('path');
 const custom = require('../webpack.config');
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: [
     '../app/stories/Index.stories.jsx',
     '../app/stories/**/*.stories.@(jsx|mdx)',

client/package.json

@@ -66,10 +66,12 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-flow": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
-    "@storybook/addon-essentials": "^6.4.21",
-    "@storybook/addon-links": "^6.4.21",
-    "@storybook/addons": "^6.4.21",
-    "@storybook/react": "^6.4.21",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "@testing-library/jest-dom": "^5.10.0",
     "@testing-library/react": "^11.0.4",
     "@testing-library/user-event": "^12.1.7",

client/webpack.config.js

@@ -9,7 +9,7 @@ const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
-const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');