[Bug]: Failed to fetch dynamically imported module: http://localhost:6006/node_modules/.cache/vite-storybook/deps/@storybook_react_preview.js

[ryota-murakami]

Describe the bug

Screen.Recording.2023-05-22.at.11.53.10.mov

To Reproduce

Creating with storybook.new now...

Install Volta

curl https://get.volta.sh | bash

1. git clone https://github.com/laststance/nsx.git
2. cd nsx
3. yarn
4. yarn storybook

System

System:
    OS: macOS 13.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 18.16.0 - ~/.volta/tools/image/node/18.16.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 9.5.1 - ~/.volta/tools/image/node/18.16.0/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 101.0.1
    Safari: 16.5
  npmPackages:
    @storybook/addon-essentials: ^7.0.12 => 7.0.12 
    @storybook/addon-interactions: ^7.0.12 => 7.0.12 
    @storybook/addon-links: ^7.0.12 => 7.0.12 
    @storybook/blocks: ^7.0.12 => 7.0.12 
    @storybook/react: ^7.0.12 => 7.0.12 
    @storybook/react-vite: ^7.0.12 => 7.0.12 
    @storybook/testing-library: ^0.1.0 => 0.1.0

Additional context

yarn build-storybook is working fine.

[IanVS]

This seems to be a bug in react-syntax-highlighter. react-syntax-highlighter/react-syntax-highlighter#519

I pulled down your reproduction and I see a lot of:

✘ [ERROR] Invalid command: on-resolve [plugin JavaScript plugins]

    node_modules/esbuild/lib/main.js:728:12:
      728 │       throw new Error(`Invalid command: ` + request.command);
          ╵             ^

    at handleRequest (/Users/ianvs/code/experiments/storybook/nsx/node_modules/esbuild/lib/main.js:728:13)
    at handleIncomingPacket (/Users/ianvs/code/experiments/storybook/nsx/node_modules/esbuild/lib/main.js:745:7)
    at Socket.readFromStdout (/Users/ianvs/code/experiments/storybook/nsx/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  The plugin "JavaScript plugins" was triggered by this import

    node_modules/react-syntax-highlighter/dist/esm/async-languages/prism.js:1371:4:
      1371 │     "refractor/lang/xquery.js");
           ╵     ~~~~~~~~~~~~~~~~~~~~~~~~~~

The reason it builds fine is that vite only uses esbuild in dev, and it uses rollup in production. It looks like this isn't something Storybook can fix, though, you'll need to follow the issue I linked.

[ryota-murakami]

I filed issue on react-syntax-highlighter repo but this lib is really inactive.
I want to move other react's syntax highlight library.