React-styleguidist: Unexpected token in code example

[Sly36]

I had to install react-styleguidist with yarn (vs npm) to have PROPS & METHODSi working.

Now it works but i have Syntax errors for all my components (with defaultExample set to true and components with their own examples too):

Current behavior

in the .md file

``` jsx
<Card>test</Card>

results in

SyntaxError: Unexpected token (1:6)
1 : <React.Fragment><Card>test</Card></React.Fragment>;
          ^

and

``` jsx
// comment
<Card>test</Card>

results in

SyntaxError: Unexpected token (2:11)
1 : // comment
2 : <Card>test</Card>
               ^

here is an example of a simple component code :

import React from 'react';
import PropTypes from "prop-types";
import "../../../styles/elements/card.less"

const Card = ({children, id}) =>
    <div id={id} className={"Card"}>
        {children}
    </div>;

Card.propTypes = {
    id: PropTypes.string
};

export default Card;

Expected behavior
The code example should display my component

[vollmerr]

I am getting this same error. Everything works fine on version 9.0.4, but get the above error on 9.0.5 for all my components.

[Sly36]

Thank you, downgrading to 9.0.4 fix the problem

[JonathanLehner]

downgrading works, but doesn't seem like a nice solution. what is the underlying issue?

[karsai5]

Having the same issue. Also 9.0.4 gets picked up as having vulnerabilities by npm audit which doesn't make it a super viable alternative.

[Betree]

It seems that this issue doesn't affect everyone so maybe we can get more info by sharing our configs. Below is ours, we use it with the following libraries (see the full list here):

• @babel/cli: 7.1.2
• @babel/core: 7.1.2
• @babel/node: 7.0.0
• next: 8.1.0
• react: 16.8.6

---

https://github.com/opencollective/opencollective-frontend/blob/master/styleguide.config.js

const fs = require('fs');
const path = require('path');
const fileExistsCaseInsensitive = require('react-styleguidist/lib/scripts/utils/findFileCaseInsensitive');

module.exports = {
  assetsDir: 'styleguide',
  getExampleFilename(componentPath) {
    const parsedPath = path.parse(componentPath);
    const parentDirName = parsedPath.dir.split('src/components/')[1] || '';
    const parentDirPath = path.join(__dirname, 'styleguide', 'examples', parentDirName);

    if (!fs.existsSync(parentDirPath)) {
      return false;
    }

    const examplePath = path.join(parentDirPath, `${parsedPath.name}.md`);
    return fileExistsCaseInsensitive(examplePath) || false;
  },
  pagePerSection: true,
  moduleAliases: {
    components: path.resolve(__dirname, 'src/components'),
  },
  sections: [
    {
      name: 'Atoms',
      components: 'src/components/Styled*.js',
      description: 'Base design atoms.',
    },
    {
      name: 'UI',
      content: 'styleguide/pages/UI.md',
      components: 'src/components/*.js',
      ignore: ['src/components/Contribute*.js', 'src/components/Styled*.js', 'src/components/collective-page/*.js'],
    },
    {
      name: 'Collective Page',
      components: 'src/components/collective-page/*.js',
      description: 'These components are used on the donate/contribute flow.',
    },
    {
      name: 'Contribution Flow',
      components: 'src/components/Contribute*.js',
      description: 'These components are used on the donate/contribute flow.',
    },
    {
      name: 'Grid',
      content: 'styleguide/pages/Grid.md',
      sections: [
        {
          name: 'Box',
          content: 'styleguide/examples/Box.md',
        },
        {
          name: 'Flex',
          content: 'styleguide/examples/Flex.md',
        },
      ],
    },
  ],
  skipComponentsWithoutExample: true,
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'styleguide/Wrapper'),
  },
  styles: {
    Blockquote: {
      blockquote: {
        borderLeft: '3px solid grey',
        margin: '16px 0',
        padding: '0 32px',
      },
    },
  },
  title: 'Open Collective Frontend Style Guide',
  usageMode: 'expand',
  webpackConfig: {
    resolve: { extensions: ['.js', '.json'] },
    stats: { children: false, chunks: false, modules: false, reasons: false },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [{ loader: 'babel-loader', options: { cacheDirectory: true } }],
        },
        {
          test: /components\/.*\.(svg)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 1000000,
            },
          },
        },
      ],
    },
  },
};

