Fully support Vite 4, remove @vitejs/plugin-react, update @storybook/mdx1-csf

[IanVS]

Fixes #547

This also updates the version of mdx1-csf to one that no longer requires the use of the react vite plugin to compile jsx, it handles compilation itself. So, we no longer need to include @vitejs/plugin-react in all projects, and react projects will need to make sure it's installed. That makes this a breaking change.

And this also updates Vite to 4 in the examples, and fixes some missing dependencies.

[IanVS]

@joshwooding, any idea what would be causing the parse errors in this PR? I don't recall seeing this before.

[IanVS]

Oh right, we had a problem with the original approach in storybook 7 as well when we tried to support Vite 4. The results of sending MDX through the vite react-plugin still contain JSX at the end, whereas previously all the jsx was converted to javascript. We never really figured out a solution to this in SB 7, we punted and said we'd only support MDX2, and we updated the way that mdx2-csf works so that it can handle jsx on its own (storybookjs/mdx2-csf#30). Maybe we need to do the same thing to mdx1-csf? @ndelangen do you think that would be possible? I also heard that SB 7 might need to continue supporting mdx-1 in an opt-in way, so I think that change to mdx1-csf might be needed regardless.

Note: I've confirmed that using @storybook/mdx2-csf@next works here in the react example. I'm not sure why storybookjs/mdx2-csf#30 required a major version bump, I don't think it was breaking. But we could say that in order to use mdx2, the version must be 1.0.0-next.0+. We still need a solution for mdx1 though.

[ndelangen]

Yes @IanVS @shilman and I looked at that this morning.. MDX1 support in 7.0 will make a come-back.

[socket-security]

Socket Security Pull Request Report

Dependency issues detected. If you merge this pull request, you will not be alerted to the instances of these issues again.

⚠️ Uses eval

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Avoid packages that use eval, since this could potentially execute any code.

Package	Eval Type	Location	Source
@storybook/mdx1-csf@1.0.0-next.0 (added)	Function	dist/index.js	packages/builder-vite/package.json
@storybook/mdx1-csf@1.0.0-next.0 (added)	Function	dist/index.mjs	packages/builder-vite/package.json
@storybook/router@6.5.16 (added)	Function	dist/cjs/index.js	examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-actions@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/client-api@6.5.16, @storybook/source-loader@6.5.16
@storybook/router@6.5.16 (added)	Function	dist/esm/index.js	examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-actions@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/client-api@6.5.16, @storybook/source-loader@6.5.16
@storybook/router@6.5.16 (added)	Function	dist/modern/index.js	examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-actions@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/client-api@6.5.16, @storybook/source-loader@6.5.16
@storybook/router@6.5.9 (added)	Function	dist/cjs/index.js	examples/vue3/package.json via @storybook/addon-interactions@6.5.9, @storybook/jest@0.0.10, @storybook/testing-library@0.0.13, @storybook/vue3@6.5.9
@storybook/router@6.5.9 (added)	Function	dist/esm/index.js	examples/vue3/package.json via @storybook/addon-interactions@6.5.9, @storybook/jest@0.0.10, @storybook/testing-library@0.0.13, @storybook/vue3@6.5.9
@storybook/router@6.5.9 (added)	Function	dist/modern/index.js	examples/vue3/package.json via @storybook/addon-interactions@6.5.9, @storybook/jest@0.0.10, @storybook/testing-library@0.0.13, @storybook/vue3@6.5.9
@storybook/ui@6.5.9 (added)	Function	dist/cjs/index.js	examples/vue3/package.json via @storybook/vue3@6.5.9
@storybook/ui@6.5.9 (added)	Function	dist/esm/index.js	examples/vue3/package.json via @storybook/vue3@6.5.9
@storybook/ui@6.5.9 (added)	Function	dist/modern/index.js	examples/vue3/package.json via @storybook/vue3@6.5.9
@sveltejs/vite-plugin-svelte@1.0.8 (added)	Function	dist/index.cjs	examples/svelte/package.json via @storybook/builder-vite@0.3.0
@sveltejs/vite-plugin-svelte@1.0.8 (added)	Function	dist/index.js	examples/svelte/package.json via @storybook/builder-vite@0.3.0
@vue/compiler-core@3.2.45 (added)	Function	dist/compiler-core.esm-bundler.js	examples/vue2.6/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/compiler-dom@3.2.45 (added)	Function	dist/compiler-dom.cjs.js	examples/vue2.6/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/compiler-dom@3.2.45 (added)	Function	dist/compiler-dom.cjs.prod.js	examples/vue2.6/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/compiler-sfc@2.7.14 (added)	Function	dist/compiler-sfc.js	examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@2.7.14 (added)	Function	dist/compiler-sfc.js	examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@2.7.14 (added)	Function	dist/compiler-sfc.js	examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@2.7.14 (added)	Function	dist/compiler-sfc.js	examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@2.7.14 (added)	Function	dist/compiler-sfc.js	examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@3.2.45 (added)	Function	dist/compiler-sfc.cjs.js	examples/vue2.6/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/server-renderer@3.2.45 (added)	Function	dist/server-renderer.cjs.js	examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/server-renderer@3.2.45 (added)	Function	dist/server-renderer.cjs.prod.js	examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
ajv@6.12.6 (added)	Function	dist/ajv.bundle.js	examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, vue-loader@15.10.1, examples/vue2.7/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, vue-loader@16.8.3, examples/vue3/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-interactions@6.5.9, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, @storybook/vue3@6.5.9, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/core-common@6.5.16, @typescript-eslint/eslint-plugin@5.50.0, @typescript-eslint/parser@5.50.0, eslint@8.33.0, eslint-config-prettier@8.6.0, eslint-plugin-storybook@0.6.10, sveltedoc-parser@4.3.1
ajv@6.12.6 (added)	Function	lib/compile/index.js	examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, vue-loader@15.10.1, examples/vue2.7/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, vue-loader@16.8.3, examples/vue3/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-interactions@6.5.9, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, @storybook/vue3@6.5.9, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/core-common@6.5.16, @typescript-eslint/eslint-plugin@5.50.0, @typescript-eslint/parser@5.50.0, eslint@8.33.0, eslint-config-prettier@8.6.0, eslint-plugin-storybook@0.6.10, sveltedoc-parser@4.3.1
bluebird@3.7.2 (added)	Function	js/release/call_get.js	examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-essentials@6.5.16, [@storybook/builder-vite@0.3.0](https://socket.dev/npm/package/@storybook/builder-

[IanVS]

I'm not sure what's happening in the Workspaces example, something to do with the structure of the monorepo-within-a-monorepo, maybe.

With the latest changes, we can support mdx1 and mdx2. I've also removed the addition of @vitejs/plugin-react from all projects since it is no longer required to process mdx. This makes this a breaking change, since react users will need to be sure that the plugin is installed in their projects, just like for the other frameworks.