Vite + Storybook 6.3 + Jest: "global is not defined"

Describe the bug I am trying to get Vite + Storybook 6.3 working with some existing stories. These stories use jest.fn() as mocks. I previously added this in preview.js to get jest.fn() working within storybook:

import jest from "jest-mock";
window.jest = jest;

But when using the Vite integration I am now getting an error when running storybook:

Uncaught ReferenceError: global is not defined
    at ../node_modules/jest-mock/build/index.js (index.js:948)
    at __require2 (chunk-IHTDASF6.js?v=3b66b68d:17)
    at dep:jest-mock:1

To Reproduce I am trying vite with storybook 6.3 and npm 7.19 workspaces. My repro repo is here: https://github.com/adiun/vite-monorepo:

1. Ensure you have npm 7.19 installed for the workspaces functionality
2. In the root, run npm i
3. In the app folder, run npm run storybook.
4. In the browser console for storybook you will see:

Uncaught ReferenceError: global is not defined
    at ../node_modules/jest-mock/build/index.js (index.js:948)
    at __require2 (chunk-IHTDASF6.js?v=3b66b68d:17)
    at dep:jest-mock:1

System

Environment Info:

  System:
    OS: macOS 11.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    npm: 7.19.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: 91.0.864.48
    Firefox: 88.0.1
    Safari: 14.1
  npmPackages:
    @storybook/addon-docs: 6.3.0 => 6.3.0 

[adiun]

Following up on this… it’s actually a bad idea to redefine global like this in main.js:

define: {
  ...config.define,
  global: "window",
},

The Vite docs even mention this.

The problem is that when running a build-storybook, any references to global in libraries like @storybook/client-logger will be rewritten to window and it will break since it’s running in node.

So I removed this code in main.js to get build-storybook working and added this hack to .storybook/preview-head.html to get start-storybook working:

<script>
  window.global = window;
</script>

main.js:

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  core: {
    builder: "storybook-builder-vite",
  },
  async viteFinal(config) {
    return {
      ...config,
      esbuild: {
        ...config.esbuild,
        jsxInject: `import React from 'react'`,
      },
      rollupOptions: {
        ...config.rollupOptions,
        // Externalize deps that shouldn't be bundled
        external: ["react", "react-dom"],
        output: {
          // Global vars to use in UMD build for externalized deps
          globals: {
            react: "React",
            "react-dom": "ReactDOM",
          },
        },
      },
    };
  },
};

preview.js:

import * as jest from "jest-mock";
window.jest = jest;

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

preview-head.html:

<script>
  window.global = window;
</script>

[adiun]

Alright, I finally fixed this… jest-mock doesn’t explicitly provide a default export so in storybook’s preview.js this is what I have:

import * as jest from "jest-mock";
window.jest = jest;

This combined with assigning global to window in main.js fixed this issue.

preview.js

import * as jest from "jest-mock";
window.jest = jest;

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  core: {
    builder: "storybook-builder-vite",
  },
  async viteFinal(config) {
    return {
      ...config,
      define: {
        ...config.define,
        global: "window",
      },
      esbuild: {
        ...config.esbuild,
        jsxInject: `import React from 'react'`,
      },
    };
  },
};

Updated my repo too