[WaldoJeffers]

I can confirm this, but it does not seem to be related to v9.0.4 or v9.0.5. I had the same issue without updating _any_ dependencies in my project. I simply did rm -rf node_modules followed by yarn install.

After some digging, it seems to be related to:

• https://github.com/acornjs/acorn/issues/792,
• which is itself related to https://github.com/eslint/eslint/issues/11018
• which was reported here https://npm.community/t/failed-to-install-eslint-in-a-specific-situation/2975

I got rid of it by upgrading all my eslint-* dependencies, but it's still a weird issue

[matsgm]

I can confirm this, but it does not seem to be related to v9.0.4 or v9.0.5. I had the same issue without updating _any_ dependencies in my project. I simply did rm -rf node_modules followed by yarn install.

After some digging, it seems to be related to:

• acornjs/acorn#792,
• which is itself related to eslint/eslint#11018
• which was reported here https://npm.community/t/failed-to-install-eslint-in-a-specific-situation/2975

I got rid of it by upgrading all my eslint-* dependencies, but it's still a weird issue

It looks like upgrading ESLint fixed it 😃

[karsai5]

Unfortunately upgrading eslint didn't fix it for me. But it seemed to be related to the version of acorn I had. Running the following worked for me:

• npm update acorn --depth 20
• npm dedupe

I suspect I had some dependency that was using the old version of acorn that was causing the problem.

[stoff]

Seeing this in a nascent project, currently very basic deps/config. I've tried reinstalling and updating acorn to no avail; interestingly I have not yet installed eslint so have not tried updating that lib yet (will look into a deep update when time permits). Sharing my configs for record:
package.json:

{
  "name": "fepdx-react-component-library",
  "version": "0.1.0",
  "description": "React components to encapsulate the design for FEPDX projects.",
  "main": "index.js",
  "scripts": {
    "start": "styleguidist server",
    "build": "rimraf dist && babel src --out-dir dist",
    "test": "jest"
  },
  "author": "Christoph Saxe",
  "license": "ISC",
  "dependencies": {
    "@emotion/core": "^10.0.10",
    "emotion-theming": "^10.0.10",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-styleguidist": "^9.1.2",
    "webpack": "^4.32.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@emotion/babel-preset-css-prop": "^10.0.9",
    "babel-jest": "^24.8.0",
    "babel-loader": "^8.0.6",
    "jest": "^24.8.0",
    "react-test-renderer": "^16.8.6",
    "rimraf": "^2.6.3"
  }
}

styleguide.config.js:

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        }
      ]
    }
  },
  components: 'src/components/**/[A-Z]*.js',
};

[ManishBobde]

Hi All,
Do we have any fix for the open issue ?

[michaelkutuzov]

I have same problem. All methods from this thread don't help😞

[antonin87]

Same problem here :( Tried all the methods but still not work. Any tips ?

[tonyjeffrey]

I have the same problem. 9.0.4 works but 9.0.5 have the error.

[cisen]

yarn add acorn acorn-jsx

It works for me!

[swashcap]

Changing from npm to yarn solved this problem in my project. Seems like something's wrong in the dependency tree? https://github.com/styleguidist/react-styleguidist/issues/1321#issuecomment-494732909 and other comments on this issue indicate this.

[roblevintennis]

Yeah, my colleague is anti shorthand so we don't have this properly configured (maybe I'll convince him to switch with this!). So, I fixed it by doing the downgrade with:
yarn add --dev --exact [email protected]

[cicely-f]

still happening with 9.1.16. the components are in tsx. the styleguide config is only specifying sections/components, and tsconfig is as follows:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "es5"
  },
  "include": [
    "src"
  ]
}

[dustin-ruetz]

I was experiencing the same "unexpected token" issue in all of my .md React component examples in one of my libraries when using the latest version of react-styleguidist (currently 9.1.16).

