Storybook: Unexpected token, expected "," when using presets.js

[chiangs]

Describe the bug
Following the learnstorybook tutorial, everything is fine until i use the following for presets.js for docs addon. Then every story has the following error:

// presets.js
module.exports = ['@storybook/addon-docs/react/preset'];

```
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/dev/Projects/learnstorybook-design-system/src/Avatar.stories.js: Unexpected token, expected "," (47:2)

I have cleared the `node_modules`, and deleted the `package/yarn.lock` file and tried reinstalling everything.

**To Reproduce**
```json
// package.json
{
  "name": "learnstorybook-design-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "polished": "^3.4.1",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0",
    "styled-components": "^4.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-a11y": "^5.2.3",
    "@storybook/addon-actions": "^5.2.3",
    "@storybook/addon-docs": "^5.2.3",
    "@storybook/addon-knobs": "^5.2.3",
    "@storybook/addon-links": "^5.2.3",
    "@storybook/addon-storysource": "^5.2.3",
    "@storybook/addons": "^5.2.3",
    "@storybook/react": "^5.2.3",
    "prettier": "^1.18.2",
    "storybook-chromatic": "^3.0.1"
  }
}

```js
// webpack.config.js
module.exports = ({ config }) => {
config.module.rules.unshift({
test: /.stories.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre'
});

return config;

};

```js
// addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-storysource/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-a11y/register';

```js
// config.js
import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { GlobalStyle } from '../src/shared/global';
import 'storybook-chromatic';

addDecorator(withA11y);
addDecorator(story => (
<>

{story()}

));

// automatically import all files ending in *.stories.js
configure(require.context('../src', true, /.stories.js$/), module);

**Repro***
[Link to repo](https://github.com/chiangs/learnstorybook-design-system)
1. in`presets.js` change module.exports to empty array and `yarn storybook` verify it is running.
```js
module.exports = [];

1. add the full statement for docs into presets.js and run and the errors should appear.

module.exports = ['@storybook/addon-docs/react/preset'];

Expected behavior
There should not be any errors.

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 67.0.4
    Safari: 13.0.2
  npmPackages:
    @storybook/addon-a11y: ^5.2.3 => 5.2.3 
    @storybook/addon-actions: ^5.2.3 => 5.2.3 
    @storybook/addon-docs: ^5.2.3 => 5.2.3 
    @storybook/addon-knobs: ^5.2.3 => 5.2.3 
    @storybook/addon-links: ^5.2.3 => 5.2.3 
    @storybook/addon-storysource: ^5.2.3 => 5.2.3 
    @storybook/addons: ^5.2.3 => 5.2.3 
    @storybook/react: ^5.2.3 => 5.2.3 

[shilman]

@chiangs I was able to get your repo working with the following preset config:

module.exports = [
  {
    name: "@storybook/addon-docs/react/preset",
    options: {
      configureJSX: true,
      babelOptions: {},
      sourceLoaderOptions: null
    }
  }
];

@tmeasday I'm not sure whether this is an issue with the repo or with the LSB guide. Can you give a hand?

[tmeasday]

Thanks for the detailed reproduction @chiangs.

I think in the guide we ask you to remove the webpack.config.js at this stage of the process--does that resolve the issue?

If so, perhaps
a) we should make that clearer, and
b) we should show a more useful error, if possible.

[chiangs]

@shilman that worked, thanks.
@tmeasday I tried that yesterday, but still ran into the same error....and today, it works.

I think the directions were fine, but perhaps a troubleshooting guide that identifies this potential common mistake might be good.

With removing the webpack.config, the rest of the add-ons are not shown in the canvas UI such as a11y or knobs, nor actions. How does one get that back?

[tmeasday]

With removing the webpack.config, the rest of the add-ons are not shown in the canvas UI such as a11y or knobs, nor actions. How does one get that back?

That sounds weird. Perhaps you need to restart the storybook process and see if it fixes it. Are there any errors in the browser console?

[chiangs]

I've restarted it several times and there are no errors. If you try my
repo, are you able to get knobs, a11y and the docs to show up in the UI?

On Thu, Oct 10, 2019, 04:13 Tom Coleman [e-mail] wrote:

With removing the webpack.config, the rest of the add-ons are not shown in
the canvas UI such as a11y or knobs, nor actions. How does one get that
back?

That sounds weird. Perhaps you need to restart the storybook process and
see if it fixes it. Are there any errors in the browser console?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/storybookjs/storybook/issues/8345?email_source=notifications&email_token=ACTZZENPRYG4MT3KPZTRMXLQN2FVFA5CNFSM4I6WHN7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEA2ERDY#issuecomment-540297359,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACTZZEMPMNY2RQAG5KWSB4LQN2FVFANCNFSM4I6WHN7A
.

[tmeasday]

Let's try it

[chiangs]

Let's try it

Link to repo

[tmeasday]

I get a different problem @chiangs:

