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)};`,