To expand on @cisen's fix posted above, I determined that the issue was with the latest version of acorn (currently 7.0.0). Explicitly installing the latest 6.* version of acorn (currently 6.3.0) as a dev dependency fixed the issue for me.

Specific steps:

# remove dependencies and delete lock file
rm -rf node_modules && rm -rf package-lock.json

# install + add acorn to devDependencies
npm install --save-dev acorn@^6.3.0

# re-install everything from package.json
npm install

Additional context:

• I didn't want to switch my entire local dev/CI workflow from NPM to Yarn; and
• I couldn't rollback to a previous version of react-styleguidist because I'm using React hooks in my code examples.

[rafegoldberg]

@dustin-ruetz's solution worked for me!

rm -rf node_modules && rm -rf package-lock.json  # nix dependencies + lockfile
npm install --save-dev acorn@^6.3.0              # save acorn as dev dependency
npm install                                      # reinstall e'erything else

[josias-r]

It worked for me as well. It's important to remove the lock file and node_modules though... So I guess it's an issue in the dependency tree of react-styleguidist?

[adrienharnay]

Also facing the same issue. I tried:

• installing acorn & acorn-jsx
• installing [email protected]
• other tricks like the resolutions field

Nothing fixed it for me

[marcrele]

installing with yarn worked for me. hat the same problem with versions 9.1.14 and 9.1.16

also got a warning "warning "react-styleguidist > [email protected]" has incorrect peer dependency "react-docgen@^2.17.0 || ^3.0.0-beta".
"

[codler]

I have the same problem in v9.1.16

[elstr]

I have the same problem in v9.1.16

This solved the issue for me rm -rf node_modules && npm install --legacy-bundling

[mancioshell]

i have the same problem with v9.2.0. Please fix it

[MacZel]

