diff --git a/src/loaders/rehype/__tests__/exportStories.spec.ts b/src/loaders/rehype/__tests__/exportStories.spec.ts
index 345a2360d..965f8f708 100644
--- a/src/loaders/rehype/__tests__/exportStories.spec.ts
+++ b/src/loaders/rehype/__tests__/exportStories.spec.ts
@@ -27,7 +27,7 @@ describe('imports', () => {
const result = await compile(
`Henlo`,
`
-import Container from './Container'
+import Container from './Container';
export const basic = () =>
`
);
@@ -35,7 +35,7 @@ export const basic = () =>
"
import * as __story_import_0 from './Container'
export const __namedExamples = {
- 'basic': 'import Container from \\\\'./Container\\\\'\\\\n\\\\n'
+ 'basic': 'import Container from \\\\'./Container\\\\';\\\\n\\\\n'
};
export const __storiesScope = {
'./Container': __story_import_0
@@ -53,7 +53,7 @@ export const basic = () =>
const result = await compile(
`Henlo`,
`
-import { Button, Input } from './components'
+import { Button, Input } from './components';
export const basic = () =>
`
);
@@ -61,7 +61,7 @@ export const basic = () =>
"
import * as __story_import_0 from './components'
export const __namedExamples = {
- 'basic': 'import { Button, Input } from \\\\'./components\\\\'\\\\n\\\\n'
+ 'basic': 'import { Button, Input } from \\\\'./components\\\\';\\\\n\\\\n'
};
export const __storiesScope = {
'./components': __story_import_0
@@ -79,7 +79,7 @@ export const basic = () =>
const result = await compile(
`Henlo`,
`
-import Input, { Button } from './components'
+import Input, { Button } from './components';
export const basic = () =>
`
);
@@ -87,7 +87,7 @@ export const basic = () =>
"
import * as __story_import_0 from './components'
export const __namedExamples = {
- 'basic': 'import Input, { Button } from \\\\'./components\\\\'\\\\n\\\\n'
+ 'basic': 'import Input, { Button } from \\\\'./components\\\\';\\\\n\\\\n'
};
export const __storiesScope = {
'./components': __story_import_0
@@ -105,7 +105,7 @@ export const basic = () =>
const result = await compile(
`Henlo`,
`
-import { Input as Button } from './components'
+import { Input as Button } from './components';
export const basic = () =>
`
);
@@ -113,7 +113,7 @@ export const basic = () =>
"
import * as __story_import_0 from './components'
export const __namedExamples = {
- 'basic': 'import { Input as Button } from \\\\'./components\\\\'\\\\n\\\\n'
+ 'basic': 'import { Input as Button } from \\\\'./components\\\\';\\\\n\\\\n'
};
export const __storiesScope = {
'./components': __story_import_0
@@ -131,7 +131,7 @@ export const basic = () =>
const result = await compile(
`Henlo`,
`
-import * as Buttons from './Buttons'
+import * as Buttons from './Buttons';
export const basic = () =>
`
);
@@ -139,7 +139,7 @@ export const basic = () =>
"
import * as __story_import_0 from './Buttons'
export const __namedExamples = {
- 'basic': 'import * as Buttons from \\\\'./Buttons\\\\'\\\\n\\\\n'
+ 'basic': 'import * as Buttons from \\\\'./Buttons\\\\';\\\\n\\\\n'
};
export const __storiesScope = {
'./Buttons': __story_import_0
@@ -157,8 +157,8 @@ export const basic = () =>
const result = await compile(
`Henlo`,
`
-import * as React from 'react'
-import { Coffee, Milk } from './drinks'
+import * as React from 'react';
+import { Coffee, Milk } from './drinks';
export const basic = () =>
`
);
@@ -181,6 +181,32 @@ export const basic = () =>
"
`);
});
+
+ test('add semicolon', async () => {
+ const result = await compile(
+ `Henlo`,
+ `
+import Container from './Container'
+export const basic = () =>
+`
+ );
+ expect(result).toMatchInlineSnapshot(`
+ "
+ import * as __story_import_0 from './Container'
+ export const __namedExamples = {
+ 'basic': 'import Container from \\\\'./Container\\\\';\\\\n\\\\n'
+ };
+ export const __storiesScope = {
+ './Container': __story_import_0
+ };
+
+ const layoutProps = {
+ __namedExamples,
+ __storiesScope
+ };
+ "
+ `);
+ });
});
describe('local variables', () => {
@@ -327,4 +353,28 @@ export const basic = () => {javascript}
"
`);
});
+
+ test('add semicolon', async () => {
+ const result = await compile(
+ `Henlo`,
+ `
+const pizza = 'pizza'
+export const basic = () => {pizza}
+`
+ );
+ expect(result).toMatchInlineSnapshot(`
+ "
+
+ export const __namedExamples = {
+ 'basic': 'const pizza = \\\\'pizza\\\\';\\\\n\\\\n{pizza}'
+ };
+ export const __storiesScope = {};
+
+ const layoutProps = {
+ __namedExamples,
+ __storiesScope
+ };
+ "
+ `);
+ });
});
diff --git a/src/loaders/rehype/exportStories.ts b/src/loaders/rehype/exportStories.ts
index eb7b2ca94..10855f346 100644
--- a/src/loaders/rehype/exportStories.ts
+++ b/src/loaders/rehype/exportStories.ts
@@ -32,6 +32,10 @@ interface Dependency {
const getLocalName = (index: number) => `__story_import_${index}`;
+// Ensure that we have a semicolon (;) at the end: we must put a semicolon
+// in front of JSX (`import 'foo'; `), otherwise it won't compile
+const ensureSemicolon = (s: string): string => s.replace(/(?:;\s*)?$/, ';');
+
// TODO: Deduplicate?
const getModulePathToModuleMap = (modules: string[]) => {
const moduleMap: ModuleMap = {};
@@ -208,7 +212,7 @@ const prependExampleWithDependencies = (code: string, dependencies: Dependency[]
);
return [
usedDependencies
- .map((dependency) => dependency.code)
+ .map((dependency) => ensureSemicolon(dependency.code))
.filter(Boolean)
.join('\n'),
code,