@storybook/react - The requested module does not provide an export named 'default'

I just finished migration my app, unit and integration tests from using webpack@5 to vitejs.

I’m now trying to finish the last part which is migrating my storybook to vitejs. But I’m running into a strange error.

Uncaught SyntaxError: The requested module '/node_modules/@storybook/react/node_modules/acorn-jsx/index.js?v=c651f544' does not provide an export named 'default'

Here is my .storybook/main.js config:

const path = require('path')

module.exports = {
  framework: '@storybook/react',
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
  ],
  core: {
    builder: 'storybook-builder-vite',
  },
  features: {
    storyStoreV7: false,
  },
  async viteFinal(config) {
    config.resolve.alias = [
      {
        find: /^src/,
        replacement: path.resolve(__dirname, '../src/'),
      },
    ]

    config.css = {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    }
    return config
  },
}

Here is my terminal output:

$ STORYBOOK=true start-storybook -p 6006 -s public
info @storybook/react v6.5.0-alpha.49
info
(node:53986) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ./public at /

info => Using cached manager
Pre-bundling dependencies:
  @craftjs/core
  react-router-dom
  @emotion/styled
  antd
  @fortawesome/react-fontawesome
  (...and 130 more)
(this will be run only when your dependencies or config have changed)
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.5.0-alpha.49 for React started       │
│   11 s for preview                                 │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.4.100:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯
3:50:14 PM [vite] new dependencies found: @storybook/addon-viewport, storybook-addon-themes/react, storybook-addon-i18next, msw-storybook-addon, updating...
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/prop-types.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/@base2_pretty-print-object.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/react-is.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-MNR7D4DE.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-7E5ZXZZE.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-IRN5JP6W.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-WXHWBOBU.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-IF4QNSMF.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-C46C2WJX.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-37NZQV3L.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-NJHBAFXJ.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-POVYV7PC.js?v=0189e7e9.
3:50:14 PM [vite] Failed to load source map for /node_modules/.vite-storybook/chunk-OI6LQJXB.js?v=0189e7e9.
Sourcemap for "/Users/marklyck/colony/colony-frontend/node_modules/@base2/pretty-print-object/dist/index.js" points to missing source files
3:50:25 PM [vite] Failed to load source map for /node_modules/export-to-csv/build/index.js.

It does open a new browser tab on localhost:6006, and the storybook “UI” shows up, with a loading spinner and skeleton where the components should be.

If I open my browser console I see the following error:

Uncaught SyntaxError: The requested module '/node_modules/@storybook/react/node_modules/acorn-jsx/index.js?v=7006eb30' does not provide an export named 'default'

It seems something is incompatible with the @storybook/react module?

I am using storybook@6.5.x beacuse I need it to work with react-router@6.

here are my package.json versions:

"@storybook/addon-essentials": "6.5.0-alpha.49",
"@storybook/react": "6.5.0-alpha.49",
"storybook-builder-vite": "^0.1.20",
"vite": "^2.8.6",

My storybook works fine with CRA + webpack@5. So not sure why it would be broken switching the builder to vitejs 🤔

[IanVS]

This should be fixed by https://github.com/eirslett/storybook-builder-vite/pull/280, which hasn’t quite been released yet. I’ll let you know when I have a chance to cut a new release.

[IanVS]

I just published 0.1.21, mind trying it out to verify it fixes your issue?