diff --git a/loader.js b/loader.js index f9749e6..302d16d 100644 --- a/loader.js +++ b/loader.js @@ -1,4 +1,3 @@ -const { dirname } = require('path'); const { compile } = require('./dist/index'); // FIXME: we shouldn't be doing this, but we need it @@ -9,10 +8,8 @@ const { compile } = require('./dist/index'); // Which generates the code: // // export const foo = () =>
hi
; -const mdxReactPackage = dirname(require.resolve('@mdx-js/react/package.json')); const DEFAULT_RENDERER = ` import React from 'react'; -import { mdx } from '${mdxReactPackage}'; `; // Lifted from MDXv1 loader diff --git a/src/sb-mdx-plugin.test.ts b/src/sb-mdx-plugin.test.ts index 798f111..680dd00 100644 --- a/src/sb-mdx-plugin.test.ts +++ b/src/sb-mdx-plugin.test.ts @@ -31,10 +31,13 @@ function clean(content: any) { } function compile(content: any) { - const code = mdx.sync(content, { - // filepath: filePath, - compilers: [createCompiler({})], - }); + const code = mdx + .sync(content, { + // filepath: filePath, + compilers: [createCompiler({})], + }) + // sanitize resolved path so test is same on any machine + .replace(/import { mdx } from (.*)/, "import { mdx } from '@mdx-js/react';"); return prettier .format(code, { @@ -971,6 +974,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` /* @jsxRuntime classic */ /* @jsx mdx */ + import { mdx } from '@mdx-js/react'; import { assertIsFn, AddContext } from '@storybook/addon-docs'; import { Meta } from '@storybook/addon-docs'; diff --git a/src/sb-mdx-plugin.ts b/src/sb-mdx-plugin.ts index 339778f..23511c7 100644 --- a/src/sb-mdx-plugin.ts +++ b/src/sb-mdx-plugin.ts @@ -1,3 +1,4 @@ +import { dirname } from 'path'; import { toJSX } from '@mdx-js/mdx/mdx-hast-to-jsx'; import { parse, parseExpression } from '@babel/parser'; import * as t from '@babel/types'; @@ -508,8 +509,10 @@ function extractExports(root: Element, options: CompilerOptions) { metaExport.includeStories = JSON.stringify(includeStories); const defaultJsx = toJSX(root, {}, { ...options, skipExport: true }); + const mdxReactPackage = dirname(require.resolve('@mdx-js/react/package.json')); const fullJsx = [ - 'import { assertIsFn, AddContext } from "@storybook/addon-docs";', + `import { mdx } from '${mdxReactPackage}'; + import { assertIsFn, AddContext } from "@storybook/addon-docs";`, defaultJsx, ...storyExports, `const componentMeta = ${stringifyMeta(metaExport)};`,