Inject mdx compiler for mdx1 (#556)

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.

Author: IanVS

examples/lit-ts/.storybook/main.cjs

@@ -1,3 +1,4 @@
+const path = require('node:path');
 const { mergeConfig } = require('vite');
 const postcssLit = require('rollup-plugin-postcss-lit');
 
@@ -18,6 +19,16 @@ module.exports = {
     return mergeConfig(config, {
       // prettier-ignore
       plugins: [postcssLit({ include: ['**/*.scss', '**/*.scss\?*'] })],
+      // because rollup does not respect NODE_PATH, and we have a funky example setup that needs it
+      build: {
+        rollupOptions: {
+          plugins: {
+            resolveId: function (code) {
+              if (code === 'react') return path.resolve(require.resolve('react'));
+            },
+          },
+        },
+      },
     });
   },
 };

examples/lit-ts/yarn.lock

@@ -2732,7 +2732,7 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@storybook/core-common": ^6.4.3
-    "@storybook/mdx1-csf": ^1.0.0-next.0
+    "@storybook/mdx1-csf": 1.0.0-next.0
     "@storybook/node-logger": ^6.4.3
     "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
@@ -3220,6 +3220,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/mdx1-csf@npm:1.0.0-next.0":
+  version: 1.0.0-next.0
+  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
+  dependencies:
+    "@mdx-js/mdx": ^1.6.22
+    "@mdx-js/react": ^1.6.22
+  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
+  languageName: node
+  linkType: hard
+
 "@storybook/mdx1-csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/mdx1-csf@npm:0.0.1"
@@ -3239,16 +3249,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/mdx1-csf@npm:^1.0.0-next.0":
-  version: 1.0.0-next.0
-  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
-  dependencies:
-    "@mdx-js/mdx": ^1.6.22
-    "@mdx-js/react": ^1.6.22
-  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
-  languageName: node
-  linkType: hard
-
 "@storybook/node-logger@npm:6.5.12, @storybook/node-logger@npm:^6.4.3":
   version: 6.5.12
   resolution: "@storybook/node-logger@npm:6.5.12"

examples/preact/.storybook/main.cjs

@@ -1,3 +1,5 @@
+const path = require('node:path');
+
 module.exports = {
   framework: '@storybook/preact',
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -7,4 +9,16 @@ module.exports = {
     // we don't want to muck up the data when we're working on the builder
     disableTelemetry: true,
   },
+  async viteFinal(config) {
+    // because rollup does not respect NODE_PATH, and we have a funky example setup that needs it
+    config.build.rollupOptions = {
+      plugins: {
+        resolveId: function (code) {
+          if (code === 'react') return path.resolve(require.resolve('react'));
+          if (code === 'preact/compat') return path.resolve(require.resolve('preact/compat'));
+        },
+      },
+    };
+    return config;
+  },
 };

examples/preact/yarn.lock

@@ -2755,7 +2755,7 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@storybook/core-common": ^6.4.3
-    "@storybook/mdx1-csf": ^1.0.0-next.0
+    "@storybook/mdx1-csf": 1.0.0-next.0
     "@storybook/node-logger": ^6.4.3
     "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
@@ -3243,6 +3243,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/mdx1-csf@npm:1.0.0-next.0":
+  version: 1.0.0-next.0
+  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
+  dependencies:
+    "@mdx-js/mdx": ^1.6.22
+    "@mdx-js/react": ^1.6.22
+  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
+  languageName: node
+  linkType: hard
+
 "@storybook/mdx1-csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/mdx1-csf@npm:0.0.1"
@@ -3262,16 +3272,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/mdx1-csf@npm:^1.0.0-next.0":
-  version: 1.0.0-next.0
-  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
-  dependencies:
-    "@mdx-js/mdx": ^1.6.22
-    "@mdx-js/react": ^1.6.22
-  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
-  languageName: node
-  linkType: hard
-
 "@storybook/node-logger@npm:6.5.12, @storybook/node-logger@npm:^6.4.3":
   version: 6.5.12
   resolution: "@storybook/node-logger@npm:6.5.12"

