Inject mdx compiler for mdx1

[IanVS]

fixes #557

I found that mdx was not working correctly here, and @valentinpalkovic realized my fallback in Storybook 7 wasn't either (storybookjs/storybook#20823). It was because we used to inject the mdx compiler into the source code that we get back from the @storybook/mdx1-csf compiler, but we lost that in https://github.com/storybookjs/builder-vite/pull/548/files#diff-f2dfc4dfa9074d77a728a88e6629a1d66be8a0765cab8562526cd00fbae910e5L6. This re-introduces it, with a bit better of a guarantee that the correct version is going to be loaded, by starting from inside @storybook/mdx1-csf.

I've also pinned mdx1-csf here, in case the import is moved from the loader to the compiler, as @shilman has suggested doing. We'll need to adjust this if that happens.

[IanVS]

Hm, based on the CI failures we might need to also require react to be a peer dependency like we do in SB 7. :-/

[joshwooding]

Looks good. :)

[IanVS]

Turns out that rollup does not respect NODE_PATH, so we need to do a bit of resolution hackery to get it to resolve react relative to the example, and not from within builder-vite's node_modules. Normal projects will not need to worry about this, it's just due to our non-standard multi-project example structure.

[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.

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package	Script field	Source
@swc/[email protected] (upgraded)	postinstall	examples/react-18/package.json via @vitejs/[email protected], packages/builder-vite/package.json via @vitejs/[email protected]

⚠️ New author

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights.

Package	New Author	Previous Author	Source
[email protected] (upgraded)	nicolo-ribaudo	google-wombot	examples/lit-ts/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/preact/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/react/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/react-18/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/react-ts/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/svelte/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/vue2.6/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/vue2.7/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/vue3/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], examples/workspaces/package.json via @storybook/[email protected], examples/workspaces/packages/catalog/package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], packages/builder-vite/package.json via @storybook/[email protected], @storybook/[email protected]

Pull request report summary

Issue	Status
Install scripts	⚠️ 1 issue
Native code	✅ 0 issues
Bin script confusion	✅ 0 issues
Bin script shell injection	✅ 0 issues
Shell access	✅ 0 issues
Uses eval	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
GitHub dependency	✅ 0 issues
New author	⚠️ 1 issue
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues
AI detected malware	✅ 0 issues

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] [email protected]

• @SocketSecurity ignore @swc/[email protected]
• @SocketSecurity ignore [email protected]

Powered by socket.dev

[IanVS]

@joshwooding I'm having trouble with Windows here. Any chance you can give this a shot?

[zhyd1997]

Hi @IanVS

from issue 21023

CI passed when enabled previewMdx2:

https://github.com/zhyd1997/builder-vite/pull/2/files/5e198d79e680ddc8047238a8e8e6f0ffe83c2ab6..824c0585f12824f6f08a18f2d526dcfe81673987

so maybe this is mdx1-csf transform issue: 👀

builder-vite/packages/builder-vite/plugins/mdx-plugin.ts

Lines 20 to 26 in 4d49af6

	async transform(src, id) {
	if (id.match(/\.mdx?$/)) {
	// @ts-ignore
	const { compile } = features?.previewMdx2
	? await import('@storybook/mdx2-csf')
	: await import('@storybook/mdx1-csf');

[IanVS]

Yes, mdx1 requires us to inject an import into the code, and the yarn portal we are using for the examples doesn't seem to be working very well, because imports in builder-vite are not resolving back to the example's node_modules without some help. It's working fine on posix systems, but not windows. I'm tempted to merge anyway and hope that Josh can get our CI green later. It's only an issue in our examples I believe.