Addon-docs: Fix MDX compilation with @vitejs/plugin-react-swc
and plugins
#26837
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #24857
What I did
Moved the MDX Vite plugin to the start of the plugins-array instead of the end.
The MDX plugin must run before any React plugins to work. In 99 % of the cases it is because we have
enforce: 'pre'
defined in the plugin. However when:@vitejs/plugin-react-swc
react({ plugins: [] })
Our MDX plugin is runned after
@vitejs/plugin-react-swc
, causing build (but now dev) to crash.This is because we get into this case in
@vitejs/plugin-react-swc
, where they also addenforce: 'pre'
, causing it to run before our MDX plugin. The fix is to add it to the beginning of the array instead of the end. Also see this condition in@vitejs/plugin-react-swc
where they explicitly check for this case, except with the official MDX Vite plugin and not ours of course.I can't come up with any downsides to this fix, as this shouldn't really change anything for most users AFAIK. I've tested it in basic situations with React+Vite without issues.
Side-note: I wonder if in the future we could just use the MDX Vite plugin directly instead of creating our own (extremely thin) wrapper around the low-level MDX compiler. 🤔 I can imagine it solving the problem better, ie. supporting source maps.
Checklist for Contributors
Testing
I think the only way to truly test this would be to have a sandbox with this scenario, but that's definitely not worth it.
The changes in this PR are covered in the following automated tests:
Manual testing
npm create vite
vite.config.ts
, change the lineplugins: [react()],
toplugins: [react({ plugins: [] })]
,npx http-serve storybook-static -c-1h
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal
,ci:merged
orci:daily
GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
bug
: Internal changes that fixes incorrect behavior.maintenance
: User-facing maintenance tasks.dependencies
: Upgrading (sometimes downgrading) dependencies.build
: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup
: Minor cleanup style change. Will not show up in release changelog.documentation
: Documentation only changes. Will not show up in release changelog.feature request
: Introducing a new feature.BREAKING CHANGE
: Changes that break compatibility in some way with current major version.other
: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-26837-sha-6fdb569c
. Try it out in a new sandbox by runningnpx storybook@0.0.0-pr-26837-sha-6fdb569c sandbox
or in an existing project withnpx storybook@0.0.0-pr-26837-sha-6fdb569c upgrade
.More information
0.0.0-pr-26[8](https://github.com/storybookjs/storybook/actions/runs/8680911801/job/23802522844#step:10:8)37-sha-6fdb56[9](https://github.com/storybookjs/storybook/actions/runs/8680911801/job/23802522844#step:10:9)c
jeppe/24857-bug-mdx-compilation-breaks-when-using-vitejsplugin-react-swc-and-extending-its-plugins
6fdb569c
1713123564
)To request a new release of this pull request, mention the
@storybookjs/core
team.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=26837