Questions tagged [babeljs]

Babel (formerly 6to5) is a JavaScript compiler. It transforms ES6+/ES2015 code into ES5 code.

Babel (formerly 6to5) is a JavaScript compiler.
It transforms ES6+/ES2015 code into ES5 code.


Important Note about Babel v6

With Babel v6, Babel became a platform for JS code transformations. That means it doesn't include any ES2015 to ES5 transformers by default. This has to be enabled explicitly.

Please see


Resources:

9692 questions
120
votes
14 answers

Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled

I'm trying to build JS react project with decorators. My .babelrc looks like this: { "presets": [ "@babel/preset-env", "@babel/preset-react", ], "plugins": [ "@babel/plugin-transform-runtime", …
olga_babic
  • 1,600
  • 3
  • 9
  • 18
118
votes
4 answers

Dynamically add child components in React

My goal is to add components dynamically on a page/parent component. I started with some basic example template like this: main.js: var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(,…
Justin Trevein
  • 1,496
  • 3
  • 12
  • 16
111
votes
14 answers

Cannot find module '@babel/core'

I am following along with this webpack4/react tutorial: https://www.youtube.com/watch?v=deyxI-6C2u4 I have followed it exactly up until the part where he runs npm start. The difference is, his app runs, and mine gets the error: Cannot find module…
J. Doe
  • 1,177
  • 2
  • 8
  • 11
111
votes
10 answers

Babel file is copied without being transformed

I have this code: "use strict"; import browserSync from "browser-sync"; import httpProxy from "http-proxy"; let proxy = httpProxy.createProxyServer({}); and I have installed babel-core and babel-cli globally via npm. The point is when I try to…
Raul Vallespin
  • 1,323
  • 2
  • 11
  • 16
106
votes
9 answers

Babel 7 - ReferenceError: regeneratorRuntime is not defined

I have an application that is a node backend and a react frontend. I get the following error when i try to build/run my node application. Node: v10.13.0 Error: dist/index.js:314 regeneratorRuntime.mark(function _callee(productId) { …
Kay
  • 17,906
  • 63
  • 162
  • 270
104
votes
3 answers

ES6 `export * from import`?

Is there a syntax using ES6 or ES7 or babel which will allow me to easily bundle together many groups of sub files? E.g., given: ./action_creators/index.js ./action_creators/foo_actions.js ./action_creators/bar_actions.js Have index.js import foo…
Jordan Warbelow-Feldstein
  • 10,510
  • 12
  • 48
  • 79
102
votes
5 answers

Webpack babel 6 ES6 decorators

I've got a project written in ES6 with webpack as my bundler. Most of the transpiling works fine, but when I try to include decorators anywhere, I get this error: Decorators are not supported yet in 6.x pending proposal update. I've looked over…
Pavlin
  • 5,390
  • 6
  • 38
  • 51
101
votes
3 answers

Can't require() default export value in Babel 6.x

In Babel 5.x, I can write the following code: app.js export default function (){} index.js require('babel/register'); require('./app')(); Then, I can run node index.js with no errors. However, using Babel 6.x, running the following…
XGHeaven
  • 1,696
  • 2
  • 14
  • 17
101
votes
2 answers

babel CLI copy nonjs files

I'm running a babel cli command babel src --out-dir lib To copy the es6 scripts from src into lib. However, it wont copy css/scss files I have in the src/ folder. Is there a way to make it copy them as well?
yangli-io
  • 16,760
  • 8
  • 37
  • 47
98
votes
11 answers

`regeneratorRuntime` is not defined when running Jest test

The title pretty much explains what I'm facing. I'm trying to test a React component that has some state, and I attempt to provide my store to the component in order to get what it needs. When I run the test of the component using Jest, I get the…
rafafan2010
  • 1,559
  • 2
  • 14
  • 23
98
votes
17 answers

Babel unexpected token import when running mocha tests

The solutions offered in other related questions, such as including the proper presets (es2015) in .babelrc, are already implemented in my project. I have two projects (lets call them A and B) which both use ES6 module syntax. In Project A, I'm…
ThinkingInBits
  • 10,792
  • 8
  • 57
  • 82
95
votes
16 answers

'import' and 'export' may only appear at the top level

I'm using webpack with vuejs. Webpack does its thing, but when I look at the outputted app.js file, it gives me this error. 'import' and 'export' may only appear at the top level I'm assuming it's a problem with babel not converting the code?…
Jayson H
  • 1,928
  • 4
  • 21
  • 28
95
votes
14 answers

Error: Missing class properties transform

Error: Missing class properties transform Test.js: export class Test extends Component { constructor (props) { super(props) } static contextTypes = { router: React.PropTypes.object.isRequired } .babelrc: { "presets": ["es2015",…
speak
  • 5,202
  • 4
  • 36
  • 41
94
votes
8 answers

UglifyJS throws unexpected token: keyword (const) with node_modules

A small project I started make use a node module (installed via npm) that declares const variables. Running and testing this project is well, but browserify fails when UglifyJS is executed. Unexpected token: keyword (const) Here is a generic Gulp…
Yanick Rochon
  • 51,409
  • 25
  • 133
  • 214
93
votes
3 answers

Webpack import returns undefined, depending on the order of imports

I'm using webpack + babel. I have three modules looking like this: // A.js // some other imports here console.log('A'); export default 'some-const'; // B.js import someConst from './A'; console.log('B', someConst); export default…
Alec Mev
  • 4,663
  • 4
  • 30
  • 44