builder-vite: [Bug] 504's and "error loading dynamically imported module"

What version of vite are you using?

2.9.14

System info and storybook versions

Environment Info:

  System:
    OS: macOS 11.6.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 102.0.1
    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/addons: ^6.5.9 => 6.5.9
    @storybook/api: ^6.5.9 => 6.5.9
    @storybook/builder-vite: ^0.1.39 => 0.1.39
    @storybook/components: ^6.5.9 => 6.5.9
    @storybook/core-common: ^6.5.9 => 6.5.9
    @storybook/core-events: ^6.5.9 => 6.5.9
    @storybook/node-logger: ^6.5.9 => 6.5.9
    @storybook/react: ^6.5.9 => 6.5.9
    @storybook/source-loader: ^6.5.9 => 6.5.9
    @storybook/testing-library: ^0.0.13 => 0.0.13
    @storybook/theming: ^6.5.9 => 6.5.9

Storybook Addons:

'@storybook/addon-actions', 
'@storybook/addon-links', 
'@storybook/addon-essentials', 
'storybook-formik/register', 
'storybook-react-i18next'

Describe the Bug

We use Storybook + Chromatic.

We have swapped from Webpack 5 builer to Vite as we swapped from CRA to Vite for the app itself.

Chromatic seems to work most of the time but locally we just hit:

In the browser console we see this:

11:20:35.221 InstallTrigger is deprecated and will be removed in the future. vendors~main.manager.bundle.js:54906:46
11:20:35.280 Source map error: Error: request failed with status 404
Resource URL: http://localhost:6006/vendors~main.manager.bundle.js
Source Map URL: index.js.map
11:20:35.528 Source map error: Error: request failed with status 404
Resource URL: http://localhost:6006/vendors~main.manager.bundle.js
Source Map URL: index.js.map
11:20:36.279 [vite] connecting... client.ts:16:8
11:20:36.644 [vite] connected. client.ts:53:14
11:20:37.253 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/@mui_material_styles.js?v=bbbdc6d4
[HTTP/1.1 504 Gateway Timeout 7ms]

11:20:37.254 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/@mui_x-license-pro.js?v=afc4cacb
[HTTP/1.1 504 Gateway Timeout 5ms]

11:20:37.254 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/@storybook_addons.js?v=bbbdc6d4
[HTTP/1.1 504 Gateway Timeout 7ms]

11:20:37.255 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/mockdate.js?v=c03e7816
[HTTP/1.1 504 Gateway Timeout 6ms]

11:20:37.257 GEThttp://localhost:6006/node_modules/.vite-storybook/deps/react_jsx-dev-runtime.js?v=bbbdc6d4
[HTTP/1.1 504 Gateway Timeout 6ms]

11:20:37.309 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_material_styles.js?v=bbbdc6d4” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.310 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_addons.js?v=bbbdc6d4” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.312 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_x-license-pro.js?v=afc4cacb” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.313 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/mockdate.js?v=c03e7816” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.314 Loading module from “http://localhost:6006/node_modules/.vite-storybook/deps/react_jsx-dev-runtime.js?v=bbbdc6d4” was blocked because of a disallowed MIME type (“”). iframe.html
11:20:37.324 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_material_styles.js?v=bbbdc6d4”. iframe.html:492:1
11:20:37.324 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_addons.js?v=bbbdc6d4”. iframe.html:492:1
11:20:37.324 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_x-license-pro.js?v=afc4cacb”. iframe.html:492:1
11:20:37.324 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/mockdate.js?v=c03e7816”. iframe.html:492:1
11:20:37.327 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/react_jsx-dev-runtime.js?v=bbbdc6d4”. iframe.html:492:1
11:20:37.329 Error reading preview.js: index.js:56:66
    error index.js:56
    renderPreviewEntryError Preview.js:730
    renderPreviewEntryError PreviewWeb.js:816
    getProjectAnnotationsOrRenderError Preview.js:134
    _runRejections index.js:194
    _runRejections index.js:191
    _setRejected index.js:275
    _failWith index.js:177
    _runRejections index.js:200
    _runRejections index.js:191
    _setRejected index.js:275
    _failWith index.js:177
    _chainPromiseData index.js:263
    (Async: promise callback)
    _chainPromiseData index.js:262
    _handleUserFunctionResult index.js:254
    _runResolutions index.js:218
    _runResolutions index.js:214
    then index.js:67
    getProjectAnnotationsOrRenderError Preview.js:123
    initialize Preview.js:102
    <anonymous> vite-app.js:25
11:20:37.329 TypeError: error loading dynamically imported module index.js:56:66
    error index.js:56
    renderPreviewEntryError Preview.js:731
    renderPreviewEntryError PreviewWeb.js:816
    getProjectAnnotationsOrRenderError Preview.js:134
    _runRejections index.js:194
    _runRejections index.js:191
    _setRejected index.js:275
    _failWith index.js:177
    _runRejections index.js:200
    _runRejections index.js:191
    _setRejected index.js:275
    _failWith index.js:177
    _chainPromiseData index.js:263
    (Async: promise callback)
    _chainPromiseData index.js:262
    _handleUserFunctionResult index.js:254
    _runResolutions index.js:218
    _runResolutions index.js:214
    then index.js:67
    getProjectAnnotationsOrRenderError Preview.js:123
    initialize Preview.js:102
    <anonymous> vite-app.js:25
