Export name issue with jest-mock while running Storybook #242

ElMenax · 2022-02-16T10:39:05Z

Hello there,

When I install Vite then storybook-builder-vite with npx sb@latest init --builder storybook-builder-vite, the compilation works fine but then Storybook fails to start throwing this error:

I have tried to add jest-mock to the optimizeDeps, install the dependency but nothing works.

When I run npx sb@next init --builder storybook-builder-vite, I have a similar error with acorn-jxs which has a missing export as well.
I suspect that the issue is related to ESM and how the dependencies exports their methods.
Any clue or help to solve this issue?

Thanks!

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

IanVS · 2022-02-16T12:42:55Z

Are you using @storybook/jest? I have had the same problem when trying to use that. If not, what is pulling in jest-mock? You should be able to npm why jest-mock to find out.

axelkry · 2022-02-16T13:16:24Z

I have the same issue :).. seems to be added by @storybook/addon-interactions

axelkry · 2022-02-16T13:21:21Z

not using @storybook/jest.. I just followed the instructions in the readme :)

IanVS · 2022-02-16T13:37:57Z

I've had problems with @storybook/addon-interactions as well. For now, I've just been using the play functions and importing directly from @testing-library modules instead of the instrumented storybook versions. I'm hopeful that we'll be able to use the interactions addon at some point, but for now I think it's not ready for use in vite projects.

kaminskypavel · 2022-02-18T10:04:47Z

same error from a fresh install.

not a solution, but as a workaround disable '@storybook/addon-interactions' in main.js

  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // '@storybook/addon-interactions'
  ],

IanVS · 2022-02-18T15:39:04Z

I think this is something that needs to be addressed in the interaction addon. Would y'all mind giving a 👍 or adding any missing information to storybookjs/storybook#17516?

One other possible workaround (I don't really recommend it, and haven't tested it), could be to set global = window, since I believe that's what is failing inside of jest-mock (it tries to mock global, which vite does not polyfill like webpack.

IanVS · 2022-02-18T23:40:38Z

I've opened storybookjs/storybook#17535 to address this issue, keep an eye on that if you'd like to know the current status.

IanVS · 2022-02-28T12:38:38Z

This should now be fixed in https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.43, if anyone would like to test it out.

pastelmind · 2022-03-01T05:15:32Z

I tried Storybook v6.5.0-alpha.44 and now get the following error:

Uncaught SyntaxError: The requested module '/node_modules/jest-mock/build/index.js?v=168864d3' does not provide an export named 'ModuleMocker'

My dependencies are:

    "@storybook/addon-actions": "^6.5.0-alpha.44",
    "@storybook/addon-essentials": "^6.5.0-alpha.44",
    "@storybook/addon-interactions": "^6.5.0-alpha.44",
    "@storybook/addon-links": "^6.5.0-alpha.44",
    "@storybook/react": "^6.5.0-alpha.44",
    "@storybook/testing-library": "^0.0.9",

IanVS · 2022-03-01T05:23:36Z

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

pastelmind · 2022-03-01T05:35:31Z

@IanVS Just tried, but the ModuleMocker error persists :(

I'm testing with a freshly scaffolded project, by the way. My Vite config is:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    include: ["jest-mock"],
  },
  plugins: [react()],
});

Edit: I set up a reproduction here: https://github.com/pastelmind/vite-storybook-test/tree/sb-alpha

yotam-frid · 2022-03-02T20:32:58Z

Experiencing this as well in a fresh project.

IanVS · 2022-03-02T20:55:03Z

I need to make a change in storybook, but in the meantime, you should be able to add a .storybook/preview-head.html with contents of:

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

In the reproduction in #242 (comment), I also needed to update vite to 2.8.6, run npx sb@next upgrade --prerelease, and then rm -rf node_modules/.vite-storybook to clear the cache. After that, I'm able to load stories in that reproduction.

IanVS · 2022-03-02T21:12:27Z

I've opened storybookjs/storybook#17614 to address the need to set global in my workaround above.

shirakaba · 2022-03-03T12:57:59Z

Just to add that I experience the above-mentioned issue on a fresh project, which I believe differs from pastelmind's reproduction only by being 6.5.0-alpha.45 rather than 6.5.0-alpha.44:

Uncaught SyntaxError: The requested module '/node_modules/jest-mock/build/index.js?v=168864d3' does not provide an export named 'ModuleMocker'

npm create vite@latest epg-service --template react-ts
npx sb@next init --builder storybook-builder-vite

I was unable to fix things by following IanVS's steps of:

Add the mentioned .storybook/preview-head.html:

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

Add the following to my vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
+  optimizeDeps: {
+    include: ["jest-mock"],
+  },
  plugins: [react()]
})

npm install --save-dev [email protected]
npx sb@next upgrade --prerelease
rm -rf node_modules/.vite-storybook
npm run storybook

Here's my final package.json after following all those steps:

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@storybook/addon-actions": "^6.5.0-alpha.45",
    "@storybook/addon-essentials": "^6.5.0-alpha.45",
    "@storybook/addon-interactions": "^6.5.0-alpha.45",
    "@storybook/addon-links": "^6.5.0-alpha.45",
    "@storybook/react": "^6.5.0-alpha.45",
    "@storybook/testing-library": "0.0.9",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@vitejs/plugin-react": "^1.0.7",
    "babel-loader": "^8.2.3",
    "storybook-builder-vite": "^0.1.17",
    "typescript": "^4.5.4",
    "vite": "^2.8.6"
  }
}

The only thing that I've found to improve the situation is kaminskypavel's suggestion to remove addon-interactions altogether (and I'm not sure what the consequences of that are):

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "storybook-builder-vite"
  }
}

Thanks IanVS for your efforts on this so far, nonetheless!

