react-styleguidist: Unexpected token in code example

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

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 47
Comments: 43 (8 by maintainers)

Commits related to this issue

build: update project dependency, including a major bump of react-styleguidist BREAKING CHANGE: react-styleguidist@9.x has breaking changes to how examples are loaded, read more here: https://github.... — committed to zillow/create-react-styleguide by deleted user 5 years ago
build: update project dependency, including a major bump of react-styleguidist BREAKING CHANGE: react-styleguidist@9.x has breaking changes to how examples are loaded, read more here: https://github.... — committed to zillow/create-react-styleguide by deleted user 5 years ago
deps(styleguidist): lock version to 9.0.4 See https://github.com/styleguidist/react-styleguidist/issues/1321 — committed to opencollective/opencollective-frontend by Betree 5 years ago
Add acorn dependency, fixes broken styleguide, refer to https://github.com/styleguidist/react-styleguidist/issues/1321 — committed to dnlkoch/geostyler by dnlkoch 5 years ago

Most upvoted comments

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.

+30

dustin-ruetz on Aug 21, 2019

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.

+22

vollmerr on Mar 27, 2019

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

+11

WaldoJeffers on May 22, 2019

I have the same problem in v9.1.16

codler on Oct 29, 2019

Thank you, downgrading to 9.0.4 fix the problem

Sly36 on Mar 28, 2019

@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.

sapegin on Nov 3, 2019

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

ManishBobde on Oct 29, 2019

yarn add acorn acorn-jsx

It works for me!

cisen on Jul 30, 2019

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

mancioshell on Oct 29, 2019

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

JonathanLehner on May 2, 2019

@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 acorn@6.3.0 to resolution in package.json, cos it breaks build.

JustFly1984 on Nov 3, 2019

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.

karsai5 on May 24, 2019

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

sergdenisov on Dec 16, 2019

Looks like acornjs/acorn#887 fixed this! Since the release of acorn@6.4.0 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. ❤️

iansan5653 on Nov 27, 2019

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

JustFly1984 on Nov 3, 2019

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?

josias-r on Aug 22, 2019

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 react-styleguidist@9.0.4

roblevintennis on Aug 12, 2019

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.

swashcap on Aug 4, 2019

Fix worked for us. Thanks!

Betree on Dec 16, 2019

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.

iansan5653 on Nov 3, 2019

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 on Oct 29, 2019

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

malyzeli on Oct 28, 2019

same for me 😦

MacZel on Oct 29, 2019

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

michaelkutuzov on Oct 29, 2019