builder-vite: [Bug] Missing package @mdx-js/react on scratch build sveltekit + storybook + builder-vite

WOW! I SOLVED!

It seems like this only happens when you are on React 18?

I think we’re perhaps moving away from using vite-plugin-mdx (see https://github.com/storybookjs/builder-vite/pull/377), but for now, a workaround is to manually install the package that it can’t find:

npm i --save-dev @mdx-js/react@1 --force

After that, (plus setting the builder and adding a preview-head.html) I was able to launch the reproduction correctly.

@IanVS Yes, understand completely. I hope it didn’t come too strong. I was simply looking at it from the point of view of someone who might take Storybook for a spin in a project built with Vite.

I just sent a starter project with what seemed to me as straightforward dependencies to a friend so he could test Storybook with pure HTML. It worked on my machine when I initiated it with npx sb init... command. When I removed ‘node_modules’ and ‘package-lock.json’, and run npm install & npm run storybook I saw missing dependencies and then other errors in the browser after I thought I had manually fixed dependencies.

I imagine my friend to be totally frustrated.

My package.json

{
  "name": "html-components",
  "description": "A reference library of HTML components.",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.18.0",
    "@storybook/addon-actions": "^6.5.4",
    "@storybook/addon-essentials": "^6.5.4",
    "@storybook/addon-interactions": "^6.5.4",
    "@storybook/addon-links": "^6.5.4",
    "@storybook/builder-vite": "^0.1.35",
    "@storybook/html": "^6.5.4",
    "@storybook/testing-library": "^0.0.11",
    "babel-loader": "^8.2.5",
    "vite": "^2.9.9"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

Hi @IanVS

After installing the dependency @mdx-js/react@1 I get another error:

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /workspaces/react-section-dividers/node_modules/@mdx-js/mdx/index.js from /workspaces/react-section-dividers/node_modules/vite-plugin-mdx/dist/imports.js not supported.
ERR! Instead change the require of index.js in /workspaces/react-section-dividers/node_modules/vite-plugin-mdx/dist/imports.js to a dynamic import() which is available in all CommonJS modules.
ERR!     at Object.requireMdx (/workspaces/react-section-dividers/node_modules/vite-plugin-mdx/dist/imports.js:10:12)
ERR!     at Object.createTransformer (/workspaces/react-section-dividers/node_modules/vite-plugin-mdx/dist/transform.js:16:27)
ERR!     at Object.configResolved (/workspaces/react-section-dividers/node_modules/vite-plugin-mdx/dist/index.js:46:43)
ERR!     at /workspaces/react-section-dividers/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61561:127
ERR!     at Array.map (<anonymous>)
ERR!     at resolveConfig (/workspaces/react-section-dividers/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61561:35)
ERR!     at async getOptimizeDeps (/workspaces/react-section-dividers/node_modules/@storybook/builder-vite/dist/optimizeDeps.js:127:28)
ERR!     at async createViteServer (/workspaces/react-section-dividers/node_modules/@storybook/builder-vite/dist/vite-server.js:23:23)
ERR!     at async Object.start (/workspaces/react-section-dividers/node_modules/@storybook/builder-vite/dist/index.js:53:20)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/workspaces/react-section-dividers/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (/workspaces/react-section-dividers/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/workspaces/react-section-dividers/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)

Any idea how to fix this? Thank you! 😃