IanVS · 2022-03-03T14:42:17Z

@shirakaba Do you happen to have a reproduction that I could take a look at?

shirakaba · 2022-03-03T18:30:32Z

@IanVS I've made one now: https://github.com/shirakaba/storybook-jest-mock-issue-repro

On the branch main, the latest commit shows the results of:

npm create vite@latest storybook-jest-mock-issue-repro --template react-ts
cd storybook-jest-mock-issue-repro
npx sb@next init --builder storybook-builder-vite
# Redundant, because although the package.json specified ^2.8.0,
# the template installed version 2.8.6 anyway:
npm install --save-dev [email protected]

On the branch workaround, the latest commit shows the results of additionally performing the further steps 1-6 (with step 3 being redundant again) that I specified in the comment above, #242 (comment).

In both cases, they meet the same error:

Uncaught SyntaxError: The requested module '/node_modules/jest-mock/build/index.js?v=168864d3' does not provide an export named 'ModuleMocker'

IanVS · 2022-03-03T19:07:50Z

Thanks @shirakaba that was helpful. There's one more piece you need in your workaround branch (until I can make a PR to fix it in this repo and release a new version).

// .storybook/main.js

module.exports = {
  //...existing config
  viteFinal: async (config) => {
    config.optimizeDeps.include = [...(config.optimizeDeps?.include ?? []), 'jest-mock'];
    return config;
  },
};

IanVS · 2022-03-07T13:32:25Z

You should now be able to remove the explicit jest-mock if using 0.1.18.

kaminskypavel · 2022-03-20T18:32:20Z

just tested with the following deps

         ...

        "@storybook/addon-actions": "^6.4.19",
        "@storybook/addon-essentials": "^6.4.19",
        "@storybook/addon-interactions": "^6.4.19",
        "@storybook/addon-links": "^6.4.19",
        "@storybook/jest": "^0.0.10",
        "@storybook/react": "^6.4.19",
        "@storybook/testing-library": "^0.0.9",
        "storybook-builder-vite": "^0.1.21",
        "vite": "^2.9.0-beta.4"
         ...

im still getting

Uncaught ReferenceError: global is not defined
    at ../../node_modules/jest-mock/build/index.js (:6006/node_modules/.vite-storybook/deps/jest-mock.js?v=45d2dd06:597:37)
    at __require2 (:6006/node_modules/.vite-storybook/deps/chunk-3XETP6YP.js?v=45d2dd06:47:50)
    at :6006/node_modules/.vite-storybook/deps/jest-mock.js?v=45d2dd06:609:25

the error is still caused by @storybook/addon-interactions 🤷‍♂️

IanVS · 2022-03-21T13:01:38Z

This error is due to storybookjs/storybook#15391. Until we find a better way to solve it, you can create a .storybook/preview-head.html with contents of:

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

IanVS mentioned this issue Feb 17, 2022

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

Closed

IanVS mentioned this issue Mar 3, 2022

Add jest-mock to optimized deps #269

Merged

IanVS closed this as completed in #269 Mar 4, 2022

lgarest mentioned this issue Mar 5, 2022

Infinite Loading when using Storybook with Vite #270

Closed

yen-tt mentioned this issue Apr 7, 2022

use mocked AnswersCore and actual ReduxStateManager in Headless instance yext/search-ui-react#103

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Export name issue with jest-mock while running Storybook #242

Export name issue with jest-mock while running Storybook #242

ElMenax commented Feb 16, 2022

IanVS commented Feb 16, 2022

axelkry commented Feb 16, 2022

axelkry commented Feb 16, 2022

IanVS commented Feb 16, 2022

kaminskypavel commented Feb 18, 2022 •

edited

Loading

IanVS commented Feb 18, 2022

IanVS commented Feb 18, 2022

IanVS commented Feb 28, 2022

pastelmind commented Mar 1, 2022

IanVS commented Mar 1, 2022

pastelmind commented Mar 1, 2022 •

edited

Loading

yotam-frid commented Mar 2, 2022

IanVS commented Mar 2, 2022

IanVS commented Mar 2, 2022

shirakaba commented Mar 3, 2022 •

edited

Loading

IanVS commented Mar 3, 2022

shirakaba commented Mar 3, 2022 •

edited

Loading

IanVS commented Mar 3, 2022

IanVS commented Mar 7, 2022

kaminskypavel commented Mar 20, 2022

IanVS commented Mar 21, 2022

Export name issue with jest-mock while running Storybook #242

Export name issue with jest-mock while running Storybook #242

Comments

ElMenax commented Feb 16, 2022

IanVS commented Feb 16, 2022

axelkry commented Feb 16, 2022

axelkry commented Feb 16, 2022

IanVS commented Feb 16, 2022

kaminskypavel commented Feb 18, 2022 • edited Loading

IanVS commented Feb 18, 2022

IanVS commented Feb 18, 2022

IanVS commented Feb 28, 2022

pastelmind commented Mar 1, 2022

IanVS commented Mar 1, 2022

pastelmind commented Mar 1, 2022 • edited Loading

yotam-frid commented Mar 2, 2022

IanVS commented Mar 2, 2022

IanVS commented Mar 2, 2022

shirakaba commented Mar 3, 2022 • edited Loading

IanVS commented Mar 3, 2022

shirakaba commented Mar 3, 2022 • edited Loading

IanVS commented Mar 3, 2022

IanVS commented Mar 7, 2022

kaminskypavel commented Mar 20, 2022

IanVS commented Mar 21, 2022

kaminskypavel commented Feb 18, 2022 •

edited

Loading

pastelmind commented Mar 1, 2022 •

edited

Loading

shirakaba commented Mar 3, 2022 •

edited

Loading

shirakaba commented Mar 3, 2022 •

edited

Loading