Trying to set up documentation for a react based project.
Using a fresh 'my-app' from 'create-react-app' and a very naive *.js file I get an error:
C:\xampp\htdocs\my-app2\node_modules\react-styleguidist\bin\styleguidist.js
You can now view your style guide in the browser:
Local: http://localhost:6060/
On your network: http://10.100.11.165:6060/
FAIL Failed to compile
./src/src/topnav/topnav.js
SyntaxError: C:\xampp\htdocs\my-app2\src\src\topnav\topnav.js: Support for the experimental syntax 'classProperties' isn't currently enabled (8:20):
6 | */
7 | export default class Button extends React.Component {
> 8 | static propTypes = {
| ^
9 | /** Description of prop "foo". */
10 | foo: PropTypes.number,
11 | /** Description of prop "baz". */
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
@ ./node_modules/react-styleguidist/lib/index.js (./node_modules/react-styleguidist/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/index.js) 46:30-89
@ ./node_modules/react-styleguidist/lib/index.js
@ multi ./node_modules/react-styleguidist/lib/index ./node_modules/react-styleguidist/node_modules/react-dev-utils/webpackHotDevClient.js
Anyone familiar with this error?
I suspect the fix is somehow related to Babel, yet, I have not been able to solve it from previous queries.
Add @babel/plugin-proposal-class-properties
to .babelrc
and @babel/plugin-proposal-class-properties
to package.json
, the error also says this
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
package.json
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
...