React-styleguidist: 9.0.1 npm package does not support require/import in Markdown examples

[rgrwkmn]

Current behavior

When installing v9.0.0 or v9.0.1 from npm, I am not able to use require or import to include other JS files in Markdown examples. If I git clone the react-styleguidist repo directly (master branch) and npm link it to my project, then it works.

To reproduce

https://github.com/rgrwkmn/styleguidist-require-import-bug

Expected behavior

I want to import other JS files in my Markdown examples according to the documentation.

[stepankuzmin]

Same issue here. But I could import external libraries, but couldn't import local components.

[stepankuzmin]

Well, in my case this issue was resolved by completely removing prettier-eslint dependencies from my project:

"prettier-eslint": "^8.8.2",
"prettier-eslint-cli": "^4.7.1"

That's pretty strange behavior, though.

[sapegin]

Feel free to send a pull request with a fix 👾

[rgrwkmn]

@sapegin what commands do you run to generate the build for NPM?

[valleywood]

I had the same issue and I can confirm that removing dependencies to prettier solved the problem, would be grateful if someone could provide a fix for it though.

Here is the error that i get:
Error: import or require() statements can be added only by editing a Markdown example file

[rgrwkmn]

@valleywood are the prettier dependencies part of your project or of react-styleguidist? My bug reproduction repo does not have any other dependencies.

[valleywood]

@valleywood are the prettier dependencies part of your project or of react-styleguidist? My bug reproduction repo does not have any other dependencies.

I had a reference to "prettier-eslint-cli": "4.7.1" in my project (not a dependency of react-styleguidist). I removed it, removed the node_modules folder and and re-run yarn and everything started working again.

Strange that it doesn't work for you despite not having this dependency 🤔

[rgrwkmn]

@valleywood can you clone my repro repo and try it? It should only take a minute to verify. Afaik nobody has confirmed that it also reproduces the bug for them:

git clone https://github.com/rgrwkmn/styleguidist-require-import-bug.git \
&& cd styleguidist-require-import-bug \
&& npm install \
&& npm run styleguidist

[valleywood]

@rgrwkmn Tried but got permission denied when cloning

[rgrwkmn]

@valleywood thanks for trying! I updated the commands to use HTTPS instead of SSH, try that if you have a minute.

[valleywood]

@rgrwkmn Confirmed, I can repeat the error with your solution. I also see that your node_modules folder doesn't contain prettier-eslint-cli (a lot of other stuff though :))

[timsnadden]

What fixed this for me was adding the following to devServer in the styleguidist config.

headers: {
    'Access-Control-Allow-Origin': '*',
},

[rgrwkmn]

@timsnadden thanks for the report! That must be having some interaction with other configs you're using because I added it to the styleguidist webpackConfig in my repro repo and it didn't fix the issue there. I also upgraded to 9.0.3 and the outcome is the same.

There is a difference in the package served by NPM and the code from running npm compile in the cloned github repo. If @sapegin can give me some insight into the build process for NPM I'll take a look. I didn't see any info on that in the contributing docs.

For now my workaround is linking to my locally built version of styleguidist.

[timsnadden]

@rgrwkmn I cloned your repo, deleted package-lock.json and ran npm install && npm run styleguidist and it worked. It appears that it's a transitive dependency that has been updated and fixed the issue

[rgrwkmn]

Thanks @timsnadden, I just tried the same and it worked with react-styleguidist version 9.0.3! I pushed the updated package-lock.json to my repo if anyone cares to try to find the root cause.