11:20:37.596 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/i18next.js?v=221a74f4”. iframe.html:492:1
11:20:37.596 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/react-i18next.js?v=221a74f4”. iframe.html:492:1
11:20:37.596 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/i18next-browser-languagedetector.js?v=221a74f4”. iframe.html:492:1
11:20:37.598 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/i18next-http-backend.js?v=221a74f4”. iframe.html:492:1
11:20:37.599 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/react.js?v=221a74f4”. iframe.html:492:1
11:20:37.599 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/react_jsx-dev-runtime.js?v=221a74f4”. iframe.html:492:1
11:20:37.599 Loading failed for the module with source “http://localhost:6006/node_modules/.vite-storybook/deps/@mui_material.js?v=221a74f4”. iframe.html:492:1

and Storybook just shows error loading dynamically imported module

main.js

const path = require('path');
const { mergeConfig } = require('vite');

module.exports = {
  staticDirs: ['../public'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-essentials', 'storybook-formik/register', 'storybook-react-i18next'],
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-vite',
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [],
      server: {
        hmr: {},
      },
      build: {
        chunkSizeWarningLimit: 50000,
      },
      base: '/',
      css: {
        preprocessorOptions: {
          scss: { additionalData: `@import "./src/index.scss";` },
        },
      },
      resolve: {
        alias: {
          '@emotion/core': path.resolve(__dirname, '../node_modules/@emotion/react'),
          'emotion-theming': path.resolve(__dirname, '../node_modules/@emotion/react'),
          '@': path.resolve(__dirname, '../src'),
        },
      },
    });
  },
};

preview.jsx

// fonts
import '@fontsource/lato/300.css';
import '@fontsource/lato/400.css';
import '@fontsource/raleway/200.css';
import '@fontsource/roboto/400.css';
// other
import { ThemeProvider } from '@mui/material/styles';
import { makeDecorator } from '@storybook/addons';
import { LicenseInfo } from '@mui/x-license-pro';
import MockDate from 'mockdate';
import buildTheme from '../src/theme';
import i18n from './i18next.js';
import { withI18Next } from './withi18next';

LicenseInfo.setLicenseKey('<redacted>');

const lightTheme = buildTheme('light');
const darkTheme = buildTheme('dark');

const withThemeProvider = (Story, context) => {
  return (
    <ThemeProvider theme={lightTheme}>
      <Story {...context} />   
    </ThemeProvider>
  );
};

const fakeDateDecorator = makeDecorator({
  name: 'withDate',
  parameterName: 'date',
  wrapper: (storyFn, context, { parameters: date }) => {
    MockDate.reset();
    if (date instanceof Date) {
      MockDate.set(date);
    }
    return storyFn(context);
  },
});
export const decorators = [withThemeProvider, withI18Next, fakeDateDecorator];

export const parameters = {
  i18n,
  locale: 'en',
  locales: {
    en: 'English (US)',
    'en-GB': 'English (UK)',
    fr: 'Français',
    de: 'Deutsch',
  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Link to Minimal Reproducible Example

No response

Participation

  • I am willing to submit a pull request for this issue.

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 8
  • Comments: 26 (9 by maintainers)

Most upvoted comments

This seems to occasionally happen when vite hasn’t pre-bundled its dependencies. It was better for a while when using 2.9, but it seems to be an issue again in 3.0. @nagisaando @philjones88 when you see this happen, do you also see messages in the terminal about vite finding and optimizing dependencies? If so, you can try adding those to optimizeDeps.include in your config in viteFinal. For example:

const { mergeConfig } = require('vite');

module.exports = {
  //...
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      optimizeDeps: {
        include: [
          '@storybook/addon-a11y/preview.js',
          '@storybook/addon-actions/preview.js',
          '@storybook/addon-backgrounds/preview.js',
          'babel-plugin-open-source/script.js',
          'chromatic/isChromatic',
          'storybook-dark-mode',
        ],
      },
    });
  },
};
+5
IanVS on Jul 25, 2022

For what it’s worth, I ran into this issue and a simple rm -rf node_modules/ && yarn upgrade fixed it for me 😃

+2
erwijet on Jun 12, 2023

Unfortunately my project is no open source.

I see no other errors in my terminal. The build passes and the error triggers only when I select a story.

Downgrading my storybook & vite builder is showing me the same. I will try and create a repro and update you if I resolve it.

+1
chuck-adaptive on Nov 4, 2022

The issue occurred for the first time for me when upgrading from 0.1.39 to 0.2.2

Did you also upgrade Vite? Vite has been changing the way that prebundling works through the last few versions, and it seems like maybe one of those changes is causing some problems for storybook.

@gabstafari @blowsie have you tried adding those dependencies to your optimizeDeps.include?

Hi @IanVS it seems fine now.

I just made sure that I got all the packages I need so here are the list of packages I have to include.

"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-docs": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/addon-postcss": "3.0.0-alpha.1",
"@storybook/addons": "^6.5.9",
"@storybook/builder-vite": "^0.2.2",
"@storybook/testing-library": "^0.0.13",
"@storybook/theming": "^6.5.9",

I am still making more test and will let you know if I encountered any more issues.

Thanks for your hard work on this great storybook builder. 😃

+1
gabstafari on Jul 29, 2022

@IanVS Hey thanks! I added dependencies to optimizeDeps.include and it’s working so far. My project uses vite 2.9.9 so the issue may be occurring in the both versions.

+1
nagisaando on Jul 26, 2022
Read more comments on GitHub
← builder-vite: [Bug] 'mdx' is not exported by node_modules/@mdx-js/react/index.js
builder-vite: [Bug] Cannot build storybook in amplify, missing "@storybook/core-common" →