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
196
votes
14 answers

"You may need an appropriate loader to handle this file type" with Webpack and Babel

I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message: You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' Here is…
egidra
  • 8,537
  • 19
  • 62
  • 89
180
votes
5 answers

Convert ES6 Iterable to Array

Say you have an array-like Javascript ES6 Iterable that you know in advance will be finite in length, what's the best way to convert that to a Javascript Array? The reason for doing so is that many js libraries such as underscore and lodash only…
Michael Bylstra
  • 5,042
  • 4
  • 28
  • 24
176
votes
3 answers

ES6 getter/setter with arrow function

I'm using babel6 and for my pet project I'm creating a wrapper for XMLHttpRequest, for the methods I can use: open = (method, url, something) => { return this.xhr.open(method, url, something); } but for the properties arrow function doesn't…
Gabor Dolla
  • 2,680
  • 4
  • 14
  • 13
173
votes
23 answers

Support for the experimental syntax 'classProperties' isn't currently enabled

While I was setting up React within Django project I came across this error ModuleBuildError in Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\1Sun\Cebula3\cebula_react\assets\js\index.js:…
1Sun
  • 2,305
  • 5
  • 14
  • 21
168
votes
11 answers

How to publish a module written in ES6 to NPM?

I was about to publish a module to NPM, when I thought about rewriting it in ES6, to both future-proof it, and learn ES6. I've used Babel to transpile to ES5, and run tests. But I'm not sure how to proceed: Do I transpile, and publish the resulting…
Traveling Tech Guy
  • 27,194
  • 23
  • 111
  • 159
154
votes
25 answers

Parsing error : Cannot find module 'next/babel'

Update 1: Updated the latest working solution to @Jeevan Rupacha answer, please scroll below to check it out. I have been encountering this error on every single new Next.js project that I create. The page can be compiled without any problem, it…
mitchiri_neko
  • 1,735
  • 2
  • 7
  • 12
151
votes
1 answer

Upgrade to Babel 7: Cannot read property 'bindings' of null

I just upgraded to Babel 7 (from 6) by running these commands: npm remove babel-cli npm install --save-dev @babel/cli @babel/core @babel/preset-env Here is my .babelrc file: { "presets": ["env"] } Then I ran: babel js/src --out-dir js/dist And it…
rap-2-h
  • 30,204
  • 37
  • 167
  • 263
150
votes
5 answers

Re-export default in ES 6 modules

In ES6, is it possible to shorten the following code. I have an App.js file and an index.js. index.js import App from './App'; export default App; Something like this index.js export default App from './App.js'
sanchit
  • 2,328
  • 2
  • 18
  • 22
146
votes
7 answers

How do I install the babel-polyfill library?

I just started to use Babel to compile my ES6 javascript code into ES5. When I start to use Promises it looks like it's not working. The Babel website states support for promises via polyfills. Without any luck, I tried to…
Shlomi
  • 3,622
  • 5
  • 23
  • 34
140
votes
14 answers

Extending Error in Javascript with ES6 syntax & Babel

I am trying to extend Error with ES6 and Babel. It isn't working out. class MyError extends Error { constructor(m) { super(m); } } var error = new Error("ll"); var myerror = new MyError("ll"); console.log(error.message) //shows up…
Karel Bílek
  • 36,467
  • 31
  • 94
  • 149
133
votes
5 answers

What's the difference between babel-preset-stage-0, babel-preset-stage-1 etc?

My question is : What's the difference between babel-preset-stage-0,babel-preset-stage-1,babel-preset-stage-2 and babel-preset-stage-3, and what's the best choice when we develop with ES6?
flyingzl
  • 1,811
  • 3
  • 15
  • 18
130
votes
7 answers

Service mocked with Jest causes "The module factory of jest.mock() is not allowed to reference any out-of-scope variables" error

I'm trying to mock a call to a service but I'm struggeling with the following message: The module factory of jest.mock() is not allowed to reference any out-of-scope variables. I'm using babel with ES6 syntax, jest and enzyme. I have a simple…
Ria
  • 1,900
  • 4
  • 14
  • 21
129
votes
9 answers

SyntaxError with Jest and React and importing CSS files

I am trying to get my first Jest Test to pass with React and Babel. I am getting the following error: SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: Unexpected token …
Mano Dupont
  • 1,301
  • 2
  • 8
  • 7
127
votes
13 answers

Preset files are not allowed to export objects

I have a carousel file in which I want to get index.js and build block.build.js, so my webpack.config.js is: var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase:…
sonia maklouf
  • 2,713
  • 4
  • 18
  • 28
122
votes
3 answers

Why does babel rewrite imported function call to (0, fn)(...)?

Given an input file like import { a } from 'b'; function x () { a() } babel will compile it to 'use strict'; var _b = require('b'); function x() { (0, _b.a)(); } but when compiled in loose mode the function call is output as _b.a(); I've…
Will Smith
  • 1,905
  • 1
  • 14
  • 19