Setting up Babel to settle
Create-React-App has provided us with a lot of conveniences, a one-stop solution, and the latest stable packages. But other libraries that based on Create-React-App(CRA) may not catch up that speed in updating the spec.
In order to create a Storybook (or other third party libraries) while keeping the CRA environment, we have to set up an extra set of Babel setting and Webpack setting, of which Create-React-app has placed somehow hidden and provide a good compatibility on different syntax.
But other libraries cannot compile the code base easily with the barely customized Babel and Webpack environment. Different compilation error arise. For example, let's take a look at the following compile error in using Storybook.
Setting Initial State without a constructor:
In Class functions:
They are working fine in CRA, but the syntax isn't included in ES6. and yet Create-React-app does not produce such a problem.
We can resolve these problem by adding a Babel plugin “babel-plugin-transform-class-properties”. The recommended method is the configuration via [code].babelrc[/code] which is set at the root directory.
For more information, about “babel-plugin-transform-class-properties”, please visit the page of plugin babel-plugin-transform-class-properties
https://babeljs.io/docs/en/babel-plugin-transform-class-properties/
Similar Discussion
🐛 React state init Unexpected token in Component · Issue #849 · parcel-bundler/parcel · GitHub\
Leave a Reply