MDX Docs doesn't display after upgrades to React v18.1.0 + Storybook v6.5.6 -> v6.5.7 -> v6.5.8 -> v6.5.9 #18383

sgrobert · 2022-06-01T05:11:21Z

Describe the bug
I was previously running on React v18 + Storybook v6.4.22, which was working well.

After I initiated the update to React v18.1.0 + Storybook v6.5.6, at first there was an old error of unable to detect @mdx-js/react in the nodes_modules folder, by which I had subsequently installed @mdx-js/react v^2.1.1 + @mdx-js/preact v^2.1.1 which resolved the loading of Storybook in the browser issue.

However, then I did realize that the usual Docs in my .mdx files do not load anymore.

To Reproduce
[This is a work-related build, thus I will not be able to showcase all the info]

These are the main related dependencies I'm using:
...
"next": "^12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0",
...
"@mdx-js/preact": "^2.1.1",
"@mdx-js/react": "^2.1.1",
"@storybook/addon-actions": "^6.5.6",
"@storybook/addon-docs": "^6.5.6",
"@storybook/addon-essentials": "^6.5.6",
"@storybook/addon-interactions": "^6.5.6",
"@storybook/addon-links": "^6.5.6",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.6",
"@storybook/manager-webpack5": "^6.5.6",
"@storybook/react": "^6.5.6",
"@storybook/testing-library": "^0.0.11",
...
"eslint-plugin-storybook": "^0.5.12",
...

System
Environment Info:

System:
OS: macOS 12.4
CPU: (8) arm64 Apple M1
Binaries:
Node: 18.2.0 - /opt/homebrew/bin/node
npm: 8.9.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 102.0.5005.61
Firefox: 100.0.2
Safari: 15.5
npmPackages:
@storybook/addon-actions: ^6.5.6 => 6.5.6
@storybook/addon-docs: ^6.5.6 => 6.5.6
@storybook/addon-essentials: ^6.5.6 => 6.5.6
@storybook/addon-interactions: ^6.5.6 => 6.5.6
@storybook/addon-links: ^6.5.6 => 6.5.6
@storybook/addon-postcss: ^2.0.0 => 2.0.0
@storybook/builder-webpack5: ^6.5.6 => 6.5.6
@storybook/manager-webpack5: ^6.5.6 => 6.5.6
@storybook/react: ^6.5.6 => 6.5.6
@storybook/testing-library: ^0.0.11 => 0.0.11

Additional context

When running npm run storybook, it loads to the browser and Docs do not load. While accessing Canvas, it throws the following errror:

(0 , _mdx_js_react__WEBPACK_IMPORTED_MODULE_7__.mdx) is not a function
---
TypeError: (0 , _mdx_js_react__WEBPACK_IMPORTED_MODULE_7__.mdx) is not a function
    at Object.Template (http://localhost:6006/main.iframe.bundle.js:8506:76)
    at undecoratedStoryFn (http://localhost:6006/vendors-node_modules_mui_material_Button_Button_js-

If I run npm run build-storybook, it throws a consistent bulk error of:
WARN export 'mdx' (imported as 'mdx') was not found in '@mdx-js/react' (possible exports: MDXContext, MDXProvider, useMDXComponents, withMDXComponents)

I'm not sure if the above is related in any way.

Hope to seek guidance and assistance to help restore the Docs view for my .mdx files.

Thank you!

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

arlukin · 2022-06-05T09:12:32Z

Might be related.
The injection of components to MDXProvider, in @mdx-js/react, have stoped working in my setup with react 18.
<MDXProvider components={components}>

sgrobert · 2022-06-06T01:20:15Z

Might be related. The injection of components to MDXProvider, in @mdx-js/react, have stoped working in my setup with react 18. <MDXProvider components={components}>

Thanks @arlukin for the suggestion. Though in my current build, I did not really use the MDXProvider code directly. Still looking forward to a working solution.

shilman · 2022-06-06T01:32:39Z

@sgrobert Storybook 6.x is still on MDXv1. To use MDXv2, please read the instructions here:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#opt-in-mdx2-support

sgrobert · 2022-06-06T11:02:37Z

Hi @shilman,

Thank you for the reply.

I have followed the instructions and installed @storybook/mdx2-csf, but it currently throws a new error:

...
99% done plugins webpack-hot-middlewarewebpack built preview 9e992318cf70b258745d in 10247ms
ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Unexpected character `[` (U+005B) in name, expected a name character such as letters, digits, `$`, or `_`; whitespace before attributes; or the end of the tag
...

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Loading presets
info Found existing addon {"name":"@storybook/addon-docs","options":{"configureJSX":true,"babelOptions":{},"sourceLoaderOptions":null,"transcludeMarkdown":true}}, skipping.
...

Please do note that I had also installed @mdx-js/react v^2.1.1 to resolve another issue stating the library was not found in node_modules.

I'm also listing the list of error thrown within Console of my Chrome browser, hope it may help to identify the source of the issue:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".
You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.
Addon controls: Control of type color only supports string, received "undefined" instead
argType.defaultValue is deprecated and will be removed in Storybook 7.0.
manager received storySpecified but was unable to determine the source of the event
manager received currentStoryWasSet but was unable to determine the source of the event
manager received storyRenderPhaseChanged but was unable to determine the source of the event
manager received setGlobals but was unable to determine the source of the event
Uncaught TypeError: (0 , mdx_js_react__WEBPACK_IMPORTED_MODULE_5_.mdx) is not a function
Uncaught TypeError: (0 , mdx_js_react__WEBPACK_IMPORTED_MODULE_7_.mdx) is not a function

Do let me know if you need other information to help find the root of the cause. Thank you.

sgrobert · 2022-06-10T02:24:40Z

Hi @shilman,

Another update on the issue. Updated to Storybook v6.5.8, the problem still persists.

Seems like the error is now with mdx2-csf. Error is thrown as follows:

99% done plugins webpack-hot-middlewarewebpack built preview 66fbea0cf8acf55bec28 in 10581ms
WARN Force closed manager build
ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Unexpected character `[` (U+005B) in name, expected a name character such as letters, digits, `$`, or `_`; whitespace before attributes; or the end of the tag
    at processResult (/Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:758:19)
at /Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/.../.../.../.../node_modules/@storybook/mdx2-csf/loader.js:26:12)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Unexpected character `[` (U+005B) in name, expected a name character such as letters, digits, `$`, or `_`; whitespace before attributes; or the end of the tag
    at processResult (/Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/.../.../.../.../node_modules/@storybook/mdx2-csf/loader.js:26:12)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/mdx2-csf/loader.js):
Unexpected character `-` (U+002D) before name, expected a character that can start a name, such as a letter, `$`, or `_`
    at processResult (/Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/.../.../.../.../node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/.../.../.../.../node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/.../.../.../.../node_modules/@storybook/mdx2-csf/loader.js:26:12)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Hope that may help with further debugging this issue. Thank you.

shilman · 2022-06-10T03:01:16Z

@sgrobert Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

sgrobert · 2022-06-10T07:48:19Z

Hi @shilman,

Sadly, my current build is embedded with my company's code repo and due to the work nature, I'm unable to do a reproduction repo to help with the debugging.

Would there potentially be other ways where I may assist in helping to pinpoint the potential root cause, so that this issue can be resolved?

Thank you!

shilman · 2022-06-12T01:25:44Z

@sgrobert if you can create a standalone reproduction that doesn't include any of your company's private code, that would definitely help resolve the issue. See how to create a repro.

sgrobert · 2022-06-12T01:46:45Z

Hi @shilman,

I have attempted to use npx sb@next repro to setup the repro but was faced with this error:

The steps I've selected:

npx sb@next repro
react
react
storybook-repro

$ npx sb@next repro
╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   🤗 Welcome to sb repro! 🤗                                                 │
│                                                                              │
│   Create a new project to minimally reproduce Storybook issues.              │
│                                                                              │
│   1. select an environment that most closely matches your project setup.     │
│   2. select a location for the reproduction, outside of your project.        │
│                                                                              │
│   After the reproduction is ready, we'll guide you through the next steps.   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
✔ 🌈 Select the repro framework › react
✔ 📝 Select the repro base template › react
✔ Enter the output directory … storybook-repro
🏃 Running react into /Users/.../.../.../.../storybook-repro

🏃 Starting for react latest

🏗 Bootstrapping react project (this might take a few minutes)
mkdir storybook-repro && cd storybook-repro && touch yarn.lock && yarn init --yes && yarn add react react-dom
/bin/sh: yarn: command not found
An error occurred while executing: `mkdir storybook-repro && cd storybook-repro && touch yarn.lock && yarn init --yes && yarn add react react-dom`
🚨 Bootstrapping react failed
🚨 Failed to create repro
Error: Error: command exited with code: 127: 
    at repro (/Users/.../.npm/_npx/eebb2d3a7d26a7f1/node_modules/@storybook/cli/dist/cjs/repro.js:172:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Hope you can redirect me on what to do next to help run the repro. Thank you!

shilman · 2022-06-12T06:12:07Z

The repro script requires that you install yarn.

https://classic.yarnpkg.com/lang/en/docs/install/

sgrobert · 2022-06-12T06:30:10Z

Hi @shilman,

I've just installed yarn, and have attempted the following options to try to make it work. However, there is a new error being thrown:

Tried installing yarn v1.22.19. Then updated to yarn v2+.
Did a yarn install to setup the yarn.lock file but it didn't work.
Cleaned up the yarn.lock file to be an empty file to run, it still did not work.


$ npx sb@next repro
╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   🤗 Welcome to sb repro! 🤗                                                 │
│                                                                              │
│   Create a new project to minimally reproduce Storybook issues.              │
│                                                                              │
│   1. select an environment that most closely matches your project setup.     │
│   2. select a location for the reproduction, outside of your project.        │
│                                                                              │
│   After the reproduction is ready, we'll guide you through the next steps.   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
✔ 🌈 Select the repro framework › react
✔ 📝 Select the repro base template › react
✔ Enter the output directory … storybook-repro
🏃 Running react into /Users/.../.../.../.../storybook-repro

🏃 Starting for react latest

🏗 Bootstrapping react project (this might take a few minutes)
mkdir storybook-repro && cd storybook-repro && touch yarn.lock && yarn init --yes && yarn add react react-dom
{
  name: 'storybook-repro',
  packageManager: 'yarn@3.2.1'
}
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 1s 243ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ js-tokens@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ loose-envify@npm:1.4.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ react-dom@npm:18.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ react@npm:18.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ scheduler@npm:0.22.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: Done in 1s 305ms

🧶 Installing Yarn 2
yarn set version berry && yarn config set enableGlobalCache true && yarn config set nodeLinker node-modules
➤ YN0000: Retrieving https://repo.yarnpkg.com/3.2.1/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-3.2.1.cjs
➤ YN0000: Done in 0s 477ms
➤ YN0000: Successfully set enableGlobalCache to true
➤ YN0000: Successfully set nodeLinker to 'node-modules'

🌍 Adding needed deps & installing all deps
yarn add -D prop-types
Usage Error: The nearest package directory (/Users/.../.../.../.../storybook-repro) doesn't seem to be part of the project declared in /Users/.../.../.../.../.

- If /Users/.../.../.../.../ isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If /Users/.../.../.../.../ is intended to be a project, it might be that you forgot to list storybook-repro in its workspace configuration.
- Finally, if /Users/.../.../.../.../ is fine and you intend storybook-repro to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

$ yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
An error occurred while executing: `yarn add -D prop-types`
🚨 Dependencies installation failed
🚨 Failed to create repro
Error: Error: command exited with code: 1: 
    at repro (/Users/.../.npm/_npx/eebb2d3a7d26a7f1/node_modules/@storybook/cli/dist/cjs/repro.js:172:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

shilman · 2022-06-12T06:34:39Z

Is there a package.json in a directory above where you're trying to create the repro? It looks like there is and it's causing problems. Also you don't need to upgrade to yarn2--the repro script should take care of that. But it shouldn't cause problems AFAIK

sgrobert · 2022-06-12T06:42:51Z

Hi @shilman,

Yes. The current folder is where I ran all my work-related builds. Currently, there sit two builds within the same folder:

Main Codebase
Main Codebase's Storybook (For documentations pursposes)

Pardon me from asking, should I run the yarn commands elsewhere to help setup the repro, as I had presume the same folder would be the correct setup to run the yarn command, or should I just temporarily delete package.json in order to run yarn smoothly? And, given the case, should I leave the yarn.lock empty, as stated in the build instructions?

Please advise. Thank you!

shilman · 2022-06-12T06:47:58Z

You should run sb repro in fresh directory that doesn't contain any package.json and has no package.json in any parent directory

sgrobert · 2022-06-12T06:51:08Z

Hi @shilman,

Given so, do I have to manually copy pre-existing files over? As I was wondering how it may help replicate the "problem codes", if it sits on a separate new directory that is outside of the Project Folder.

Please do advise on the next steps. Thank you.

shilman · 2022-06-12T12:33:37Z

The repro script should provide a basic working storybook instance. Ideally you provide the minimal set of changes to demonstrate the problem. How you do that is up to you!

sgrobert · 2022-06-12T23:33:25Z

Hi @shilman,

I have just attempted a fresh repro installation, but was faced with a run error when I run either npm run storybook or yarn storybook.

...
[./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js] 2.88 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.69 KiB {vendors~main} [built]
    + 1379 hidden modules

ERROR in ./node_modules/@storybook/instrumenter/dist/esm/instrumenter.js 22:41
Module parse failed: Unexpected token (22:41)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   END: 'instrumenter/end'
| };
> const debuggerDisabled = global.FEATURES?.interactionsDebugger !== true;
| const controlsDisabled = {
|   debugger: !debuggerDisabled,
 @ ./node_modules/@storybook/instrumenter/dist/esm/index.js 1:0-52 1:0-52 1:0-52
 @ ./node_modules/@storybook/testing-library/dist/esm/index.js
 @ ./stories/Page.stories.jsx
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.25 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.05 KiB {HtmlWebpackPlugin_0} [built]
WARN Force closed manager build
ModuleParseError: Module parse failed: Unexpected token (22:41)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   END: 'instrumenter/end'
| };
> const debuggerDisabled = global.FEATURES?.interactionsDebugger !== true;
| const controlsDisabled = {
|   debugger: !debuggerDisabled,
    at handleParseError (/Users/.../.../.../storybook-repro/react/node_modules/webpack/lib/NormalModule.js:469:19)
    at /Users/.../.../.../storybook-repro/react/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/.../.../.../storybook-repro/react/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/.../.../.../storybook-repro/react/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/.../.../.../storybook-repro/react/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/.../.../.../storybook-repro/react/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/.../.../.../storybook-repro/react/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/.../.../.../storybook-repro/react/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/.../.../.../storybook-repro/react/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Loading presets
✔ Would you like to send crash reports to Storybook? … yes

(node:21054) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time

So, currently I am still unable to produce a repro repo for you to help vett.

shilman · 2022-06-13T00:34:51Z

@sgrobert what project type did you choose? can you share the exact steps you ran?

sgrobert · 2022-06-13T08:02:07Z

Hi @shilman,

Here is what I did:

Created a new folder away from my default project folder, named it storybook-repro.
Entered Terminal and ran command npx sb@next repro.
Selected react on 1st screen.
Selected react on 2nd screen.
Entered default react folder name.
Error was produced.

Here is the package.json file for reference:

{
  "name": "react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "packageManager": "yarn@3.2.1",
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.5.8",
    "@storybook/addon-docs": "^6.5.8",
    "@storybook/addon-essentials": "^6.5.8",
    "@storybook/addon-interactions": "^6.5.8",
    "@storybook/addon-links": "^6.5.8",
    "@storybook/builder-webpack4": "^6.5.8",
    "@storybook/manager-webpack4": "^6.5.8",
    "@storybook/react": "^6.5.8",
    "@storybook/testing-library": "^0.0.12",
    "babel-loader": "^8.2.5",
    "prop-types": "^15.8.1"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

sgrobert · 2022-06-24T07:19:37Z

Hi @shilman,

Since we are on the topic, may I ask is it recommended to migrate the build to v7 entirely since at the end of the day, it does seem like the current destination of the StorybookJS build. If I should, any recommended guides to follow through with the migration to v7, as I do know there are some changes like defaultValue is no longer used, like is there a replacement for it?

Hope you can help shed some light prior to my plans to start the mass migration.

Thanks!

sgrobert · 2022-06-27T05:53:29Z

Hi @shilman,

Just to give a follow-up on the list of issues I've found with the "broken MDX2 on Storybook build":

Unable to read characters < or > properly, which works fine on MDX1.
StorybookJS default UI "look" does not appear similar to the original Storybook build.
Bullet Points / Numbered Bullet Points not showing.
<code></code> Markdown does not work at all.
Internal Links will break the UI, where the sidebar disappears totally.
Internal Links for Anchor links do not work at all.
...

If you have more updates on how the above might be better resolved, please do assist. Thank you!

sgrobert · 2022-07-06T02:37:20Z

Hi @shilman,

Just an update that Storybook now loads and works but the caveat is that the UI is still breaking and does not reflect the usual Storybook UI.

Could you help to update me if there is a potential patch for this issue or is there a method how this issue can be temporary-patched on my end till the next major upgrade to v7.0?

Thank you.

leighnguyen · 2022-07-06T03:17:43Z

Just sharing a possible alternative solution for those not wanting to / not able to use MDX2.

I encountered almost all the issues in this thread, and what worked for us was essentially forcing Storybook 6.5.x to use MDX1 by declaring @mdx-js/react: ^1.6.22.

Related dependancies:


"dependencies": {
  "next": "^12.1.6",
  "react": "^18.2.0",
  "webpack": "^5.73.0",
  ...
},
"devDependencies": {
  "@mdx-js/react": "^1.6.22",
  "@storybook/addon-a11y": "^6.5.9",
  "@storybook/addon-docs": "^6.5.9",
  "@storybook/addon-essentials": "^6.5.9",
  "@storybook/addon-postcss": "^2.0.0",
  "@storybook/addons": "^6.5.9",
  "@storybook/builder-webpack5": "^6.5.9",
  "@storybook/manager-webpack5": "^6.5.9",
  "@storybook/react": "^6.5.9",
  "@storybook/theming": "^6.5.9",
  ...
},
"resolutions": {
  "@storybook/react/webpack": "^5.73.0",
  ...
}

Hope this helps someone else!

sgrobert · 2022-07-07T00:58:45Z

Hi @leighnguyen,

Thanks for being a lifesaver on this!

Downgraded to the following as recommended, and it works!


"@mdx-js/preact": "^1.6.22",
"@mdx-js/react": "^1.6.22",

Though I do understand from @shilman that the migration to MDX2 will be the next phase for StorybookJS v7.0, hopefully, the CSS plugs get resolved by then!

Thanks @leighnguyen once again for the help!

Closing this thread.

leads · 2022-09-16T15:41:05Z

I know this has been closed but just adding my findings to it.

The above change to dependency @mdx-js/preact didn't work for me. It created a horrible chain of dependency issues 🤪

To get it sorted I needed -
upgrade storybook - now using 6.5.12

installed:

"@storybook/addon-docs": "^6.5.12",
 "@storybook/mdx2-csf": "^0.0.3"

added the following to .storybook/main.js

  features: {
    previewMdx2: true,
  },

The mdx pages now work but styles are missing (eg fonts).

trystan2k · 2022-09-27T14:43:50Z

Same happens to me. I enabled MDX2 but lost all styles in MDX pages...

TomFreudenberg · 2022-10-26T01:41:35Z

If I use:

"@storybook/mdx2-csf": "^0.0.3"

and

features: {
  previewMdx2: true,
},

I get this error:

ModuleBuildError: Module build failed (from ./node_modules/.pnpm/babel-loader@8.2.5_@babel+core@7.19.6/node_modules/babel-loader/lib/index.js):

SyntaxError: ./stories/Introduction.stories.mdx: pragma and pragmaFrag cannot be set when runtime is automatic.

If I try to set config option "runtime": "classic" the storybook won't start anymore and hangs on build at 53%

Still no solution for Storybook 6.x and React18

shilman · 2022-10-26T01:43:22Z

@TomFreudenberg which builder? FWIW we've fully updated in 7.0-alpha and it seems to be working well

TomFreudenberg · 2022-10-26T01:46:09Z

@shillman Hi Michael,

I am using WebPack 5

On production I am not able to switch to alpha release currently - sorry

shilman · 2022-10-26T01:57:43Z

@TomFreudenberg Looks like this might be addressed here storybookjs/mdx2-csf#10. if i cut a release with that feature, would you be able to take it for a spin?

TomFreudenberg · 2022-10-26T02:00:28Z

For sure I do

Please let me know what to add / change for options in addition if necessary.

shilman · 2022-10-26T02:23:28Z

@TomFreudenberg On closer inspection that PR might be a red herring.

What does it look like when you go to the "Sources" tab in chrome and look at the compiled MDX source? I'm looking at an MDX2 Storybook now and it looks like this

Perhaps that is a clue for why your babel config is choking?

TomFreudenberg · 2022-10-26T02:28:51Z

@shilman I do not come to this point to check the source like that:

In the moment I enable MDX2 like in above comment #18383 (comment)

I can't start storybook anymore due to the pragmaError

If I don't enable MDX2, I got the error:

Introduction.stories.mdx:227 Uncaught TypeError: (0 , mdx_js_react__WEBPACK_IMPORTED_MODULE_12_.mdx) is not a function

shilman · 2022-10-26T02:34:56Z

@TomFreudenberg Ouch. Are you sure that you can't get MDX1 working with React 18? If this was a general problem I think I would've heard about it.

TomFreudenberg · 2022-10-26T02:40:16Z

@shilman, to be honest, I have not tried to enable MDX1 in our current environment. All I had read about that made myself a feeling of "too much (peer) dependencies" and so I left out MDX for our stories.

But for using DOCS addon it would be nice to have MDX working - that's why we brought it up again.

shilman · 2022-10-26T02:41:55Z

@TomFreudenberg If you're having problems I'd recommend skipping MDX for now. We are making huge improvements to MDX handling in 7.0 and fully switching over to MDX2 as well, so if you're looking to pick it up, that might be a better time to do it.

TomFreudenberg · 2022-10-26T02:43:34Z

Yes - agree - let's do it in this way!

Thanks for discussion and feedback Michael @shilman

shilman · 2022-10-26T02:45:38Z

@TomFreudenberg you're very welcome! sorry this was causing problems. hoping we can get to a "just works" state in 7.0 and keep major releases coming more frequently so we can avoid more weird peerDependency hacks in the future

marcusvalverde · 2022-11-09T22:23:21Z

@shilman I know its in alpha right now but do we have a tentative release date for V7?

shilman · 2022-11-10T02:58:46Z

@marcusvalverde rough ETA is beta in mid-december, RC/final in Q1 next year

divisnotabutton · 2023-03-06T15:17:14Z

Same error from composed storybook(

marcusvalverde · 2023-03-06T16:44:28Z

@marcusvalverde rough ETA is beta in mid-december, RC/final in Q1 next year

Cool cool , and by any chance are there plans to resolve the MDX stuff or the beta @shilman ?

shilman · 2023-03-06T16:46:18Z

@marcusvalverde AFAIK MDX2 is working great in the beta.

Migration guide: https://storybook.js.org/migration-guides/7.0

sgrobert added bug needs triage labels Jun 1, 2022

wenche mentioned this issue Jun 1, 2022

Upgrade pnpm to v8 equinor/energyvision#1051

Closed

shilman added question / support dependencies addon: docs mdx and removed bug needs triage labels Jun 6, 2022

shilman added this to the 6.5 stabilization milestone Jun 6, 2022

sgrobert changed the title ~~MDX Docs doesn't display after upgrades to React v18.1.0 + Storybook v6.5.6~~ MDX Docs doesn't display after upgrades to React v18.1.0 + Storybook v6.5.6 -> v6.5.7 -> v6.5.8 Jun 10, 2022

sgrobert closed this as completed Jul 7, 2022

sgrobert mentioned this issue Sep 28, 2022

MDX Docs' StorybookJS Default Theme Not Working After Upgrades to Storybook v7.0.0-alpha.34 with ReactJS v18.2.0 + NextJS v12.3.1 #19277

Open

jattasNI mentioned this issue Nov 15, 2022

Storybook Getting Started page has styling issues ni/nimble#825

Closed

1 task

kachkaev mentioned this issue Dec 13, 2022

Add Storybook boilerplate to design-system package hashintel/hash#1660

Merged

oddvernes mentioned this issue Feb 1, 2023

⬆️ Upgrade storybook 7.0 (previously mdx 2) equinor/design-system#2514

Closed

RedDevilus mentioned this issue Feb 27, 2023

build(deps): bump @mdx-js/react from 1.6.22 to 2.3.0 PCSX2/pcsx2-net-www#204

Open

MDX Docs doesn't display after upgrades to React v18.1.0 + Storybook v6.5.6 -> v6.5.7 -> v6.5.8 -> v6.5.9 #18383

MDX Docs doesn't display after upgrades to React v18.1.0 + Storybook v6.5.6 -> v6.5.7 -> v6.5.8 -> v6.5.9 #18383

Comments

sgrobert commented Jun 1, 2022 • edited

arlukin commented Jun 5, 2022

sgrobert commented Jun 6, 2022

shilman commented Jun 6, 2022

sgrobert commented Jun 6, 2022

sgrobert commented Jun 10, 2022

shilman commented Jun 10, 2022

sgrobert commented Jun 10, 2022

shilman commented Jun 12, 2022

sgrobert commented Jun 12, 2022

shilman commented Jun 12, 2022 • edited

sgrobert commented Jun 12, 2022

shilman commented Jun 12, 2022

sgrobert commented Jun 12, 2022

shilman commented Jun 12, 2022

sgrobert commented Jun 12, 2022

shilman commented Jun 12, 2022

sgrobert commented Jun 12, 2022

shilman commented Jun 13, 2022 • edited

sgrobert commented Jun 13, 2022

sgrobert commented Jun 24, 2022

sgrobert commented Jun 27, 2022

sgrobert commented Jul 6, 2022

leighnguyen commented Jul 6, 2022

sgrobert commented Jul 7, 2022

leads commented Sep 16, 2022

trystan2k commented Sep 27, 2022

TomFreudenberg commented Oct 26, 2022

shilman commented Oct 26, 2022

TomFreudenberg commented Oct 26, 2022

shilman commented Oct 26, 2022

TomFreudenberg commented Oct 26, 2022

shilman commented Oct 26, 2022

TomFreudenberg commented Oct 26, 2022

shilman commented Oct 26, 2022

TomFreudenberg commented Oct 26, 2022

shilman commented Oct 26, 2022 • edited

TomFreudenberg commented Oct 26, 2022

shilman commented Oct 26, 2022

marcusvalverde commented Nov 9, 2022

shilman commented Nov 10, 2022

divisnotabutton commented Mar 6, 2023

marcusvalverde commented Mar 6, 2023

shilman commented Mar 6, 2023

sgrobert commented Jun 1, 2022 •

edited

shilman commented Jun 12, 2022 •

edited

shilman commented Jun 13, 2022 •

edited

shilman commented Oct 26, 2022 •

edited