examples/react-18/.storybook/main.cjs

@@ -1,3 +1,5 @@
+const path = require('node:path');
+
 module.exports = {
   framework: '@storybook/react',
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -10,8 +12,15 @@ module.exports = {
   features: {
     storyStoreV7: true,
   },
-  async viteFinal(config, { configType }) {
-    // customize the Vite config here
+  async viteFinal(config) {
+    // because rollup does not respect NODE_PATH
+    config.build.rollupOptions = {
+      plugins: {
+        resolveId: function (code, id) {
+          if (code === 'react') return path.resolve(require.resolve('react'));
+        },
+      },
+    };
     return config;
   },
 };

examples/react-18/yarn.lock

@@ -2802,7 +2802,7 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@storybook/core-common": ^6.4.3
-    "@storybook/mdx1-csf": ^1.0.0-next.0
+    "@storybook/mdx1-csf": 1.0.0-next.0
     "@storybook/node-logger": ^6.4.3
     "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
@@ -3290,6 +3290,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/mdx1-csf@npm:1.0.0-next.0":
+  version: 1.0.0-next.0
+  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
+  dependencies:
+    "@mdx-js/mdx": ^1.6.22
+    "@mdx-js/react": ^1.6.22
+  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
+  languageName: node
+  linkType: hard
+
 "@storybook/mdx1-csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/mdx1-csf@npm:0.0.1"
@@ -3309,16 +3319,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/mdx1-csf@npm:^1.0.0-next.0":
-  version: 1.0.0-next.0
-  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
-  dependencies:
-    "@mdx-js/mdx": ^1.6.22
-    "@mdx-js/react": ^1.6.22
-  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
-  languageName: node
-  linkType: hard
-
 "@storybook/node-logger@npm:6.5.16, @storybook/node-logger@npm:^6.4.3":
   version: 6.5.16
   resolution: "@storybook/node-logger@npm:6.5.16"

examples/react-ts/.storybook/main.cjs

@@ -1,3 +1,5 @@
+const path = require('node:path');
+
 module.exports = {
   framework: '@storybook/react',
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -10,8 +12,15 @@ module.exports = {
   features: {
     storyStoreV7: true,
   },
-  async viteFinal(config, { configType }) {
-    // customize the Vite config here
+  async viteFinal(config) {
+    // because rollup does not respect NODE_PATH, and we have a funky example setup that needs it
+    config.build.rollupOptions = {
+      plugins: {
+        resolveId: function (code) {
+          if (code === 'react') return path.resolve(require.resolve('react'));
+        },
+      },
+    };
     return config;
   },
 };

examples/react-ts/yarn.lock

@@ -2990,7 +2990,7 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@storybook/core-common": ^6.4.3
-    "@storybook/mdx1-csf": ^1.0.0-next.0
+    "@storybook/mdx1-csf": 1.0.0-next.0
     "@storybook/node-logger": ^6.4.3
     "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
@@ -3478,6 +3478,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/mdx1-csf@npm:1.0.0-next.0":
+  version: 1.0.0-next.0
+  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
+  dependencies:
+    "@mdx-js/mdx": ^1.6.22
+    "@mdx-js/react": ^1.6.22
+  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
+  languageName: node
+  linkType: hard
+
 "@storybook/mdx1-csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/mdx1-csf@npm:0.0.1"
@@ -3497,16 +3507,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/mdx1-csf@npm:^1.0.0-next.0":
-  version: 1.0.0-next.0
-  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
-  dependencies:
-    "@mdx-js/mdx": ^1.6.22
-    "@mdx-js/react": ^1.6.22
-  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
-  languageName: node
-  linkType: hard
-
 "@storybook/node-logger@npm:6.5.12, @storybook/node-logger@npm:^6.4.3":
   version: 6.5.12
   resolution: "@storybook/node-logger@npm:6.5.12"

examples/react/.storybook/main.cjs

@@ -1,3 +1,5 @@
+const path = require('node:path');
+
 module.exports = {
   framework: '@storybook/react',
   stories: ['../stories/**/*stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -12,6 +14,14 @@ module.exports = {
     previewMdx2: true,
   },
   async viteFinal(config) {
+    // because rollup does not respect NODE_PATH, and we have a funky example setup that needs it
+    config.build.rollupOptions = {
+      plugins: {
+        resolveId: function (code) {
+          if (code === 'react') return path.resolve(require.resolve('react'));
+        },
+      },
+    };
     return config;
   },
 };

examples/react/yarn.lock

@@ -2824,7 +2824,7 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@storybook/core-common": ^6.4.3
-    "@storybook/mdx1-csf": ^1.0.0-next.0
+    "@storybook/mdx1-csf": 1.0.0-next.0
     "@storybook/node-logger": ^6.4.3
     "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
@@ -3312,6 +3312,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/mdx1-csf@npm:1.0.0-next.0":
+  version: 1.0.0-next.0
+  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
+  dependencies:
+    "@mdx-js/mdx": ^1.6.22
+    "@mdx-js/react": ^1.6.22
+  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
+  languageName: node
+  linkType: hard
+
 "@storybook/mdx1-csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/mdx1-csf@npm:0.0.1"
@@ -3331,16 +3341,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/mdx1-csf@npm:^1.0.0-next.0":
-  version: 1.0.0-next.0
-  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
-  dependencies:
-    "@mdx-js/mdx": ^1.6.22
-    "@mdx-js/react": ^1.6.22
-  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
-  languageName: node
-  linkType: hard
-
 "@storybook/mdx2-csf@npm:next":
   version: 1.0.0-next.5
   resolution: "@storybook/mdx2-csf@npm:1.0.0-next.5"

examples/svelte/.storybook/main.cjs

@@ -1,4 +1,4 @@
-const preprocess = require('svelte-preprocess');
+const path = require('node:path');
 
 module.exports = {
   framework: '@storybook/svelte',
@@ -13,8 +13,15 @@ module.exports = {
     // On-demand store does not work for .svelte stories, only CSF.
     storyStoreV7: false,
   },
-  async viteFinal(config, { configType }) {
-    // customize the Vite config here
+  async viteFinal(config) {
+    // because rollup does not respect NODE_PATH, and we have a funky example setup that needs it
+    config.build.rollupOptions = {
+      plugins: {
+        resolveId: function (code) {
+          if (code === 'react') return path.resolve(require.resolve('react'));
+        },
+      },
+    };
     return config;
   },
   // @ts-ignore

examples/svelte/yarn.lock

@@ -2741,7 +2741,7 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@storybook/core-common": ^6.4.3
-    "@storybook/mdx1-csf": ^1.0.0-next.0
+    "@storybook/mdx1-csf": 1.0.0-next.0
     "@storybook/node-logger": ^6.4.3
     "@storybook/semver": ^7.3.2
     "@storybook/source-loader": ^6.4.3
@@ -3229,6 +3229,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/mdx1-csf@npm:1.0.0-next.0":
+  version: 1.0.0-next.0
+  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
+  dependencies:
+    "@mdx-js/mdx": ^1.6.22
+    "@mdx-js/react": ^1.6.22
+  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
+  languageName: node
+  linkType: hard
+
 "@storybook/mdx1-csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/mdx1-csf@npm:0.0.1"
@@ -3248,16 +3258,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/mdx1-csf@npm:^1.0.0-next.0":
-  version: 1.0.0-next.0
-  resolution: "@storybook/mdx1-csf@npm:1.0.0-next.0"
-  dependencies:
-    "@mdx-js/mdx": ^1.6.22
-    "@mdx-js/react": ^1.6.22
-  checksum: 4524619df9f412d93e37df05bcdcef40bf3337b8de181a5bcc7ab2051f7afc96e8b9bf4bef8e078d470df81cc4d9d01315cd840e358ca3bfb1102efd595720cd
-  languageName: node
-  linkType: hard
-
 "@storybook/node-logger@npm:6.5.12, @storybook/node-logger@npm:^6.4.3":
   version: 6.5.12
   resolution: "@storybook/node-logger@npm:6.5.12"