Interactions-addon relies on polyfilled global (via jest-mock)

[wayne-o]

Describe the bug

createed a vite / react app - added storybook:

npx sb@next init --builder storybook-builder-vite

Got an error saying I needed to add:

yarn add -D @mdx-js/preact

Finally ran:

yarn storybook

Got:

{
   "message":"Uncaught SyntaxError: The requested module '/node_modules/@storybook/addon-interactions/node_modules/jest-mock/build/index.js?v=bd021136' does not provide an export named 'fn'",
   "source":"http://localhost:6006/node_modules/@storybook/addon-interactions/dist/esm/preset/argsEnhancers.js",
   "line":28,
   "column":10,
   "error":{
      "message":"The requested module '/node_modules/@storybook/addon-interactions/node_modules/jest-mock/build/index.js?v=bd021136' does not provide an export named 'fn'",
      "name":"SyntaxError",
      "stack":"SyntaxError: The requested module '/node_modules/@storybook/addon-interactions/node_modules/jest-mock/build/index.js?v=bd021136' does not provide an export named 'fn'"
   },
   "origin":"preview"
}

[IanVS]

Hi, we have a report of this in the storybook-builder as well (storybookjs/builder-vite#242), although I think in the end, this is a problem either with jest, or with the way that addon-interactions is using jest-mock.

When I've needed to use jest-mock in my own project (which does not use addon-interactions), I can make it work by using:

import { ModuleMocker } from 'jest-mock';
const jest = new ModuleMocker(window);

I think the issue is that the addon-interactions imports fn directly from jest-mock:

storybook/addons/interactions/src/preset/argsEnhancers.ts

Line 5 in f979a5c

import { fn } from 'jest-mock';

Which breaks in non-node or at least non-node-pollyfilled environments, because it uses global instead of window: https://github.com/facebook/jest/blob/465518a2fa17ce45f7e3280dd0f54351273432c4/packages/jest-mock/src/index.ts#L1200-L1202

CC @yannbf, would you consider a PR to change the way interactions-addon is importing jest-mock? I've seen this come up about half a dozen times in the last few days, now.

[shilman]

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.43 containing PR #17535 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[bstro]

I am running alpha.45:

and still experiencing this error:

Uncaught SyntaxError: The requested module '/@fs/Users/…/project/node_modules/jest-mock/build/index.js?v=898ee8c4' does not provide an export named 'ModuleMocker'

@shilman after digging around, it looks like maybe a tag could be cut for 761501b?

[IanVS]

Alphas are cut pretty regularly. If you'd like to work around it for now, you can add a .storybook/preview-head.html as so:

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

[bstro]

@IanVS the error persists with that workaround for me—I will comment out "addon-interactions" in main.js and continue until the new alpha is cut. Thanks!

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.46 containing PR #17614 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

[bstro]

Hmm. Shoot. I'm still experiencing this error with v6.5.0-alpha.46. cleared out all my node_modules just in case, to no avail.

Uncaught SyntaxError: The requested module '/@fs/Users/bstro/project/node_modules/jest-mock/build/index.js?v=4151d6d7' does not provide an export named 'ModuleMocker'

[IanVS]

@bstro are you able to provide a reproduction? I've seen this error reported, but I'm not sure why yet.

[IanVS]

Can you also try adding jest-mock to your optimizeDeps.include?

[bstro]

Adding jest-mock to optimizeDeps.include at least changed the error I'm seeing:

This is how I configured it in main.js... not sure if I did it right:

module.exports = {
  async viteFinal(config) {
    config.optimizeDeps.include = [...config.optimizeDeps.include, "jest-mock"];
    return config;
  },
  …

Will try to reproduce.

[IanVS]

Try the latest alpha of storybook, there was a recent fix that should take care of that.

[bstro]

I am on the latest alpha (46), as well as the latest storybook-builder-vite (0.1.18) and the error is still present

[IanVS]

@bstro odd. Have you removed the cache in your node_modules as well (node_modules/.storybook-vite by default)? Are you able to send a reproduction?

[bstro]

I haven't been able to work on a reproduction yet, but I can try later this week. I did completely clear out my node_modules for what it's worth.

[bstro]

Here's a reproduction at https://github.com/bstro/storybook-jest-mock-bug-repro
You should see the following error upon running Storybook:

This is on a 100% fresh install of storybook in a brand new vite project, relatively simple to reproduce if you want to try these steps:

1. yarn create vite — I chose a react project with typescript
2. yarn
3. npx sb@next init --builder storybook-builder-vite
4. yarn run storybook

Node version 14.18.3, btw.

[IanVS]

OK, thanks for the reproduction. I've figured out what's going on. Even with the fixes I've attempted, jest-mock still internally tries to run ModuleMocker(global) which fails when global is not defined. In jest version 28.0.0-alpha.4, they've made a fix to use globalThis instead, which does run in the browser, but that version is not compatible with the node versions that storybook supports. I've asked if they can release a version of 27 with that change. In the meantime, you can create a preview-head.html with the contents of:

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

It's not ideal, and we need to find a fix for new users of storybook + vite, but I think this will at least get you up and running for now.

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.53 containing PR #17830 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.20 containing PR #17830 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[izznatsir]

It still happens with v7.0.0-beta.61.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-rc.11 containing PR #21832 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease