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

MiniKrakenIT · 2022-05-19T19:13:35Z

What version of `vite` are you using?

2.9.9

System info and storybook versions

System:
OS: macOS 12.3.1
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 18.0.0 - /opt/homebrew/bin/node
npm: 8.9.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 101.0.4951.64
Firefox: 100.0
Safari: 15.4
npmPackages:
@storybook/addon-actions: ^6.5.3 => 6.5.3
@storybook/addon-essentials: ^6.5.3 => 6.5.3
@storybook/addon-interactions: ^6.5.3 => 6.5.3
@storybook/addon-links: ^6.5.3 => 6.5.3
@storybook/builder-vite: ^0.1.35 => 0.1.35
@storybook/builder-webpack4: ^6.5.3 => 6.5.3
@storybook/manager-webpack4: ^6.5.3 => 6.5.3
@storybook/svelte: ^6.5.3 => 6.5.3
@storybook/testing-library: ^0.0.11 => 0.0.11

Describe the Bug

Created a scratch project with Sveltekit(1.0.0-next.335), storybook (6.5.3) and builder-vite.
This project with webpack works fine.

But when starting storybook, I'm presented with the following error:

info => Ignoring cached manager due to change in manager config
ERR! Error: [vite-plugin-mdx] "@mdx-js/react" must be installed
ERR!     at resolveImport (/Users/maximehuylebroeck/Documents/Development/storybook-load-API-data-via-loaders/node_modules/vite-plugin-mdx/dist/imports.js:29:23)
ERR!     at Object.assertImportExists (/Users/maximehuylebroeck/Documents/Development/storybook-load-API-data-via-loaders/node_modules/vite-plugin-mdx/dist/imports.js:41:12)
ERR!     at /Users/maximehuylebroeck/Documents/Development/storybook-load-API-data-via-loaders/node_modules/vite-plugin-mdx/dist/transform.js:18:19
ERR!     at Array.map (<anonymous>)
ERR!     at Object.createTransformer (/Users/maximehuylebroeck/Documents/Development/storybook-load-API-data-via-loaders/node_modules/vite-plugin-mdx/dist/transform.js:17:50)
ERR!     at Object.configResolved (/Users/maximehuylebroeck/Documents/Development/storybook-load-API-data-via-loaders/node_modules/vite-plugin-mdx/dist/index.js:46:43)
ERR!     at /Users/maximehuylebroeck/Documents/Development/storybook-load-API-data-via-loaders/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61561:127
ERR!     at Array.map (<anonymous>)
ERR!     at resolveConfig (/Users/maximehuylebroeck/Documents/Development/storybook-load-API-data-via-loaders/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61561:35)
ERR!     at async getOptimizeDeps (/Users/maximehuylebroeck/Documents/Development/storybook-load-API-data-via-loaders/node_modules/@storybook/builder-vite/dist/optimizeDeps.js:127:28)

Link to Minimal Reproducible Example

https://github.com/GeForcez/storybook-load-API-data-via-loaders

Participation

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

The text was updated successfully, but these errors were encountered:

IanVS · 2022-05-19T19:22:21Z

Might be related to this? brillout/vite-plugin-mdx#47 (comment)

IanVS · 2022-05-19T19:36:58Z

I think we're perhaps moving away from using vite-plugin-mdx (see #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.

openscript · 2022-05-20T20:32:23Z

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! :)

IanVS · 2022-05-20T20:43:03Z

Can you check to be sure that you didn't accidentally end up with version 2 of @mdx-js/mdx somehow?

npm ls @mdx-js/mdx

openscript · 2022-05-21T08:17:24Z

You are right.. vite-plugin-mdx is using version 2:

react-section-dividers@0.4.10 /workspaces/react-section-dividers
├─┬ @storybook/addon-docs@6.5.3
│ └─┬ @storybook/mdx1-csf@0.0.1-canary.1.867dcd5.0
│   └── @mdx-js/mdx@1.6.22
└─┬ @storybook/builder-vite@0.1.35
  ├── @mdx-js/mdx@1.6.22
  └─┬ vite-plugin-mdx@3.5.10
    └── @mdx-js/mdx@2.1.1

So I've tried to override it in my package.json:

  "overrides": {
    "vite-plugin-mdx": {
      "@mdx-js/mdx": "^1.6.22"
    }
  }

.. but this leads to:

react-section-dividers@0.4.10 /workspaces/react-section-dividers
├─┬ @storybook/addon-docs@6.5.3
│ └─┬ @storybook/mdx1-csf@0.0.1-canary.1.867dcd5.0
│   └── @mdx-js/mdx@1.6.22
└─┬ @storybook/builder-vite@0.1.35
  ├── @mdx-js/mdx@1.6.22
  └─┬ vite-plugin-mdx@3.5.10
    └── @mdx-js/mdx@2.1.1 invalid: "^1.6.22" from node_modules/vite-plugin-mdx

openscript · 2022-05-23T08:30:39Z

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

mszekiel · 2022-05-23T12:59:08Z

Can confirm on React 18 after installing @mdx-js/react normally breaks storybook, but this: #391 (comment) helps and it boots up.

openscript · 2022-05-23T14:27:41Z

Can confirm on React 18 after installing @mdx-js/react normally breaks storybook, but this: #391 (comment) helps and it boots up.

You are right. I've just tested it again and it seems to work now.

mszekiel · 2022-05-24T07:42:11Z

Can confirm on React 18 after installing @mdx-js/react normally breaks storybook, but this: #391 (comment) helps and it boots up.

You are right. I've just tested it again and it seems to work now.

But on the other hand it's problematic when it comes to npm i and --force is needed unfortunately 😞 With my dependencies at least.

zettadam · 2022-05-24T13:39:16Z

My project does not use React (though Storybook is written in React). I would expect internal dependencies to be resolved by Storybook and its ecosystem of packages before release (I chose Storybook@6.5.4). As as user, I should not care about React version if I don't use it directly and would expect it to work out of the box. When I run into these errors, I look at Storybook as a broken project and start a search for alternatives.

IanVS · 2022-05-24T13:55:19Z

This is a bug, for sure. React 18 and MDX2 threw things for a bit of a loop, and we're still finding a way to fix it. There's a workaround for now, and we should have a proper fix before too long.

zettadam · 2022-05-24T14:26:39Z

@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"
  }
}

shilman · 2022-05-25T14:29:01Z

@IanVS There was a missing dep in @storybook/mdx1-csf which I fixed yesterday. Perhaps upgrading to the latest would fix this issue?

https://github.com/storybookjs/mdx1-csf/releases/tag/v0.0.2

IanVS · 2022-05-25T14:33:16Z

Right now we're not using @storybook/mdx1-csf at all, but there's a PR that would use it.

dohooo · 2022-05-27T15:16:42Z

You are right.. vite-plugin-mdx is using version 2:

react-section-dividers@0.4.10 /workspaces/react-section-dividers
├─┬ @storybook/addon-docs@6.5.3
│ └─┬ @storybook/mdx1-csf@0.0.1-canary.1.867dcd5.0
│   └── @mdx-js/mdx@1.6.22
└─┬ @storybook/builder-vite@0.1.35
  ├── @mdx-js/mdx@1.6.22
  └─┬ vite-plugin-mdx@3.5.10
    └── @mdx-js/mdx@2.1.1

So I've tried to override it in my package.json:

  "overrides": {
    "vite-plugin-mdx": {
      "@mdx-js/mdx": "^1.6.22"
    }
  }

.. but this leads to:

react-section-dividers@0.4.10 /workspaces/react-section-dividers
├─┬ @storybook/addon-docs@6.5.3
│ └─┬ @storybook/mdx1-csf@0.0.1-canary.1.867dcd5.0
│   └── @mdx-js/mdx@1.6.22
└─┬ @storybook/builder-vite@0.1.35
  ├── @mdx-js/mdx@1.6.22
  └─┬ vite-plugin-mdx@3.5.10
    └── @mdx-js/mdx@2.1.1 invalid: "^1.6.22" from node_modules/vite-plugin-mdx

same error. 😵‍💫

dohooo · 2022-05-27T15:22:37Z

WOW! I SOLVED!

Fixes #234 Fixes #391 Fixes #398 To enable experimental MDX2 in a project, follow this guide: https://gist.github.com/shilman/6ff2d7e18db8846e8fc552fb432ae4f6 * Support MDXv2 * Fix formatting * Remove explicit mdx-js/preact from example * Remove workarounds from readme * Add @storybook/mdx2-csf to examples using it Co-authored-by: Ian VanSchooten <ian.vanschooten@gmail.com>

tigrr · 2022-08-30T10:14:48Z

I am having this error, even though I don't use React or Preact, neither do I use MDX.

MiniKrakenIT added the bug Something isn't working label May 19, 2022

IanVS added the mdx label May 19, 2022

IanVS added the has workaround label May 24, 2022

IanVS mentioned this issue May 25, 2022

Support MDXv2 #377

Merged

This was referenced May 31, 2022

@mdx-js_react.js does not provide an export named 'mdx' [Bug] #398

Closed

Documentation of precautions when using Vite storybookjs/storybook#18399

Closed

IanVS mentioned this issue Jun 7, 2022

[Bug] Error: [vite-plugin-mdx] "@mdx-js/preact" must be installed #406

Closed

1 task

IanVS closed this as completed in #377 Jun 29, 2022

tobiasdiez mentioned this issue Jul 5, 2022

Remove exlicit mdx dependency JabRef/JabRefOnline#1208

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MiniKrakenIT commented May 19, 2022 •

edited

IanVS commented May 19, 2022

IanVS commented May 19, 2022

openscript commented May 20, 2022

IanVS commented May 20, 2022

openscript commented May 21, 2022

openscript commented May 23, 2022

mszekiel commented May 23, 2022

openscript commented May 23, 2022

mszekiel commented May 24, 2022 •

edited

zettadam commented May 24, 2022 •

edited

IanVS commented May 24, 2022

zettadam commented May 24, 2022 •

edited

shilman commented May 25, 2022

IanVS commented May 25, 2022

dohooo commented May 27, 2022

dohooo commented May 27, 2022

tigrr commented Aug 30, 2022

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

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

Comments

MiniKrakenIT commented May 19, 2022 • edited

What version of vite are you using?

System info and storybook versions

Describe the Bug

Link to Minimal Reproducible Example

Participation

IanVS commented May 19, 2022

IanVS commented May 19, 2022

openscript commented May 20, 2022

IanVS commented May 20, 2022

openscript commented May 21, 2022

openscript commented May 23, 2022

mszekiel commented May 23, 2022

openscript commented May 23, 2022

mszekiel commented May 24, 2022 • edited

zettadam commented May 24, 2022 • edited

IanVS commented May 24, 2022

zettadam commented May 24, 2022 • edited

shilman commented May 25, 2022

IanVS commented May 25, 2022

dohooo commented May 27, 2022

dohooo commented May 27, 2022

tigrr commented Aug 30, 2022

MiniKrakenIT commented May 19, 2022 •

edited

What version of `vite` are you using?

mszekiel commented May 24, 2022 •

edited

zettadam commented May 24, 2022 •

edited

zettadam commented May 24, 2022 •

edited