move sb to webpack 5

starters/next/.storybook/babel.config.js

@@ -1,3 +1,7 @@
 // @see https://github.com/storybookjs/storybook/issues/12952
 // Needed to get back React classic runtime
-require("../babel.config");
+const config = require("../babel.config");
+module.exports = {
+  ...config,
+  presets: ["@babel/preset-env", "@babel/preset-typescript"],
+};

starters/next/.storybook/main.js

@@ -11,6 +11,9 @@ if (process.env.ANALYZE === "true") {
   plugins.push(new BundleAnalyzerPlugin());
 }
 module.exports = {
+  core: {
+    builder: "webpack5",
+  },
   stories: [
     "../.vn/stories/**/*.stories.@(js|ts|jsx|tsx|mdx)",
     "../src/**/*.stories.@(js|ts|jsx|tsx|mdx)",
@@ -64,10 +67,15 @@ module.exports = {
 
     // Allow to use next-i18next isomorphic code
     // @see https://github.com/isaachinman/next-i18next/issues/1012
-    withVulcan.node = { ...(withVulcan.node || {}), fs: "empty" };
-
+    // Webpack4
+    //withVulcan.node = { ...(withVulcan.node || {}), fs: "empty" };
     //  Storybook seems unhappy with fallback, probably a version thing
-    delete withVulcan.resolve.fallback;
+    // delete withVulcan.resolve.fallback;
+    // Webpack 5 @see https://stackoverflow.com/questions/64361940/webpack-error-configuration-node-has-an-unknown-property-fs
+    withVulcan.resolve.fallback = {
+      ...(withVulcan.resolve.fallback || {}),
+      fs: false,
+    };
 
     return withVulcan;
   },

starters/next/package.json

@@ -132,7 +132,9 @@
   "devDependencies": {
     "@babel/core": "^7.10.2",
     "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-    "@storybook/testing-react": "^0.0.22",
+    "@storybook/builder-webpack5": "next",
+    "@storybook/manager-webpack5": "next",
+    "@storybook/testing-react": "^1.2.4",
     "@types/node": "^13.7.6",
     "@types/nodemailer": "^6.4.4",
     "@types/react": "^17",
@@ -152,23 +154,24 @@
     "ts-loader": "^7.0.5",
     "ts-node": "^8.10.2",
     "typescript": "=4.3.5",
+    "webpack": "5",
     "yalc": "^1.0.0-pre.53"
   },
   "optionalDependencies": {
     "@cypress/code-coverage": "^3.8.1",
     "@cypress/webpack-preprocessor": "^5.4.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@next/bundle-analyzer": "^9.4.4",
-    "@next/plugin-storybook": "^11.1.0",
-    "@storybook/addon-a11y": "^6.3.7",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-backgrounds": "^6.3.7",
-    "@storybook/addon-controls": "^6.3.7",
-    "@storybook/addon-docs": "^6.3.7",
-    "@storybook/addon-essentials": "^6.3.7",
-    "@storybook/addon-links": "^6.3.7",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/react": "^6.3.7",
+    "@next/plugin-storybook": "^12.1.6",
+    "@storybook/addon-a11y": "^6.5.0-beta.2",
+    "@storybook/addon-actions": "^6.5.0-beta.2",
+    "@storybook/addon-backgrounds": "^6.5.0-beta.2",
+    "@storybook/addon-controls": "^6.5.0-beta.2",
+    "@storybook/addon-docs": "^6.5.0-beta.2",
+    "@storybook/addon-essentials": "^6.5.0-beta.2",
+    "@storybook/addon-links": "^6.5.0-beta.2",
+    "@storybook/addons": "^6.5.0-beta.2",
+    "@storybook/react": "^6.5.0-beta.2",
     "@testing-library/cypress": "^6.0.0",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.0",
@@ -187,7 +190,7 @@
     "shelljs": "^0.8.4",
     "smtp-tester": "^1.2.0",
     "start-server-and-test": "^1.11.0",
-    "storybook-addon-next-router": "^3.0.7",
+    "storybook-addon-next-router": "^3.1.1",
     "tsup": "^5.12.4"
   },
   "resolutions": {