React-styleguidist: How can I import 'antd' or any other lib ?

[justb]

Version
9.0.0-beta4

Current behavior

To reproduce

Expected behavior
I can use antd Button in ButtonGroup

[sapegin]

The code on the screenshots is different and the error message may explain what's wrong.

[robertaird]

I'm having this same issue in version 9.0.0. I can't seem to import other components into examples, or anything from node_modules. The acorn error is thrown on all components, whether it renders successfully or not. Same thing if I try require instead of import.

Update, it's hack-y but I got it to work by importing things twice in two different code blocks:

[af]

I'm having the same issue as @robertaird when trying to upgrade from v8.0.6 to v9.0.0. Any import statement in my example (jsx inside a markdown file) results in this error being rendered in the browser:

Error: import or require() statements can be added only by editing a Markdown example file: $importName

(here $importName is a placeholder for whatever I tried to import). There is also an error in the console whenever this happens, screenshot below with the full traceback:

Note: His "double import" trick also works for me but I'm hoping not to need that, for obvious reasons :)

[ibrambe]

Similar issue here with v9.0.0:

styleguide.config.js

module.exports = {
  moduleAliases: {
    '@mycompany/react-components': path.resolve(__dirname, 'src/components')
  }
};

AppBar.md

 `` `jsx noeditor
import { Text } from '@mycompany/react-components';

<AppBar>
  <Text>
    Title
  </Text>
</AppBar>;
`` `

Error:
_Error: import or require() statements can be added only by editing a Markdown example file: @mycompany/react-components_

[robertaird]

I tried tracking down what was happening (under the assumption that I was doing it wrong) but I didn't have much luck. By the time the example hits this file, none of the imported filepaths are present in the 'requireMap' object. It seems like Acorn is choking on the jsx the first time around, for some reason, causing the imports in the md files to be missed by webpack(?).

[gwuhaolin]

I debug [email protected] and find this issuse cause by acorn getAst fail in react-styleguidist/lib/loaders/utils/getImports.js:

acorn think this position has SyntaxError: Unexpected token (6:14)

[sheldonHua]

Has anyone solve this problem? I'm also getting the error:

Error: import or require() statements can be added only by editing a Markdown example file:

When I try to import other components into the markdown file.

[santaclauze]

Confirmed. @robertaird 's super hack works. But as expressed, it is a bit 'harcore'.

Any followup on this? It seems to be quite a recurrent problem.

[timsnadden]

I have had success fixing this problem by deleting yarn.lock (or package-lock.json for npm users) and reinstalling. I'm not sure what the cause was but one of the dependencies, perhaps transitive, is updated to fix this issue

[kopax]

@timsnadden how can deleting the lock file can help solving the import issue?

I am also investigating and we dowgraded to v8.0.6 our documentation because of that. Can somebody help me point to the commint that changed the behavior in react-styleguidist? I can't find what change between v8 and v9

[kopax]

/cc @sapegin :+1:

https://github.com/styleguidist/react-styleguidist/issues/1310#issuecomment-471142372

I think timsnadden got the cause, I have a similar case, can we get your opinion about it? I think you have a clue for us. We will get the reason and the fix.

[sapegin]

Maybe try to upgrade Buble and Acorn, if the problem is related to one of them. Though there's a problem with Buble — https://github.com/bublejs/buble/issues/171, the fix wasn't yet released.

[kopax]

I have found a way without yarn:

Add to your dev dependencies:

+    "acorn": "^6.0.2",
+    "acorn-jsx": "^5.0.0",

Rerun npm install and it should be working.

[shenshanyoumu]

I have found a way without yarn:

Add to your dev dependencies:

+    "acorn": "^6.0.2",
+    "acorn-jsx": "^5.0.0",

Rerun npm install and it should be working.

it works for me,thanks

[EvHaus]

For me, doing a full clean re-install helped. ie:

rm -rf yarn.lock node_modules
yarn install

Seems like something in the dependencies is indeed the culprit here.

[paibamboo]

@kopax

@timsnadden how can deleting the lock file can help solving the import issue?

I think this might be the same problem of npm + webpack + acorn. See this comment

[kopax]

@paibamboo fixing version solved the issue for the moment. And yes it's related with npm+acorn, not sure how webpack is related.

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

[roblevintennis]

Fwiw, I tried the removal of packages and reinstall without success. The acorn tip did work though:
yarn add --dev acorn acorn-jsx

[elstr]

Fwiw, I tried the removal of packages and reinstall without success. The acorn tip did work though:
yarn add --dev acorn acorn-jsx

If this doesn't work try rm -rf node_modules && npm install --legacy-bundling

[JustFly1984]

for me solution was to add

"resolutions": {
    "acorn": "6.4.0"
  }

to package.json