Failed to fetch dynamically imported module: http://localhost:6006/storybook/preview.jsx

[jeremytenjo]

Describe the bug
Getting Failed to fetch dynamically imported module: http://localhost:6006/storybook/preview.jsx when running storybook-start

To Reproduce

1. run git clone https://github.com/jeremytenjo/starter-website && cd starter-website && npm i && npm run storybook:dev
2. open http://localhost:6006/?path=/story/lib-components-basic-misc-codeblock--default

Result

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 95.0.2
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: 6.5.9 => 6.5.9 
    @storybook/addon-essentials: 6.5.9 => 6.5.9 
    @storybook/addon-interactions: 6.5.9 => 6.5.9 
    @storybook/addon-links: 6.5.9 => 6.5.9 
    @storybook/builder-vite: 0.1.36 => 0.1.36 
    @storybook/react: 6.5.9 => 6.5.9 
    @storybook/testing-library: 0.0.13 => 0.0.13 

More Context

It occurs intermittently

Storybook is run from the scripts/storybook/startStorybook/startStorybook.ts function.

[GuskiS]

Having the same issue when trying to migrate to builder-vite. Once I trigger changes in preview.tsx, it runs fine.

[jonathanadler]

We're also seeing this issue with builder-vite.
Stopping start-storybook and running it again resolves this issue, until the next npm install

[jeremytenjo]

Any progress on this?

Thank you

[IanVS]

This normally happens when there is another error somewhere else. Do you see any error messages in the terminal? If you see messages about vite finding dependencies to optimize, you can add those to optimizeDeps.include in viteFinal as shown in https://github.com/storybookjs/builder-vite#customize-vite-config.

[timurcatakli]

I had the same issue and fixed it by
1- Renaming preview.js to preview.tsx as I am utilizing TS
2- Added `import React from "react"

import React from "react";
import { EnterpriseProvider } from "@company/dt-scl-core";
import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import { customViewports } from "./customViewports";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  viewport: {
    viewports: { ...INITIAL_VIEWPORTS, ...customViewports },
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  (Story) => (
    <EnterpriseProvider>
      <ScopedCssBaseline>
        <Story />
      </ScopedCssBaseline>
    </EnterpriseProvider>
  ),
];

[idmyn]

I'm still getting this error, even if I rename preview.jsx to preview.tsx

any suggestions for how I might fix it?

screenshot of browser console:

[IanVS]

This looks like a different issue, mind opening up a new issue ideally with steps or a link to reproduce it?

[ZDerekh]

I'm having the same issue. The underlying thing is the following:

@storybook/cli v7.0.0-beta.19

info => Starting manager..
info => Serving static files from ././public at /
Failed to resolve dependency: react-dom/client, present in 'optimizeDeps.include'
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 7.0.0-beta.19 for react-vite started   │
│   659 ms for manager and 5.49 s for preview        │
│                                                    │
│    Local:            http://localhost:9009/        │
│    On your network:  http://192.168.1.124:9009/    │
│                                                    │
╰────────────────────────────────────────────────────╯
✘ [ERROR] Could not resolve "react-dom/client"

I'm using:
"react": "17.0.2",
"react-dom": "^17.0.2",
"react-test-renderer": "^17.0.2",
"storybook": "7.0.0-beta.19",
"@storybook/addon-actions": "7.0.0-beta.19",
"@storybook/addon-controls": "^7.0.0-beta.19",
"@storybook/addon-links": "7.0.0-beta.19",
"@storybook/addons": "7.0.0-beta.19",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "7.0.0-beta.19",
"@storybook/react-vite": "7.0.0-beta.19",
"@storybook/testing-react": "^2.0.0-next.0",

[IanVS]

@ZDerekh this is also a different issue, please open an issue in the main storybook repo with a reproduction, and tag me there.