[Bug]: Seeing warning about CJS even though my project is ESM

[kaiyoma]

Describe the bug

We have a large ESM project that has been using Storybook for a while. I'm currently upgrading from Storybook 7 to 8 and I'm seeing this warning:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

I'm not sure why it's appearing, because we're fully ESM. Running our Vite dev server does not show this warning; it's happening with Storybook only.

If I try to trace the warning via Vite's suggestion, I get this:

Trace: The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
    at warnCjsUsage (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\vite\index.cjs:33:3)
    at Object.<anonymous> (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\vite\index.cjs:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected][email protected]\node_modules\esbuild-register\dist\node.js:2262:9)
    at extensions..js (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\[email protected][email protected]\node_modules\esbuild-register\dist\node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)

Reproduction link

N/A

Reproduction steps

1. Upgrade to Storybook 8
2. Run Storybook

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 20.11.1 - C:\Program Files\Node.js\node.EXE
    npm: 10.5.0 - C:\Program Files\Node.js\npm.CMD
    pnpm: 9.1.2 - C:\Program Files\Node.js\pnpm.CMD <----- active
  Browsers:
    Edge: Chromium (126.0.2592.102)
  npmPackages:
    @storybook/addon-actions: 8.2.5 => 8.2.5
    @storybook/addon-controls: 8.2.5 => 8.2.5
    @storybook/addon-docs: 8.2.5 => 8.2.5
    @storybook/addon-links: 8.2.5 => 8.2.5
    @storybook/manager-api: 8.2.5 => 8.2.5
    @storybook/react: 8.2.5 => 8.2.5
    @storybook/react-vite: 8.2.5 => 8.2.5
    storybook: 8.2.5 => 8.2.5

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To resolve the CJS warning in your ESM project, ensure that Storybook is using the ESM build of Vite. Check the @storybook/react-vite package configuration. Specifically, verify the viteFinal function in your .storybook/main.js or main.ts file to ensure it imports Vite as ESM. Example:

// .storybook/main.js
module.exports = {
  async viteFinal(config) {
    return {
      ...config,
      // Ensure Vite is imported as ESM
      optimizeDeps: {
        ...config.optimizeDeps,
        esbuildOptions: {
          ...config.optimizeDeps.esbuildOptions,
          format: 'esm',
        },
      },
    };
  },
};

If the issue persists, check the @storybook/react-vite package version and update if necessary.

References

/code/lib/cli/src/automigrate/fixes/addon-postcss.ts
/code/lib/cli/src/automigrate/fixes/cra5.ts
/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts
/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
/code/core/src/server-errors.ts
/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts
/code/lib/cli/src/autoblock/block-storystorev6.ts
/code/frameworks/angular/src/builders/build-storybook/schema.json
/code/lib/cli/src/automigrate/fixes/mdx-to-csf.ts
/code/lib/cli/src/automigrate/fixes/addons-api.ts
/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts
/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts
/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts
/code/lib/cli/src/automigrate/fixes/angular-builders.ts
/.github/DISCUSSION_TEMPLATE/help.yml
/code/lib/cli/src/automigrate/fixes/webpack5.ts
/code/lib/cli/src/automigrate/fixes/vue3.ts
/code/lib/core-webpack/package.json
/docs/addons/addon-migration-guide.mdx
/code/addons/measure/package.json
/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.test.ts
/code/renderers/svelte/package.json
/code/lib/cli/src/automigrate/fixes/wrap-require.ts
/docs/versions/next.json
/code/deprecated/components/package.json

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[kaiyoma]

Sorry, that doesn't help. If I add that snippet to my config, I get the same warnings. I'm also using the latest version of @storybook/react-vite already.

[shilman]

Closing this as dupe to #26291