Questions tagged [babeljs]
Babel (formerly 6to5) is a JavaScript compiler. It transforms ES6+/ES2015 code into ES5 code.
babeljs
9,762
questions
1321
votes
11
answers
845k
views
Using Node.js require vs. ES6 import/export
In a project I am collaborating on, we have two choices on which module system we can use:
Importing modules using require, and exporting using module.exports and exports.foo.
Importing modules using ...
- 13.9k
894
votes
12
answers
568k
views
Call async/await functions in parallel
As far as I understand, in ES7/ES2016 putting multiple await's in code will work similar to chaining .then() with promises, meaning that they will execute one after the other rather than in parallel. ...
- 13.6k
828
votes
48
answers
773k
views
Babel 6 regeneratorRuntime is not defined
I'm trying to use async/await from scratch on Babel 6, but I'm getting regeneratorRuntime is not defined.
.babelrc file
{
"presets": [ "es2015", "stage-0" ]
}
...
- 99.6k
553
votes
19
answers
1.0m
views
Getting Unexpected Token Export
I am trying to run some ES6 code in my project but I am getting an unexpected token export error.
export class MyClass {
constructor() {
console.log("es6");
}
}
- 5,587
401
votes
6
answers
283k
views
How do I generate sourcemaps when using babel and webpack?
I want to set up a config to generate sourcemaps. I'm running webpack serve from the command line, which compiles successfully. But I really need sourcemaps. This is my webpack.config.js.
var webpack =...
user916367
379
votes
31
answers
413k
views
How to resolve "Cannot use import statement outside a module" from Jest when running tests?
I have a React application (not using Create React App) built using TypeScript, Jest, Webpack, and Babel. When trying to run yarn jest, I get the following error:
I have tried removing all packages ...
- 4,107
342
votes
8
answers
351k
views
babel-loader jsx SyntaxError: Unexpected token [duplicate]
I'm a beginner in React + Webpack.
I found a weird error in my hello world web app.
I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx ...
- 3,689
317
votes
8
answers
248k
views
ES6 exporting/importing in index file
I am currently using ES6 in an React app via webpack/babel.
I am using index files to gather all components of a module and export them. Unfortunately, that looks like this:
import Comp1_ from './...
- 6,834
287
votes
10
answers
319k
views
Correct way to import lodash
I had a pull request feedback below, just wondering which way is the correct way to import lodash?
You'd better do import has from 'lodash/has'.. For the earlier version
of lodash (v3) which by ...
- 18.9k
243
votes
19
answers
89k
views
Unable to access React instance (this) inside event handler [duplicate]
I am writing a simple component in ES6 (with BabelJS), and functions this.setState is not working.
Typical errors include something like
Cannot read property 'setState' of undefined
or
this....
- 3,409
238
votes
10
answers
153k
views
NULL-safe property access & conditional assignment in EcmaScript 6+
Is there an operator that would allow the following logic (on line 4) to be expressed more succinctly?
const query = succeed => (succeed? {value: 4} : undefined);
let value = 3;
for (let x of [...
- 19.9k
227
votes
12
answers
207k
views
What does "The code generator has deoptimised the styling of [some file] as it exceeds the max of "100KB"" mean?
I added a new npm package to my project and require it in one of my modules.
Now I get this message from webpack,
build modulesNote: The code generator has deoptimised the styling of "D:/path/to/...
- 5,305
220
votes
7
answers
237k
views
Export multiple classes in ES6 modules
I'm trying to create a module that exports multiple ES6 classes. Let's say I have the following directory structure:
my/
└── module/
├── Foo.js
├── Bar.js
└── index.js
Foo.js and Bar.js ...
- 3,166
209
votes
14
answers
661k
views
"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';
| /...
- 8,907
205
votes
4
answers
82k
views
Babel 6 changes how it exports default
Before, babel would add the line module.exports = exports["default"]. It no longer does this. What this means is before I could do:
var foo = require('./foo');
// use foo
Now I have to do this:
var ...
- 28.5k
198
votes
13
answers
274k
views
"unexpected token import" in Nodejs5 and babel?
In js file, i used import to instead of require
import co from 'co';
And tried to run it directly by nodejs since it said import is 'shipping features' and support without any runtime flag (https://...
- 2,023
196
votes
25
answers
211k
views
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 ...
- 2,155
192
votes
5
answers
147k
views
How to convert an Iterable to an Array in ES6?
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 ...
- 5,182
181
votes
4
answers
59k
views
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);
}
...
- 2,725
175
votes
23
answers
199k
views
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:\...
- 2,335
169
votes
11
answers
47k
views
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 ...
- 27.6k
164
votes
5
answers
94k
views
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 ...
- 2,468
152
votes
1
answer
78k
views
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"] }
...
- 31.4k
146
votes
7
answers
147k
views
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.
...
- 3,742
144
votes
7
answers
134k
views
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 ...
- 2,040
141
votes
9
answers
91k
views
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/...
- 1,421
140
votes
14
answers
72k
views
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")...
- 37.2k
133
votes
5
answers
42k
views
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?
- 1,821
131
votes
31
answers
223k
views
babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies
My issue is that I've tried to create a new React project and after a lot of issues with vulnerabilities, I managed to solve some of them, one of the main instructions was adding this line:
"...
- 1,621
129
votes
13
answers
164k
views
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: '...
- 2,733
124
votes
3
answers
7k
views
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 ...
- 1,925
122
votes
14
answers
154k
views
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-...
- 1,620
120
votes
4
answers
280k
views
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('./...
- 1,545
114
votes
14
answers
193k
views
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 ...
- 1,207
111
votes
3
answers
83k
views
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
./...
111
votes
10
answers
42k
views
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-...
- 1,323
108
votes
9
answers
102k
views
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
...
- 19.2k
107
votes
4
answers
69k
views
Error while loading config - You appear to be using a native ECMAScript module configuration file
This error is coming up when I am making a pull request. There is a GitHub workflow audit that runs checks on the pull request and it loads the test file from another repository.
- name: Run Audits
...
- 4,156
103
votes
16
answers
225k
views
'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'...
- 2,038
103
votes
2
answers
38k
views
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 ...
- 17.2k
103
votes
3
answers
63k
views
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, ...
- 1,726
102
votes
5
answers
40k
views
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 ...
- 5,478
98
votes
11
answers
76k
views
`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 ...
- 1,569
98
votes
17
answers
85k
views
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 ...
- 11.2k
95
votes
14
answers
126k
views
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....
- 5,332
95
votes
8
answers
69k
views
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.
...
- 53k
94
votes
3
answers
39k
views
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....
- 4,783
94
votes
1
answer
22k
views
What is the difference between babel-core and @babel/core?
What is the difference between
babel-core and @babel/core ?
Are they the same thing but different versions? If not so, when do you use one and when do you use the other?
Thank you.
- 7,360
93
votes
14
answers
221k
views
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Gulp
Consider the following two files:
app.js
import Game from './game/game';
import React from 'react';
import ReactDOM from 'react-dom';
export default (absPath) => {
let gameElement ...
- 12.8k
92
votes
14
answers
148k
views
Babel command not found
I have installed the babel-cli tool as explained by the Babel 'getting started' page.
From a terminal inside my project folder:
npm install --save-dev babel-cli
After this, there is a node_modules ...
- 27.7k