WARNING in ./src/Intro.stories.mdx
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: /private/tmp/learnstorybook-design-system/src/Intro.stories.mdx: Unexpected token (12:9)

  10 | const makeShortcode = name => function MDXDefaultShortcode(props) {
  11 |   console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
> 12 |   return <div {...props}/>
     |          ^
  13 | };
  14 |
  15 | const layoutProps = {
    at Parser.raise (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:6400:17)
    at Parser.unexpected (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:7728:16)
    at Parser.parseExprAtom (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:8940:20)
    at Parser.parseExprSubscripts (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:8507:23)
    at Parser.parseMaybeUnary (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:8487:21)
    at Parser.parseExprOps (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:8353:23)
    at Parser.parseMaybeConditional (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:8326:23)
    at Parser.parseMaybeAssign (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:8273:21)
    at Parser.parseExpression (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:8221:23)
    at Parser.parseReturnStatement (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:10301:28)
    at Parser.parseStatementContent (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:9980:21)
    at Parser.parseStatement (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:9932:17)
    at Parser.parseBlockOrModuleBlockBody (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:10508:25)
    at Parser.parseBlockBody (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:10495:10)
    at Parser.parseBlock (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:10479:10)
    at Parser.parseFunctionBody (/private/tmp/learnstorybook-design-system/node_modules/@babel/parser/lib/index.js:9523:24)
 @ ./src sync nonrecursive Intro\.stories\.mdx ./Intro.stories.mdx

@shilman - AFAICT everything looks right, not sure what's happening here.

[chiangs]

I get that error in my CircleCI build process but not locally.

Ref another issue I opened up:
LSB #174.

However, after creating another project from scratch and following the steps without importing the components everything works fine until I try to add the Intro.stories.mdx. It breaks with that exact error you posted as soon as the file is created, whether it's blank or not.

With a from scratch CRA with just a plain button component I was able to get the canvas with all add-ons and the docs to work, but as soon as I try switching to MDX for any story, it breaks.

[shilman]

@tmeasday The error is fixed when you ask docs to do its own babel configuration, which is typically needed for CRA apps:

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
    },
  },
];

If there is a way to get Docs to use CRA's babel config for downstream processing of MDX, that would probably be a more technically correct solution. However, I'm not sure how to do that, and it might be a better fit for the CRA preset cc @mrmckeb

[tmeasday]

Why didn’t I need to do that in the example repo though @shilman?
On 12 Oct 2019, 11:44 AM +1100, Michael Shilman [e-mail], wrote:

@tmeasday The error is fixed when you ask docs to do its own babel configuration, which is typically needed for CRA apps:
module.exports = [
{
name: '@storybook/addon-docs/react/preset',
options: {
configureJSX: true,
},
},
];
If there is a way to get Docs to use CRA's babel config for downstream processing of MDX, that would probably be a more technically correct solution. However, I'm not sure how to do that, and it might be a better fit for the CRA preset cc @mrmckeb
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[shilman]

@tmeasday Here's why: https://github.com/chromaui/learnstorybook-design-system/blob/master/package.json#L26-L30

[tmeasday]

Hmm, but that gets added later @shilman. Try checking out commit 3fb3567 -- it doesn't have that section in package.json, but runs just fine.

[shilman]

Other than that, the only thing I can see is difference in yarn.lock versions. @mrmckeb do you have time to chat about this? It's not really a CRA problem, although it's related to your presets work

[chiangs]

  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
    },
  },

I just wanted to confirm that this fixed it for me as well. Thanks

[LanceALaughlin]

@chiangs @shilman sorry can you specify where this should be added?

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
    },
  },
];

[shilman]

@LanceALaughlin in .storybook/presets.js

[LanceALaughlin]

I've tried updating my .storybook/presets.js file to
module.exports = [ { name: "@storybook/addon-docs/react/preset", options: { configureJSX: true, babelOptions: {}, sourceLoaderOptions: null, }, }, ];

However, I still get the following error:

Are there any additional troubleshooting steps I can take? I'm on storybook version 5.2.3

[LanceALaughlin]

I figured it out. I had to remove the following from my webpack.config.js

  storybookBaseConfig.module.rules.push({
    test: /\.(stories|story)\.mdx$/,
    use: [
      {
        loader: "babel-loader",
      },
      {
        loader: "@mdx-js/loader",
        options: {
          compilers: [createCompiler({})],
        },
      },
    ],
  });

[chiangs]

You are supposed to delete the webpack.config when using presets.

[mrmckeb]

I don't think that's true @chiangs, @shilman is that your intention?

However, having both could definitely introduce conflicts...

[chiangs]

Well, I'm just learning this so maybe I'm wrong, but I found this and according to the documentation here:

Also, we’ll add a preset for the docs addon, in a new file .storybook/presets.js. Note that the use of this preset removes the need for our .storybook/webpack.config.js and we can remove it

[mrmckeb]

No problem, "removes the need for our .storybook/webpack.config.js" means that in this case, it isn't needed - not that you can't use both.

But in your case, your webpack config was conflicting :)

[mrmckeb]

Can we close this issue off @chiangs?

[chiangs]

Yes, the solution was identified, thanks.

[resistdesign]

Seems very hard to compile MDX _AND_ JSX node_modules that are _NOT_ precompiled.