storybook: [@storybook/builder-vite] `process is not defined` error in production bundle.

had the same issue with storybook + next/link, fix was:

// .storybook/main.js
module.exports {
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      define: { 'process.env': {} },
    });
  },
  // ...rest of config
}

I kinda fixed it with:

      define: {
        "process.env": {},
      },

in my viteFinal config. I’m mixing Vite due to my design-system is being built with esbuild. Therefore I used vite to display the stories from the design system. However, I also have some specific storybook components in the Nextjs application that didn’t work. So it was originally a problem due to Nextjs using webpack.

I did this and it worked - for now. What seems to be causing the error is the fact the we are using webpack 5 under the hood (?), and webpack 5 doesnt provide polyfills by default anymore. Since process doesn’t exist in the browser, it needs to be polyfilled.

This is a very dirty workaround (.storybook/main.js):

module.exports = {
    async viteFinal(config, { configType }) {
        return mergeConfig(config, {
            define: {
                ...
                'process.env.NODE_DEBUG': false,
            },
            ...
        });
    },
    ...
};

@jaredh159 that will probably work, but keep in mind that Next.js is built on top of Webpack, so we don’t recommend using the Vite builder for your Storybook, since you can run into inconsistencies like this.

I also encountered this error. For me, it was caused by https://github.com/browserify/node-util/blob/ef984721db7150f651800e051de4314c9517d42c/util.js#L109-L116 with util being pulled-in by

@storybook/builder-manager@npm:7.0.0-beta.31
│  └─ util@npm:0.12.5 (via npm:^0.12.4)
│
├─ @storybook/codemod@npm:7.0.0-beta.31
│  └─ util@npm:0.12.5 (via npm:^0.12.4)

There is already an upstream PR fixing this, https://github.com/browserify/node-util/pull/62, but it seemed stalled.

Vite does not polyfill process for the browser like webpack does. You’ll want to use import.meta.env instead, for code that runs in the browser. See https://vitejs.dev/guide/env-and-mode.html#env-variables.

If you want to add esbuild plugins, I believe you can use the esbuild option (https://vitejs.dev/config/shared-options.html#esbuild), though I haven’t done that before myself. You can set this in viteFinal in your .storybook/main.js as seen here: https://github.com/storybookjs/builder-vite#customize-vite-config

There’s a thread in https://github.com/browserify/node-util/issues/43 that discusses solutions to this problem in more detail. I was able to find a more general solution in another thread, in this comment.