Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add mjs config details to installation docs #402

Merged
merged 3 commits into from
Mar 1, 2019

Conversation

aldeed
Copy link
Contributor

@aldeed aldeed commented Mar 1, 2019

Resolves #399
Impact: minor
Type: docs

Updated the Installing and Importing article to explain how to avoid EcmaScript module errors with Webpack (NextJS / create-react-app).

Signed-off-by: Eric Dobbertin <eric@dairystatedesigns.com>
@aldeed aldeed self-assigned this Mar 1, 2019
@rc-publisher
Copy link
Collaborator

rc-publisher commented Mar 1, 2019

🚀 Preview deployed

Built with commit 67a975c

https://deploy-preview-402--stoic-hodgkin-c0179e.netlify.com

Copy link
Contributor

@machikoyasuda machikoyasuda left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One small format change!


Webpack 4 tries to use .mjs files, which are EcmaScript modules, if a package provides them. However, there is still mixed support for EcmaScript modules and when your app or a package mixes NPM packages with CommonJS and EcmaScript exports, errors can happen. If you see an error similar to `Can't import the named export 'Component' from non EcmaScript module` when building or starting your Webpack app, the solution is to add the following in your Webpack config `module.rules` array:

```js
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Styleguidist will try to render any ```js code. So it ends up looking like this:

screen shot 2019-03-01 at 10 23 39 am

screen shot 2019-03-01 at 10 23 29 am

Use jsx static or jsx noeditor so the editor doesn't show up: https://react-styleguidist.js.org/docs/documenting.html#usage-examples-and-readme-files

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks I forgot about this

Signed-off-by: Eric Dobbertin <eric@dairystatedesigns.com>
Signed-off-by: Eric Dobbertin <eric@dairystatedesigns.com>
@machikoyasuda machikoyasuda merged commit 2fe1eca into master Mar 1, 2019
@machikoyasuda machikoyasuda deleted the docs-aldeed-installation-mjs branch March 1, 2019 21:37
@rc-publisher
Copy link
Collaborator

🎉 This PR is included in version 0.64.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@rc-publisher rc-publisher added the released Applied automatically by semantic-release label Mar 5, 2019
@hbadih
Copy link

hbadih commented Nov 7, 2019

I have and issue when I run npm start I get this issue
./node_modules/postcss-preset-env/index.mjs
Can't import the named export 'feature' from non EcmaScript module (only default export is available)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Applied automatically by semantic-release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Can't import the named export 'Component' from non EcmaScript module
4 participants