Arrow functions not compiling - javascript

I've been using Reactjs.net with Visual Studio and it compiles .jsx files that contain class methods defined using arrow functions syntax...
class A {
m = () => {
}
}
I've set up Webpack with ES2017 preset but it's giving an "unexpected token" error for the equals sign after the method name.
Why doesn't this compile?
Here is the loader section from my config...
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2017', 'react']
}
}
]
}

I installed https://babeljs.io/docs/plugins/preset-stage-2/
And added 'stage-2' to the list of presets.
I worked out this solution after turning on and off the presets here with some sample code...
https://babeljs.io/repl

Related

Webpack outputting ES6 code despite ES2015 preset

I'm writing client-side react code with ES6 synthax and have been using webpack to transform into ES5 using Babel, and generate a bundle that I send to browser.
It works great on Chrome. However, I recently tried my bundle on Safari 9.x and it failed with :
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.
Upon closer inspection I noticed this code in the bundle.js was causing the error:
// customized for this use-case
const isObject = x =>
typeof x === 'object' &&
x !== null &&
!(x instanceof RegExp) &&
!(x instanceof Error) &&
!(x instanceof Date);
I thought webpack was supposed to eliminate ES6 code (since I'm using the es2015 preset) so I'm surprised that a const and an arrow function were still in the bundle. Why is there ES6 code still in my bundle? Is there any way for me to get webpack to transform that into ES5?
Here's a snippet of my webpack.config.js that I thought would have done the job of removing this synthax but didn't:
module: {
loaders: [{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-2'] //, 'react-hmre']
}
}
After much head scratching and investigation it turned out that one node module, snakecase-keys, is built using ES6 synthax. Since my webpack is only targeting my static directory and not my node modules it did not get Babel'd
This fixed it:
module: {
loaders: [{
test: /\.jsx?/,
// exclude: /(node_modules|bower_components)/,
include: [APP_DIR, /node_modules\/snakecase-keys/],
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-2'] //, 'react-hmre']
}
}]
}

Webpack string replace loader not working

I'm bundling my project with webpack. In order to manipulate some of the files I've to replace specific values in a certain node-module. To achieve that I'm using the string-replace-loader. I added the following code to my webpack config without success.
{
test: /\.js$/,
loader: 'string-replace',
query: {
search: '[MouseEvent]',
replace: '[]'
}
}
In the bundeld file the string is not replaced. The files are within the folder node_modules/ng2-bootstrap. so may i have to specify this as well?
you should use include: [/node_modules\/module_name/] because webpack by default exclude node_modules.
But while reading an issue for similar problems, probably you must use "exclude, include" like this:
{
test: /\.js$/,
loader: 'string-replace',
exclude: /node_modules(?!\/module_name)/
query: {
search: '[MouseEvent]',
replace: '[]'
}
}
if you want read the issue, go here.
EDIT AFTER COMMENTS:
after some tried, i've done this (with an other plugin, but seems like yours), i've done that with this code:
preLoaders: [
{
test: /\.js$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /.*?(react).*?/ig,
replacement: function (match, p1, offset, string) {
console.log("found");
return "found";
}
}
]}),
include: /node_modules\\react.*/
}
],
it might works on loaders, i've but on preloaders because i already have a loader for js.
Note that the error was on regex of include/exclude

Babel used with Grunt working differently than when used with Webpack

I have a project using Babel for Webpack, transpiling ES6 code into plain Js. This works perfectly well, including the imported classes etc, see below.
Result:
var _Person = __webpack_require__(2);
var vic = new _Person.person("Fred McIntire", "Web Developer");
vic.EchoProperties();
Webpack.config.js
module: {
loaders: [{
test: /\.js$/,
exclude: "/node_modules/",
loader: ['babel'],
query: {
presets: ['es2015']
}
}]
},
However while using Babel with Grunt in another project, hence "grunt-babel" plugin, I noticed it transpiles the imports into CommonJs by default and does not include the imported classes.
Result
var _Person=require("./modules/Person"),
vic=new _Person.person("Fred McIntire","Web Developer");
vic.EchoProperties();
gruntfile.js
babel: {
options: {
sourceMap: true,
presets: ['es2015'],
plugins: ['transform-es2015-modules-amd']
},
dist: {
files: {
'assets/js/transpiled/app.es6.js': 'assets/js/custom/app.js'
}
}
},
(I included "plugins: ['transform-es2015-modules-amd']" just for testing purposes).
I want the grunt-babel to transpile down to: (and include the imports)
var _Person = __webpack_require__(2);
not
var _Person=require("./modules/Person")
Therefore how do i update the gruntfile.js settings for grunt-babel in order to act in the same manner as it does used with Webpack?
Thanks in advance...

How to confirm if ES6 is being used (ReactJS + Redux)

I have the following set up:
And I am trying to do the following:
case 'UPDATE_PASSWORD':
return {
...state, //preserve current state, apply changes to it below
password: action.password,
};
but I am getting:
Unexpected token (5:8) at where '...' starts
What may be the issue? How do I check if I am using ES6?
This is a proposed ECMAScript feature (object spread) and can be enabled by adding stage-0 to your babel presets:
npm install --save-dev babel-preset-stage-0
Then, in your .babelrc or within your webpack.config.js query add the preset to your babel settings. Example .babelrc:
{
"presets": [
"es2015",
"react",
"stage-0"
]
}
Or, if you make use of the webpack babel-loader query string:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0']
}
}
EDIT
Babel presets are an assortment of many transformations. As per zerkms' suggestion, you could use stage-2, which does not include/transpile many other features you may not be using at this time. If you really just want the object spread to work, you can also just install transform object rest spread.

Using Webpack and Babel to convert ES6 to AMD

I'm using webpack in my app, and have babel converting my js/jsx files from es6 to es5.
I'd like to have babel convert the module loading in these files to AMD. I see how to do this with grunt-babel:
Using Babel to convert ES6 modules to ES5 AMD modules, not working as expected
How would I do this if I want webpack to handle the babel conversion?
For example, in webpack.config.js I have:
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}
}
Can I set an option in there for Babel to use AMD?
You can set an options for babel with query key:
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
modules: 'amd'
}
}
}
For all available options take a look here: http://babeljs.io/docs/usage/options/
If you want to generate the whole bundle as AMD module, you can set it in the "output.libraryTarget" config:
{
output: {
libraryTarget: "amd"
}
}
See here, in "output.libraryTarget":
https://webpack.github.io/docs/configuration.html

Categories