diff --git a/packages/mdx/mdx-hast-to-jsx.js b/packages/mdx/mdx-hast-to-jsx.js
index 4a6541502..0c0dbc30e 100644
--- a/packages/mdx/mdx-hast-to-jsx.js
+++ b/packages/mdx/mdx-hast-to-jsx.js
@@ -165,20 +165,23 @@ MDXContent.isMDXComponent = true`
const jsxNames = allJsxNames.filter(name => name !== 'MDXLayout')
const importExportNames = importNames.concat(exportNames)
- const fakedModulesForGlobalScope =
- `const makeShortcode = name => function MDXDefaultShortcode(props) {
- console.warn("Component '" + name + "' was not imported, exported, or provided by MDXProvider as global scope")
- return
-};
-` +
- uniq(jsxNames)
- .filter(name => !importExportNames.includes(name))
- .map(name => `const ${name} = makeShortcode("${name}");`)
- .join('\n')
+ const shortCodeDef = `const makeShortcode = name => function MDXDefaultShortcode(props) {
+ console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
+ return
+ };
+`
+ const fakedModulesForGlobalScope = uniq(jsxNames)
+ .filter(name => !importExportNames.includes(name))
+ .map(name => `const ${name} = makeShortcode("${name}");`)
+ .join('\n')
+ const fakedModules =
+ (fakedModulesForGlobalScope &&
+ [shortCodeDef, fakedModulesForGlobalScope].join('')) ||
+ ''
const moduleBase = `${importStatements}
${exportStatementsPostMdxTypeProps}
-${fakedModulesForGlobalScope}
+${fakedModules}
${layoutProps}
${mdxLayout}`
diff --git a/packages/mdx/test/fixtures/with-shortcode.mdx b/packages/mdx/test/fixtures/with-shortcode.mdx
new file mode 100644
index 000000000..9b311ac38
--- /dev/null
+++ b/packages/mdx/test/fixtures/with-shortcode.mdx
@@ -0,0 +1,3 @@
+# Hello, world!
+
+
diff --git a/packages/mdx/test/fixtures/without-shortcode.mdx b/packages/mdx/test/fixtures/without-shortcode.mdx
new file mode 100644
index 000000000..19a511e24
--- /dev/null
+++ b/packages/mdx/test/fixtures/without-shortcode.mdx
@@ -0,0 +1,5 @@
+import Foo from 'baz'
+
+# Hello, world!
+
+
diff --git a/packages/mdx/test/index.test.js b/packages/mdx/test/index.test.js
index 25bb3915a..0f994c2ac 100644
--- a/packages/mdx/test/index.test.js
+++ b/packages/mdx/test/index.test.js
@@ -16,6 +16,14 @@ const fixtureBlogPost = fs.readFileSync(
path.join(__dirname, './fixtures/blog-post.mdx')
)
+const fixtureWithoutShortcode = fs.readFileSync(
+ path.join(__dirname, './fixtures/without-shortcode.mdx')
+)
+
+const fixtureWithShortcode = fs.readFileSync(
+ path.join(__dirname, './fixtures/with-shortcode.mdx')
+)
+
it('Should output parseable JSX', async () => {
const result = await mdx('Hello World')
@@ -44,16 +52,6 @@ it('Should match sample blog post snapshot', async () => {
expect(prettier.format(result, {parser: 'babel'})).toMatchInlineSnapshot(`
"/* @jsx mdx */
- const makeShortcode = (name) =>
- function MDXDefaultShortcode(props) {
- console.warn(
- \\"Component '\\" +
- name +
- \\"' was not imported, exported, or provided by MDXProvider as global scope\\"
- );
- return ;
- };
-
const layoutProps = {};
const MDXLayout = \\"wrapper\\";
export default function MDXContent({ components, ...props }) {
@@ -333,9 +331,9 @@ test('Should handle layout props', () => {
authors: ['fred', 'sally']
};
const makeShortcode = name => function MDXDefaultShortcode(props) {
- console.warn(\\"Component '\\" + name + \\"' was not imported, exported, or provided by MDXProvider as global scope\\")
- return
- };
+ console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
+ return
+ };
const Foo = makeShortcode(\\"Foo\\");
const Bar = makeShortcode(\\"Bar\\");
const layoutProps = {
@@ -420,6 +418,16 @@ test('Should handle layout props', () => {
`)
})
+test('Should not add shortCodes definition if no shortCodes present', async () => {
+ const result = await mdx(fixtureWithoutShortcode)
+ expect(result).not.toContain('const makeShortcode = name')
+})
+
+test('Should contain shortcode definition', async () => {
+ const result = await mdx(fixtureWithShortcode)
+ expect(result).toContain('const makeShortcode = name')
+})
+
it('Should include file name in Babel error', async () => {
try {
await mdx(`
`, {filepath: '/path/to/file.mdx'})
diff --git a/packages/remark-mdx/test/__snapshots__/test.js.snap b/packages/remark-mdx/test/__snapshots__/test.js.snap
index 3dd0b2012..c91c155e7 100644
--- a/packages/remark-mdx/test/__snapshots__/test.js.snap
+++ b/packages/remark-mdx/test/__snapshots__/test.js.snap
@@ -5,9 +5,9 @@ exports[`correctly transpiles 1`] = `
export { Baz } from './foo';
const makeShortcode = name => function MDXDefaultShortcode(props) {
- console.warn(\\"Component '\\" + name + \\"' was not imported, exported, or provided by MDXProvider as global scope\\")
- return
-};
+ console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
+ return
+ };
const Baz = makeShortcode(\\"Baz\\");
const Paragraph = makeShortcode(\\"Paragraph\\");
const Button = makeShortcode(\\"Button\\");