same for me :(

[malyzeli]

Seems that explicitly installing acorn helps, but it didn't work for me until I cleared npm cache.

npm cache clean --force
rm -rf node_modules package-lock.js
npm install --save-dev acorn@6
npm install

[sapegin]

I guess some of your project dependencies depends on Acorn 7, because Styleguidist depends only on 6.x. And all the solutions above is how to trick npm/yarn to use Acorn 6 with Stylegudist.

And help with _actually_ fixing the issue is very much appreciated.

[sapegin]

Buble doesn't support Acorn 7:

https://github.com/bublejs/buble/blob/2da2ddb00f751a266fa07759a370a99059e21ce6/package.json#L73

And looks like something weird is happening when Acorn 7 is in the dependency tree. Buble tries to use Acorn 6 from its own node_modules but it doesn't work for some reason. Here might be some difference in module resolution between npm and Yarn, and why Yarn works when npm doesn't.

I've made a simple failing test:

package.json:

{
  "name": "acorn-test",
  "private": true,
  "dependencies": {
    "acorn": "7.1.0",
    "acorn-jsx": "5.1.0",
    "buble": "0.19.8"
  }
}

test.js:

var buble = require('buble');
var result = buble.transform(`<Button />`);

And when I run node test.js I see an error:

SyntaxError: Unexpected token (1:8)
    at Object.pp$4.raise (/Users/asapegin/klsdafafs/node_modules/buble/node_modules/acorn/dist/acorn.js:2825:15)
    at Object.pp.unexpected (/Users/asapegin/klsdafafs/node_modules/buble/node_modules/acorn/dist/acorn.js:689:10)
    at Object.jsx_parseIdentifier (/Users/asapegin/klsdafafs/node_modules/acorn-jsx/index.js:249:14)
    at Object.jsx_parseNamespacedName (/Users/asapegin/klsdafafs/node_modules/acorn-jsx/index.js:258:23)
    at Object.jsx_parseAttribute (/Users/asapegin/klsdafafs/node_modules/acorn-jsx/index.js:335:24)
    at Object.jsx_parseOpeningElementAt (/Users/asapegin/klsdafafs/node_modules/acorn-jsx/index.js:348:35)
    at Object.jsx_parseElementAt (/Users/asapegin/klsdafafs/node_modules/acorn-jsx/index.js:370:33)
    at Object.jsx_parseElement (/Users/asapegin/klsdafafs/node_modules/acorn-jsx/index.js:428:19)
    at Object.parseExprAtom (/Users/asapegin/klsdafafs/node_modules/acorn-jsx/index.js:435:21)
    at Object.pp$3.parseExprSubscripts (/Users/asapegin/klsdafafs/node_modules/buble/node_modules/acorn/dist/acorn.js:2089:21)

Looks at the stack trace I see that Buble uses Acorn 6.3.0 from it's own dependencies but it fails anyway. But looks like acorn-jsx will use whatever the latest version of Acorn is available in the tree.

[sapegin]

Also Buble seems to be in maintenance mode now, so we should consider migrating to something else:

https://github.com/bublejs/buble/issues/220

[iansan5653]

I've been trying to narrow the problem down a bit more:

The test you posted still fails when package.json is:

{
  "name": "acorn-test",
  "private": true,
  "dependencies": {
    "acorn": "^7.1.0",
    "buble": "0.19.8"
  }
}

acorn-jsx has the following dependency:

  "peerDependencies": {
    "acorn": "^6.0.0 || ^7.0.0"
  },

So when buble uses the acorn-jsx plugin to extend acorn, acorn-jsx is perfectly OK with pulling in the ^7.1.0 version instead of 6, and this causes the problem. So buble (and any other module that is not compatible with acorn^7.0.0, should be relying not on acorn-jsx^5.0.0, but on ^4.0.0.

In short this is definitely something that should be fixed upstream.

[iansan5653]

EDIT: Never mind. This causes all examples to go to Error: Unknown transform 'asyncAwait' because we need the recent version of buble at the moment.

A possible fix here would be to lock buble to =0.19.4 which is the most recent version that depended on acorn-jsx^4.0.0. Not the prettiest solution but it would fix the problem until you're able to move away from Buble altogether or at least until the issue I opened over there gets resolved, which might take time as it's not an actively developed project.

Changing package.json in the aforementioned test to:

{
  "name": "acorn-test",
  "private": true,
  "dependencies": {
    "acorn": "^7.1.0",
    "buble": "=0.19.4"
  }
}

works just fine.

[malyzeli]

Also Buble seems to be in maintenance mode now, so we should consider migrating to something else:

bublejs/buble#220

@sapegin Sorry for offtopic considering scope of this issue but what is the reason for using something like buble instead of battle-tested babel? If there are any articles/discussions answering my question, please point me there. Thank you!

[sapegin]

@malyzeli Primarily its size: babel-standalone is gigantic and we'll need to find a way to lazy load it somehow which is tricky because we need it to render all the examples.

[JustFly1984]

We also have same issue. https://react-google-maps-api-docs.netlify.com/ Nothing helps.

[sapegin]

@JustFly1984 This kind of comments don't add anything to the discussion and significantly contribute to maintainers burnout. Now I have to either lock this thread to prevent future spam comment, which will also prevent folks who are actually trying to help from posting useful comments. Or unsubscribe myself to stop receiving spam comments — my own mental health is definitely more important to me than someone's problem with their project.

[JustFly1984]

@sapegin sorry mate, I didn't mean to be rude. I use your open source project in my open source project.

I'm building my project with tsdx, and it has acorn@7 in dependencies, so I can't add [email protected] to resolution in package.json, cos it breaks build.

[iansan5653]

Looks like acornjs/acorn#887 fixed this! Since the release of [email protected] I'm able to run the test that @sapegin posted, and after running npm update acorn --depth 20 in my project, I'm able to use Styleguidist again. ❤️

[sergdenisov]

@iansan5653 I've made that fix in https://github.com/styleguidist/react-styleguidist/pull/1495.

[Betree]

Fix worked for us. Thanks!

[iamchathu]

Tried it. Still have the issue "react-styleguidist": "^10.6.1"

[JustFly1984]

@iamchathu check if you have semicolons everywhere. I had issues with files until I’ve set semicolons in place. This is not obvious, and it could be helpful if there was no semicolons required.

[iamchathu]

@JustFly1984 I'm using to prettier rules to set semi colons and I double checked but seems there is an issue yet.