Merge pull request #22697 from storybookjs/fix/nextjs-node-polyfills

Next.js: add compatibility with Next 13.4.3

code/frameworks/nextjs/package.json

@@ -83,6 +83,7 @@
     "fs-extra": "^11.1.0",
     "image-size": "^1.0.0",
     "loader-utils": "^3.2.0",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "pnp-webpack-plugin": "^1.7.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",

code/frameworks/nextjs/src/nodePolyfills/webpack.ts

@@ -0,0 +1,17 @@
+import type { Configuration } from 'webpack';
+import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
+
+export const configureNodePolyfills = (baseConfig: Configuration) => {
+  // This is added as a way to avoid issues caused by Next.js 13.4.3
+  // introduced by gzip-size
+  baseConfig.plugins = [...(baseConfig.plugins || []), new NodePolyfillPlugin()];
+
+  baseConfig.resolve = {
+    ...baseConfig.resolve,
+    fallback: {
+      fs: false,
+    },
+  };
+
+  return baseConfig;
+};

code/frameworks/nextjs/src/preset.ts

@@ -16,6 +16,7 @@ import { configureNextImport } from './nextImport/webpack';
 import TransformFontImports from './font/babel';
 import { configureNextFont } from './font/webpack/configureNextFont';
 import nextBabelPreset from './babel/preset';
+import { configureNodePolyfills } from './nodePolyfills/webpack';
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@@ -150,6 +151,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
   configureImages(baseConfig);
   configureRouting(baseConfig);
   configureStyledJsx(baseConfig);
+  configureNodePolyfills(baseConfig);
 
   return baseConfig;
 };