Storybook: Got adjacent JSX elements when placing <img> after <Meta> in MDX

Created on 4 Dec 2019 · 3Comments · Source: storybookjs/storybook

Describe the bug
Got SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. when inserting <img> element below <Meta> (I followed the example from https://github.com/chromaui/learnstorybook-design-system/blob/master/src/Intro.stories.mdx)

The error didn't happen if I place the img tag after some markdown heading, for example:

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Introduction|Getting Started" />

# Getting Started

<img src="/image.jpeg" height="250" alt="images" />

Welcome to the storybook sandbox. This is not error.

But, this become error.

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Introduction|Getting Started" />
<img src="/image.jpeg" height="250" alt="images" />

# Getting Started

Welcome to the storybook sandbox. This is not error.

To Reproduce
Steps to reproduce the behavior:

Create introduction.stories.tsx inside src directory.
Add <Meta> and <img> tags sequentially (after ).
Run start-storybook with static-dir is public. (Image is located inside public directory).
See error

Expected behavior
Image should be shown properly.

Screenshots

ERROR in ./src/introduction.stories.mdx
Module build failed (from ./node_modules/@mdx-js/loader/index.js):
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (2:0)
    at Object.raise (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:6975:17)
    at Object.jsxParseElementAt (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:4075:18)
    at Object.jsxParseElement (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:4085:17)
    at Object.parseExprAtom (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:4092:19)
    at Object.parseExprSubscripts (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:9210:23)
    at Object.parseMaybeUnary (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:9190:21)
    at Object.parseExprOps (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:9056:23)
    at Object.parseMaybeConditional (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:9029:23)
    at Object.parseMaybeAssign (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:8975:21)
    at Object.parseExpression (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:8925:23)
    at Object.getExpression (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:8911:23)
    at Object.parseExpression (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@babel/parser/lib/index.js:12158:17)
    at getExports (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@storybook/addon-docs/dist/mdx/mdx-compiler-plugin.js:267:26)
    at /home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@storybook/addon-docs/dist/mdx/mdx-compiler-plugin.js:314:19
    at Array.forEach (<anonymous>)
    at extractExports (/home/jeffryangtoni/sources/personal/github/sandbox/javascript-typescript/storybook-addon-docs-repro/node_modules/@storybook/addon-docs/dist/mdx/mdx-compiler-plugin.js:313:17)
 @ ./.storybook/config.ts 12:28-70
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.ts (webpack)-hot-middleware/client.js?reload=true&quiet=true

Code snippets
You can see it inside my sandbox-repo: https://github.com/jeffryang24/sandbox/tree/master/javascript-typescript/storybook-addon-docs-repro.

System:

Environment Info:

  System:
    OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.13.0 - ~/.asdf/installs/nodejs/12.13.0/bin/node
    Yarn: 1.19.2 - /usr/bin/yarn
    npm: 6.12.0 - ~/.asdf/installs/nodejs/12.13.0/bin/npm
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 70.0.1
  npmPackages:
    @storybook/addon-actions: ^5.2.8 => 5.2.8 
    @storybook/addon-docs: ^5.2.8 => 5.2.8 
    @storybook/addon-storysource: ^5.2.8 => 5.2.8 
    @storybook/react: ^5.2.8 => 5.2.8

Additional context
Add any other context about the problem here.

mdx question / support

Source