storybook: Module build failed with MDX files: Unexpected token

@nevolgograd delete the whitespace between <Story> blocks. hopefully this whitespace sensitivity gets fixed in MDX 2.0

Have you tried the docs preset with configureJSX: true?

module.exports = {
  stories: ['../src/**/*.stories.(js|mdx)'],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: { configureJSX: true },
    },
  ],
};

same error occurs when updating @storybook/preset-create-react-app to 3.0.1

update

Still have error in @storybook/preset-create-react-app@3.1.0 Downgrading the @storybook/preset-create-react-app to 3.0.0 will work

Maybe this is related 🤔 ? https://github.com/storybookjs/presets/pull/147

update:2

My problem solved upgrade storybook v6.0.0-beta.37 to v6.0.0-beta.38 relate: https://github.com/storybookjs/storybook/pull/11333 (5ff06d2)

Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hit this same issue when running through the Controls walkthrough https://gist.github.com/shilman/69c1dd41a466bae137cc88bd2c6ef487#:~:text=Storybook Controls w%2F CRA %26 TypeScript,ergonomic way to write stories.

Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Not sure if this is helpful, but for me the difference between the error above and a working config was this:

use: [
+          {
+            loader: 'babel-loader',
+            // may or may not need this line depending on your app's setup
+            options: {
+              plugins: ['@babel/plugin-transform-react-jsx'],
+            },
+          },
          {
            loader: '@mdx-js/loader',
            options: {
              compilers: [createCompiler({})],
            },
          },
        ],

I can see it doesn’t resemble your config at all, but maybe it would help someone knowledgable such as @shilman to understand where the error comes from.

Sorry for writing in and old closed thread. Just had this issue, but solved it by replacing:

@storybook/addon-essentials with:

'@storybook/addon-links',
'@storybook/addon-actions',
'@storybook/addon-viewport',
{
  name: '@storybook/addon-docs',
  options: {
    configureJSX: true,
    babelOptions: {},
    sourceLoaderOptions: null,
    transcludeMarkdown: true,
  },
},
'@storybook/addon-controls',
'@storybook/addon-backgrounds',
'@storybook/addon-toolbars',
'@storybook/addon-measure',
'@storybook/addon-outline',

as described in the docs here.

Now when you start the storybook server and open it (usually on http://localhost:6006/), you can now see the full error in the console, not just “Unexpected token” (the full error will not be displayed in your terminal). You can also run build-storybook --debug-webpack to allow webpack to show more error info. In my case there was an old story that used the old way of writing MDX in a regular .md file. That confused the compiler at ton 😄.

Other errors was:

• There was also some incorrect indentation and to space/line-breaks between some JSX code in another .mdx file that the compiler didn’t like either (as stated above).

• There was an import React from "react" statement in the top that caused an error.

• I had two Stories using a <Story name="Button"> that had the same name.

• Another error was that I had comments in a jsx block, like this:

<Box
    color="danger"
    className="anim-error-reveal"
    {/* className="anim-out" */}
/>

When I removed all those. It compiled fine.

Hope this fixed can help someone else too.

This is a long shot, but I’m hoping someone who’s more familiar with MDX’s intricacies might be able to help me pinpoint my error. I’ve gone line by line and manually checked by deleting code and checking for output and have only been able to successfully get my MDX story to display when I remove everything but the final return. I can’t share my private repo, but as noted hoping someone might be able to pinpoint whats going on…

I tried adding configureJsx: true to storybook addon docs option but that just hangs up my entire Storybook with a blank sidebar and blank page.

Here’s my entire warning:

SyntaxError: Unexpected token, expected "," (6:47)
    at Object._raise (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/error.js:60:45)
    at Object.raiseWithData (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/error.js:55:17)
    at Object.raise (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/error.js:39:17)
    at Object.unexpected (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/util.js:139:16)
    at Object.expect (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/util.js:116:28)
    at Object.parseCallExpressionArguments (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:864:14)
    at Object.parseCoverCallAndAsyncArrowHead (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:725:29)
    at Object.parseSubscript (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:622:19)
    at Object.parseSubscripts (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:579:19)
    at Object.parseExprSubscripts (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:560:17)
    at Object.parseUpdate (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:534:21)
    at Object.parseMaybeUnary (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:518:17)
    at Object.parseExprOps (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:318:23)
    at Object.parseMaybeConditional (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:273:23)
    at Object.parseMaybeAssign (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/expression.js:226:21)
    at Object.parseVar (/Users/corey.bruyere/Sites/haiku/node_modules/@babel/parser/src/parser/statement.js:1008:26)
./packages/core/node_modules/tsdx/templates/react-with-storybook/stories/Thing.stories.tsx 18:30
Module parse failed: Unexpected token (18:30)
File was processed with these loaders:
 * ./node_modules/@storybook/source-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| // By passing optional props to this story, you can control the props of the component when
| // you consume the story in a test.
> export const Default = (props?: Partial<Props>) => <Thing {...props} />;
| 
| 
./packages/icons/node_modules/tsdx/templates/react-with-storybook/stories/Thing.stories.tsx 18:30
Module parse failed: Unexpected token (18:30)
File was processed with these loaders:
 * ./node_modules/@storybook/source-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| // By passing optional props to this story, you can control the props of the component when
| // you consume the story in a test.
> export const Default = (props?: Partial<Props>) => <Thing {...props} />;
| 

Along with the code that is causing it from theme.stories.mdx:

import { Meta, Props, Preview, Story, Source, Subtitle } from '@storybook/addon-docs/blocks';

import { Box, Flex, Heading, useTheme } from '../src';

<Meta title="Design/Theme Spec"></Meta>

<Preview withToolbar withSource="open">
  <Story name="Colors">
    {() => {
      const theme = useTheme();
      const { colors } = theme;
      const topLevelColors = Object.keys(colors!).filter((color) => typeof colors![color] === "string");
      const topColorsSection = (
        <>
          <Heading>Aliases</Heading>
          {topLevelColors.map((color, idx) => (
            <Flex mb={1} key={`${color}-${idx}`} {...rest}>
              <Box
                sx={{
                  width: 24,
                  height: 24,
                  bg: colors![color],
                  borderWidth: "1px",
                  borderColor: "gray",
                  borderStyle: "solid"
                }}
              />
              <Box>{colors![color]}</Box>
            </Flex>
          ))}
        </>
      );
      const subColorsSection = Object.keys(colors!).map(
        (label, idx) =>
          typeof colors![label] === "object" && (
            <Box key={`${label}-${idx}`}>
              {label && <Heading>{label}</Heading>}
              {Object.values(colors![label]!).map((subColor, idx) => {
                let hex = subColor;
                return (
                  <Flex key={`${hex}-${idx}`} {...rest}>
                    <Box
                      sx={{
                        mb: 1,
                        width: 24,
                        height: 24,
                        bg: hex,
                        borderWidth: "1px",
                        borderColor: "gray",
                        borderStyle: "solid"
                      }}
                    />
                    <Box>{hex}</Box>
                  </Flex>
                );
              })}
            </Box>
          )
      );
      return (
        <>
          {topColorsSection}
          {subColorsSection}
        </>
      );
    }};
  </Story>
</Preview>

Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!