diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index a36f6440594d..1f479b45d33a 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -47,7 +47,6 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/source-loader": "workspace:*",
     "estraverse": "^5.2.0",
     "tiny-invariant": "^1.3.1"
   },
@@ -57,6 +56,7 @@
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/router": "workspace:*",
+    "@storybook/source-loader": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@types/react": "^16.14.34",
     "@types/react-syntax-highlighter": "11.0.5",
diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index ec0aaa1d52a9..aed7a531ee32 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -12,18 +12,15 @@ const logger = console;
 export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
   return {
     name: 'unplugin-csf',
-    transformInclude(id) {
+    enforce: 'pre',
+    loadInclude(id) {
       return STORIES_REGEX.test(id);
     },
-    async transform(code, id) {
-      const sourceCode = await fs.readFile(id, 'utf-8');
+    async load(fname) {
+      const code = await fs.readFile(fname, 'utf-8');
       try {
-        const makeTitle = (userTitle: string) => userTitle || 'default';
-        const csf = loadCsf(code, { makeTitle }).parse();
-        const csfSource = loadCsf(sourceCode, {
-          makeTitle,
-        }).parse();
-        enrichCsf(csf, csfSource, options);
+        const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
+        enrichCsf(csf, options);
         return formatCsf(csf, { sourceMaps: true });
       } catch (err: any) {
         // This can be called on legacy storiesOf files, so just ignore
diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
index d793f730cecc..a8f5f3aaa09c 100644
--- a/code/lib/csf-tools/src/enrichCsf.test.ts
+++ b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -11,16 +11,11 @@ expect.addSnapshotSerializer({
   test: (val) => true,
 });
 
-const enrich = (code: string, originalCode: string, options?: EnrichCsfOptions) => {
+const enrich = (code: string, options?: EnrichCsfOptions) => {
   // we don't actually care about the title
 
-  const csf = loadCsf(code, {
-    makeTitle: (userTitle) => userTitle || 'default',
-  }).parse();
-  const csfSource = loadCsf(originalCode, {
-    makeTitle: (userTitle) => userTitle || 'default',
-  }).parse();
-  enrichCsf(csf, csfSource, options);
+  const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
+  enrichCsf(csf, options);
   return formatCsf(csf);
 };
 
@@ -28,28 +23,17 @@ describe('enrichCsf', () => {
   describe('source', () => {
     it('csf1', () => {
       expect(
-        enrich(
-          dedent`
-          // compiled code
+        enrich(dedent`
           export default {
            title: 'Button',
           }
-          export const Basic = () => React.createElement(Button)
-        `,
-          dedent`
-        // original code
-        export default {
-         title: 'Button',
-        }
-        export const Basic = () => <Button />
-      `
-        )
+          export const Basic = () => <Button />
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -64,32 +48,19 @@ describe('enrichCsf', () => {
     });
     it('csf2', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-          title: 'Button',
-        }
-        const Template = (args) => React.createElement(Button, args);
-        export const Basic = Template.bind({});
-        Basic.parameters = { foo: 'bar' }
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           export default {
             title: 'Button',
           }
           const Template = (args) => <Button {...args} />
           export const Basic = Template.bind({});
           Basic.parameters = { foo: 'bar' }
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
-        const Template = args => React.createElement(Button, args);
+        const Template = args => <Button {...args} />;
         export const Basic = Template.bind({});
         Basic.parameters = {
           foo: 'bar'
@@ -108,26 +79,15 @@ describe('enrichCsf', () => {
     });
     it('csf3', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-          title: 'Button',
-        }
-        export const Basic = { parameters: { foo: 'bar' } }
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           export default {
             title: 'Button',
           }
           export const Basic = {
             parameters: { foo: 'bar' }
           }
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
@@ -150,26 +110,14 @@ describe('enrichCsf', () => {
     });
     it('multiple stories', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-          title: 'Button',
-        }
-        export const A = {}
-        export const B = {}
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           export default {
             title: 'Button',
           }
           export const A = {}
           export const B = {}
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
@@ -202,31 +150,19 @@ describe('enrichCsf', () => {
   describe('story descriptions', () => {
     it('skips inline comments', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-         title: 'Button',
-        }
-        // The most basic button
-        export const Basic = () => React.createElement(Button);
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           export default {
            title: 'Button',
           }
           // The most basic button
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
         // The most basic button
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -242,29 +178,19 @@ describe('enrichCsf', () => {
 
     it('skips blocks without jsdoc', () => {
       expect(
-        enrich(
-          dedent`
-          // compiled code
-          export default {
-           title: 'Button',
-          }
-          export const Basic = () => React.createElement(Button)
-        `,
-          dedent`
-          // original code
+        enrich(dedent`
           export default {
            title: 'Button',
           }
           /* The most basic button */
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement(Button);
+        /* The most basic button */
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -280,29 +206,19 @@ describe('enrichCsf', () => {
 
     it('JSDoc single-line', () => {
       expect(
-        enrich(
-          dedent`
-          // compiled code
-          export default {
-           title: 'Button',
-          }
-          export const Basic = () => React.createElement(Button);
-        `,
-          dedent`
-          // original code
+        enrich(dedent`
           export default {
            title: 'Button',
           }
           /** The most basic button */
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement(Button);
+        /** The most basic button */
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -322,16 +238,7 @@ describe('enrichCsf', () => {
 
     it('JSDoc multi-line', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-         title: 'Button',
-        }
-        export const Basic = () => React.createElement(Button);
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           export default {
            title: 'Button',
           }
@@ -341,14 +248,17 @@ describe('enrichCsf', () => {
            * In a block!
            */
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement(Button);
+        /**
+         * The most basic button
+         * 
+         * In a block!
+         */
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -368,33 +278,27 @@ describe('enrichCsf', () => {
 
     it('preserves indentation', () => {
       expect(
-        enrich(
-          dedent`
-          // compiled code
+        enrich(dedent`
           export default {
            title: 'Button',
           }
-          export const Basic = () => React.createElement(Button);
-        `,
-          dedent`
-        // original code
+          /**
+           * - A bullet list
+           *   - A sub-bullet
+           * - A second bullet
+           */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
         export default {
-         title: 'Button',
-        }
+          title: 'Button'
+        };
         /**
          * - A bullet list
          *   - A sub-bullet
          * - A second bullet
          */
-        export const Basic = () => <Button />
-      `
-        )
-      ).toMatchInlineSnapshot(`
-        // compiled code
-        export default {
-          title: 'Button'
-        };
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -416,29 +320,19 @@ describe('enrichCsf', () => {
   describe('meta descriptions', () => {
     it('skips inline comments', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-          title: 'Button',
-        }
-        export const Basic = () => React.createElement(Button);
-        `,
-          dedent`
-        // original code
+        enrich(dedent`
         // The most basic button
         export default {
-          title: 'Button',
-        }
-        export const Basic = () => <Button />
-        `
-        )
+           title: 'Button',
+          }
+          export const Basic = () => <Button />
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
+        // The most basic button
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -454,29 +348,19 @@ describe('enrichCsf', () => {
 
     it('skips blocks without jsdoc', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-         title: 'Button',
-        }
-        export const Basic = () => React.createElement();
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           /* The most basic button */
           export default {
            title: 'Button',
           }
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
+        /* The most basic button */
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement();
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -492,25 +376,15 @@ describe('enrichCsf', () => {
 
     it('JSDoc single-line', () => {
       expect(
-        enrich(
-          dedent`
-          // compiled code
-          export default {
-           title: 'Button'
-          }
-          export const Basic = () => React.createElement(Button)
-        `,
-          dedent`
-          // original code
+        enrich(dedent`
           /** The most basic button */
           export default {
            title: 'Button'
           }
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
+        /** The most basic button */
         export default {
           title: 'Button',
           parameters: {
@@ -521,7 +395,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -537,16 +411,7 @@ describe('enrichCsf', () => {
 
     it('JSDoc multi-line', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-         title: 'Button',
-        }
-        export const Basic = () => React.createElement();
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           /**
            * The most basic button
            * 
@@ -556,10 +421,13 @@ describe('enrichCsf', () => {
            title: 'Button',
           }
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
+        /**
+         * The most basic button
+         * 
+         * In a block!
+         */
         export default {
           title: 'Button',
           parameters: {
@@ -570,7 +438,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => React.createElement();
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -586,16 +454,7 @@ describe('enrichCsf', () => {
 
     it('preserves indentation', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-         title: 'Button',
-        }
-        export const Basic = () => React.createElement(Button);
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           /**
            * - A bullet list
            *   - A sub-bullet
@@ -605,10 +464,13 @@ describe('enrichCsf', () => {
            title: 'Button',
           }
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
+        /**
+         * - A bullet list
+         *   - A sub-bullet
+         * - A second bullet
+         */
         export default {
           title: 'Button',
           parameters: {
@@ -619,7 +481,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -635,19 +497,7 @@ describe('enrichCsf', () => {
 
     it('correctly interleaves parameters', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-          title: 'Button',
-          parameters: {
-            foo: 'bar',
-            docs: { inlineStories: true }
-          }
-        }
-        export const Basic = () => React.createElement(Button);
-      `,
-          dedent`
+        enrich(dedent`
           /** The most basic button */
           export default {
             title: 'Button',
@@ -657,10 +507,9 @@ describe('enrichCsf', () => {
             }
           }
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
+        /** The most basic button */
         export default {
           title: 'Button',
           parameters: {
@@ -673,7 +522,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -689,23 +538,7 @@ describe('enrichCsf', () => {
 
     it('respects user component description', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        export default {
-          title: 'Button',
-          parameters: {
-            docs: {
-              description: {
-                component: 'hahaha'
-              }
-            }
-          }
-        }
-        export const Basic = () => React.createElement(Button);
-      `,
-          dedent`
-          // original code
+        enrich(dedent`
           /** The most basic button */
           export default {
             title: 'Button',
@@ -718,10 +551,9 @@ describe('enrichCsf', () => {
             }
           }
           export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
+        /** The most basic button */
         export default {
           title: 'Button',
           parameters: {
@@ -732,7 +564,7 @@ describe('enrichCsf', () => {
             }
           }
         };
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -748,17 +580,7 @@ describe('enrichCsf', () => {
 
     it('respects meta variables', () => {
       expect(
-        enrich(
-          dedent`
-        // compiled code
-        const meta = {
-          title: 'Button'
-        }
-        export default meta;
-        export const Basic = () => React.createElement(Button);
-        `,
-          dedent`
-        // original code
+        enrich(dedent`
         /** The most basic button */
         const meta = {
           title: 'Button'
@@ -766,10 +588,9 @@ describe('enrichCsf', () => {
         /** This should be ignored */
         export default meta;
         export const Basic = () => <Button />
-        `
-        )
+        `)
       ).toMatchInlineSnapshot(`
-        // compiled code
+        /** The most basic button */
         const meta = {
           title: 'Button',
           parameters: {
@@ -780,8 +601,9 @@ describe('enrichCsf', () => {
             }
           }
         };
+        /** This should be ignored */
         export default meta;
-        export const Basic = () => React.createElement(Button);
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -801,14 +623,6 @@ describe('enrichCsf', () => {
       expect(
         enrich(
           dedent`
-          // compiled code
-          export default {
-           title: 'Button',
-          }
-          export const Basic = () => React.createElement(Button);
-        `,
-          dedent`
-          // original code
           export default {
            title: 'Button',
           }
@@ -818,11 +632,11 @@ describe('enrichCsf', () => {
           { disableSource: true }
         )
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement(Button);
+        /** The most basic button */
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -840,14 +654,6 @@ describe('enrichCsf', () => {
       expect(
         enrich(
           dedent`
-          // compiled code
-          export default {
-           title: 'Button',
-          }
-          export const Basic = () => React.createElement(Button);
-        `,
-          dedent`
-          // original code
           export default {
            title: 'Button',
           }
@@ -857,11 +663,11 @@ describe('enrichCsf', () => {
           { disableDescription: true }
         )
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement(Button);
+        /** The most basic button */
+        export const Basic = () => <Button />;
         Basic.parameters = {
           ...Basic.parameters,
           docs: {
@@ -879,14 +685,6 @@ describe('enrichCsf', () => {
       expect(
         enrich(
           dedent`
-          // compiled code
-          export default {
-           title: 'Button',
-          }
-          export const Basic = () => React.createElement(Button);
-        `,
-          dedent`
-          // original code
           export default {
            title: 'Button',
           }
@@ -896,11 +694,11 @@ describe('enrichCsf', () => {
           { disableSource: true, disableDescription: true }
         )
       ).toMatchInlineSnapshot(`
-        // compiled code
         export default {
           title: 'Button'
         };
-        export const Basic = () => React.createElement(Button);
+        /** The most basic button */
+        export const Basic = () => <Button />;
       `);
     });
   });
diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index 8744b8359eaa..dae96aa85c57 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -9,16 +9,10 @@ export interface EnrichCsfOptions {
   disableDescription?: boolean;
 }
 
-export const enrichCsfStory = (
-  csf: CsfFile,
-  csfSource: CsfFile,
-  key: string,
-  options?: EnrichCsfOptions
-) => {
-  const storyExport = csfSource.getStoryExport(key);
+export const enrichCsfStory = (csf: CsfFile, key: string, options?: EnrichCsfOptions) => {
+  const storyExport = csf.getStoryExport(key);
   const source = !options?.disableSource && extractSource(storyExport);
-  const description =
-    !options?.disableDescription && extractDescription(csfSource._storyStatements[key]);
+  const description = !options?.disableDescription && extractDescription(csf._storyStatements[key]);
   const parameters = [];
   const originalParameters = t.memberExpression(t.identifier(key), t.identifier('parameters'));
   parameters.push(t.spreadElement(originalParameters));
@@ -117,8 +111,8 @@ const addComponentDescription = (
   addComponentDescription(subNode, rest, value);
 };
 
-export const enrichCsfMeta = (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
-  const description = !options?.disableDescription && extractDescription(csfSource._metaStatement);
+export const enrichCsfMeta = (csf: CsfFile, options?: EnrichCsfOptions) => {
+  const description = !options?.disableDescription && extractDescription(csf._metaStatement);
   // docs: { description: { component: %%description%% } },
   if (description) {
     const metaNode = csf._metaNode;
@@ -132,10 +126,10 @@ export const enrichCsfMeta = (csf: CsfFile, csfSource: CsfFile, options?: Enrich
   }
 };
 
-export const enrichCsf = (csf: CsfFile, csfSource: CsfFile, options?: EnrichCsfOptions) => {
-  enrichCsfMeta(csf, csfSource, options);
+export const enrichCsf = (csf: CsfFile, options?: EnrichCsfOptions) => {
+  enrichCsfMeta(csf, options);
   Object.keys(csf._storyExports).forEach((key) => {
-    enrichCsfStory(csf, csfSource, key, options);
+    enrichCsfStory(csf, key, options);
   });
 };