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

wayne-o · 2022-02-16T10:00:07Z

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"
}

The text was updated successfully, but these errors were encountered:

IanVS · 2022-02-17T04:17:10Z

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 · 2022-02-28T10:03:21Z

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 · 2022-03-04T20:26:06Z

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 · 2022-03-04T22:28:47Z

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 · 2022-03-04T23:18:22Z

@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 · 2022-03-05T16:14:59Z

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 · 2022-03-05T20:21:48Z

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 · 2022-03-06T01:38:07Z

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

IanVS · 2022-03-06T01:39:05Z

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

bstro · 2022-03-06T01:45:41Z

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 · 2022-03-07T02:20:19Z

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

bstro · 2022-03-07T18:09:06Z

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 · 2022-03-07T18:15:18Z

@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 · 2022-03-07T18:26:24Z

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 · 2022-03-10T06:37:53Z

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:

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

Node version 14.18.3, btw.

IanVS · 2022-03-10T14:56:16Z

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 · 2022-04-01T03:33:48Z

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 · 2022-04-01T06:55:47Z

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 · 2023-03-04T09:43:16Z

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

shilman · 2023-03-31T10:14:37Z

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

wayne-o added bug needs triage labels Feb 16, 2022

IanVS mentioned this issue Feb 18, 2022

Export name issue with jest-mock while running Storybook storybookjs/builder-vite#242

Closed

IanVS changed the title ~~Error after installing into vite/react app~~ Interactions-addon relies on polyfilled global (via jest-mock) Feb 18, 2022

This was referenced Feb 18, 2022

Storybook still using Webpack, despite adding correct builder option storybookjs/builder-vite#248

Closed

Addon-interactions: Mock window in browser environments #17535

Merged

Clean install is weirdly borked storybookjs/builder-vite#232

Closed

shilman closed this as completed Feb 28, 2022

IanVS mentioned this issue Mar 2, 2022

Addon-interactions: Use 'global' package instead of global #17614

Merged

3 tasks

IanVS mentioned this issue Mar 10, 2022

[Addon-interactions] Do not rely on global #17680

Closed

3 tasks

IanVS reopened this Mar 25, 2022

shilman added builder-vite linear and removed needs triage labels Mar 29, 2022

This was referenced Mar 30, 2022

Rename to @storybook/builder-vite storybookjs/builder-vite#293

Merged

CLI: Fix vite/jest issue with mocked global #17830

Merged

shilman closed this as completed Apr 1, 2022

ghost mentioned this issue Jun 3, 2022

Documentation of precautions when using Vite #18399

Closed

neretin-trike mentioned this issue Mar 6, 2023

plasma-b2c,ui,temple: Удалить window.global из файла preview-head.html ( PLASMA-1959 ) salute-developers/plasma#389

Open

yannbf mentioned this issue Mar 30, 2023

Vite: Polyfill global by default #21832

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

wayne-o commented Feb 16, 2022 •

edited

Loading

IanVS commented Feb 17, 2022

shilman commented Feb 28, 2022

bstro commented Mar 4, 2022 •

edited

Loading

IanVS commented Mar 4, 2022

bstro commented Mar 4, 2022

shilman commented Mar 5, 2022

bstro commented Mar 5, 2022 •

edited

Loading

IanVS commented Mar 6, 2022

IanVS commented Mar 6, 2022

bstro commented Mar 6, 2022 •

edited

Loading

IanVS commented Mar 7, 2022

bstro commented Mar 7, 2022

IanVS commented Mar 7, 2022

bstro commented Mar 7, 2022

bstro commented Mar 10, 2022 •

edited

Loading

IanVS commented Mar 10, 2022

shilman commented Apr 1, 2022

shilman commented Apr 1, 2022

izznatsir commented Mar 4, 2023 •

edited

Loading

shilman commented Mar 31, 2023

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

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

Comments

wayne-o commented Feb 16, 2022 • edited Loading

IanVS commented Feb 17, 2022

shilman commented Feb 28, 2022

bstro commented Mar 4, 2022 • edited Loading

IanVS commented Mar 4, 2022

bstro commented Mar 4, 2022

shilman commented Mar 5, 2022

bstro commented Mar 5, 2022 • edited Loading

IanVS commented Mar 6, 2022

IanVS commented Mar 6, 2022

bstro commented Mar 6, 2022 • edited Loading

IanVS commented Mar 7, 2022

bstro commented Mar 7, 2022

IanVS commented Mar 7, 2022

bstro commented Mar 7, 2022

bstro commented Mar 10, 2022 • edited Loading

IanVS commented Mar 10, 2022

shilman commented Apr 1, 2022

shilman commented Apr 1, 2022

izznatsir commented Mar 4, 2023 • edited Loading

shilman commented Mar 31, 2023

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

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

wayne-o commented Feb 16, 2022 •

edited

Loading

bstro commented Mar 4, 2022 •

edited

Loading

bstro commented Mar 5, 2022 •

edited

Loading

bstro commented Mar 6, 2022 •

edited

Loading

bstro commented Mar 10, 2022 •

edited

Loading

izznatsir commented Mar 4, 2023 •

edited

Loading