[Bug]: Jest runtime cannot use import statement outside a module in @storybook/nextjs v7.5

[minami-minami]

Describe the bug

Jest fails in projects using Next.js after upgrading @storybook/nextjs v7.5.

app/node_modules/@storybook/nextjs/dist/image-context.mjs:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import './chunk-FFRTCGB4.mjs';
                                                                                  
SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
  at Object.<anonymous> (node_modules/@storybook/nextjs/dist/preview.js:1:1395)

It seems to be attributed to #24146.

Specifically, the following parts

code/frameworks/nextjs/package.json

     "./dist/image-context": {
       "types": "./dist/image-context.d.ts",
 -     "require": "./dist/image-context.js",
 +     "require": "./dist/image-context.mjs",
       "import": "./dist/image-context.mjs"
     },

To Reproduce

Run jest in Next.js project that using @storybook/next.

https://github.com/minami-minami/storybook-next-jest

System

Storybook Environment Info:

  System:
    OS: macOS 13.5.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.volta/tools/image/node/18.17.1/bin/node
    npm: 9.6.7 - ~/.volta/tools/image/node/18.17.1/bin/npm <----- active
    pnpm: 8.7.1 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 118.0.5993.88
    Safari: 16.6
  npmPackages:
    @storybook/addon-a11y: 7.5.1 => 7.5.1 
    @storybook/addon-coverage: 0.0.9 => 0.0.9 
    @storybook/addon-essentials: 7.5.1 => 7.5.1 
    @storybook/addon-interactions: 7.5.1 => 7.5.1 
    @storybook/addon-links: 7.5.1 => 7.5.1 
    @storybook/addon-styling-webpack: 0.0.5 => 0.0.5 
    @storybook/addon-themes: 7.5.1 => 7.5.1 
    @storybook/addons: 7.5.1 => 7.5.1 
    @storybook/jest: 0.2.3 => 0.2.3 
    @storybook/nextjs: 7.5.1 => 7.5.1 
    @storybook/react: 7.5.1 => 7.5.1 
    @storybook/testing-library: 0.2.2 => 0.2.2 
    msw-storybook-addon: 1.9.0 => 1.9.0 
    storybook: 7.5.1 => 7.5.1 
    storybook-addon-launchdarkly: 2.0.0 => 2.0.0 
    storybook-addon-pseudo-states: 2.1.2 => 2.1.2 
    storybook-addon-swc: 1.2.0 => 1.2.0

Additional context

Workaround:

// jest.config.js
moduleNameMapper: {
  '@storybook/nextjs/dist/image-context': '<rootDir>/node_modules/@storybook/nextjs/dist/image-context',
},

I hope you will consider reverting the change as the impact on jest users is significant!

[valentinpalkovic]

@martinnabhan It seems that #24146 introduced the issue. We need another solution for the original issue.

cc @ndelangen Maybe you have also some idea to resolve the singleton issue differently.

[martinnabhan]

I would really appreciate a reproduction as I'm not sure why Jest would be importing modules from @storybook/nextjs? (I run Jest with the latest version of both Next.js and @storybook/nextjs in many projects without issues)

If I manage to reproduce the issue I might be able to take a look!

[minami-minami]

A repository to reproduction is available here.
Please check it out.

https://github.com/minami-minami/storybook-next-jest

[valentinpalkovic]

Hi @martinnabhan,

Have you managed to take a look?

[martinnabhan]

Sorry for the late reply!

Looking at the reproduction, the error happens because you're trying to import @storybook/nextjs/preview (an ESM module) in jest.setup.js, which isn't supported by default.

As far as I know there are three ways to support importing ESM modules in Jest's setup files:

1. Enable ESM module support in Jest
2. Use babel-jest
3. Use ts-jest

I believe Storybook is looking to slowly move towards ESM modules, so I don't think reversing #24146 is the right thing to do, since this error will happen with any ESM-only module.

[valentinpalkovic]

@martinnabhan I guess we can revert #24146 since the root cause of loading CommonJS and ESM in parallel is resolved by this change: https://github.com/storybookjs/storybook/pull/24841/files#diff-262a077136aafb9802aeaedb913c7d8ff477a72c6ce005e29e146f64e518b5cbL72-R72

We should try this out!