Support for the experimental syntax ‘classProperties’ isn’t currently enabled
Change “plugins”: [ “@babel/plugin-proposal-class-properties” ] To “plugins”: [ [ “@babel/plugin-proposal-class-properties”, { “loose”: true } ] ] This worked for me
babeljs
How to publish a module written in ES6 to NPM?
The pattern I have seen so far is to keep the es6 files in a src directory and build your stuff in npm’s prepublish to the lib directory. You will need an .npmignore file, similar to .gitignore but ignoring src instead of lib.
“You may need an appropriate loader to handle this file type” with Webpack and Babel
You need to install the es2015 preset: npm install babel-preset-es2015 and then configure babel-loader: { test: /\.jsx?$/, loader: ‘babel-loader’, exclude: /node_modules/, query: { presets: [‘es2015’] } }
“unexpected token import” in Nodejs5 and babel?
From the babel 6 Release notes: Since Babel is focusing on being a platform for JavaScript tooling and not an ES2015 transpiler, we’ve decided to make all of the plugins opt-in. This means when you install Babel it will no longer transpile your ES2015 code by default. In my setup I installed the es2015 preset … Read more
Babel 6 changes how it exports default
If you want CommonJS export behavior, you’ll need to use CommonJS directly (or use the plugin in the other answer). This behavior was removed because it caused confusion and lead to invalid ES6 semantics, which some people had relied on e.g. export default { a: ‘foo’ }; and then import {a} from ‘./foo’; which is … Read more
Export multiple classes in ES6 modules
Try this in your code: import Foo from ‘./Foo’; import Bar from ‘./Bar’; // without default export { Foo, Bar, } Btw, you can also do it this way: // bundle.js export { default as Foo } from ‘./Foo’ export { default as Bar } from ‘./Bar’ export { default } from ‘./Baz’ // and … Read more
What does “The code generator has deoptimised the styling of [some file] as it exceeds the max of “100KB”” mean?
This is related to compact option of Babel compiler, which commands to “not include superfluous whitespace characters and line terminators. When set to ‘auto’ compact is set to true on input sizes of >100KB.” By default its value is “auto”, so that is probably the reason you are getting the warning message. See Babel documentation. … Read more
How to resolve “Cannot use import statement outside a module” in jest
Also using Babel, Typescript and Jest. Had the same failure, driving me crazy for hours. Ended up creating a new babel.config.js file specifically for the tests. Had a large .babelrc that wasn’t getting picked up by jest no matter what i did to it. Main app still uses the .babelrc as this overrides babel.config.js files. … Read more
Null-safe property access (and conditional assignment) in ES6/2015
Update (2022-01-13): Seems people are still finding this, here’s the current story: Optional Chaining is in the specification now (ES2020) and supported by all modern browsers, more in the archived proposal: https://github.com/tc39/proposal-optional-chaining babel-preset-env: If you need to support older environments that don’t have it, this is probably what you want https://babeljs.io/docs/en/babel-preset-env Babel v7 Plugin: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining … Read more
Unable to access React instance (this) inside event handler [duplicate]
this.changeContent needs to be bound to the component instance via this.changeContent.bind(this) before being passed as the onChange prop, otherwise the this variable in the body of the function will not refer to the component instance but to window. See Function::bind. When using React.createClass instead of ES6 classes, every non-lifecycle method defined on a component is … Read more