React-styleguidist: 'Parser' is not exported from 'acorn'

[bricss]

Hi everyone,

I'm trying to use Styleguidist within one of current React + TS projects.
And getting this error in console, right after npx styleguidist server:

./node_modules/react-styleguidist/lib/client/utils/getAst.js
Attempted import error: 'Parser' is not exported from 'acorn'.
 @ ./node_modules/react-styleguidist/lib/client/utils/splitExampleCode.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/ReactExample.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/ReactExample/index.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/Preview.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Preview/index.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/Playground.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Playground/index.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/Examples.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Examples/index.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Section/Section.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Section/index.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/Sections.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/Sections/index.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/StyleGuide.js
 @ ./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/index.js
 @ ./node_modules/react-styleguidist/lib/client/utils/renderStyleguide.js
 @ ./node_modules/react-styleguidist/lib/client/index.js
 @ multi ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-styleguidist/node_modules/react-dev-utils/webpackHotDevClient.js

Config file looks like this:

module.exports = {
  ignore: ['**/*.story.{ts,tsx}'],
  propsParser: require('react-docgen-typescript').parse,
  webpackConfig: require('./config/webpack.config'),
};

Versions:

Node.js - v11.10.1
React - v16.8.3
Styleguidist - v9.0.1
TypeScript - v3.3.3
Webpack - v4.29.6

Does anyone have an idea what it can be or how to fix it?

[Spenc84]

I am also getting the same error.

I recently upgraded Styleguidist from v7.3.11 to v9.0.3.
This in turn required me to upgrade Webpack (from v2 to v4.29.6).

Upgrading Webpack required me to upgrade many of my other dependencies as well, so I went ahead and upgraded everything to their latest versions, though this issue seems to only pertain to Styleguidist, Acorn, and potentially Webpack.

I removed my node_modules and did a clean install but that didn't seem to help.

[Spenc84]

It looks like the issue has something to do with the fact that Acorn is using the new .mjs file extension.
I updated my webpack config file to include .mjs before .js in resolve.extensions, and I added mjs to the list of extensions that my babel-loader tests and that seems to have resolved the issue.

[avespoli-bf]

Still experiencing this issue. Even after following @Spenc84 s comment above. I can build all of my components with webpack and babel just fine but trying to build the styleguide gives me the error above.

[scousino]

It looks like the issue has something to do with the fact that Acorn is using the new .mjs file extension.
I updated my webpack config file to include .mjs before .js in resolve.extensions, and I added mjs to the list of extensions that my babel-loader tests and that seems to have resolved the issue.

@Spenc84 Could you post a link to your webpack and styleguide config files? I did what you described above, and am still seeing the issue.

[Spenc84]

@scousino Well I don't believe I have current versions of either posted to any publicly available space at the moment, but my resolve looks like this:

resolve: { extensions: [ '.web.mjs', '.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx' ], ... }

and my babel-loader looks like this:

{ test: /\.(js|mjs|jsx)$/, loader: require.resolve('babel-loader'), ... }

My styleguidist config file is rather large so I wouldn't want to post it here in this forum, but I don't believe that there is anything in it that contributed to the cause or resolution of that particular error.

If you're running node v10+ and have updated your webpack config to include the .mjs ext and are still getting the same error, I'd recommend running create-react-app in a new directory, eject it, and take a look at their webpack config file. Styleguidist boasts being able to run out-of-the-box with the newest version of create-react-app applications, so a similar webpack configuration to what they use should be adequate.

[scousino]

Are we going to get any sort of feedback on when this will be fixed in the library?

[Spenc84]

@scousino Unfortunately I don't think that there is a fix coming. To be honest, I don't think it's a Styleguidist issue so I'm not sure that there would even be anything for them to fix. The error is produced by Webpack during it's build process, and primarily because it doesn't know how to handle the .mjs files used by Acorn. If you're pointing Stylegudist to a custom Webpack configuration file then the rules for handling .mjs files have to be defined in that configuration file.

[scousino]

@Spenc84 I wonder if this still occurs if you don't point Styleguidist to a custom Webpack config. If that's the case then I'd say it would be a Styleguidist problem. But also, if my custom Webpack configuration file needs to support handling .mjs files that should be outlined in the documentation somewhere. I think this problem would easily be fixed by changing how they import acorn in the getAst file from an import statement to a regular require statement.

[stale[bot]]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.

[archik408]

still actual for styleguidist v10.0.0, as fix option in your webpack config you can add alias for acorn:

    resolve: {
      alias: {
        acorn: require.resolve('acorn/dist/acorn.js')
      },
      extensions: ['.js', '.json']
    },

maybe will help someone