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.
Related
There have been a few questions like this in the past and the solutions given were to add a loader such as es2015. However I have tried adding es2015, 2016, 2017 (further ones and babel-preset-env gave other errors) and none of them could load this module. Other loaders in the webpack-config.js file are react and stage-0.
Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type.
| * #private
| */
| Exporter.prototype.<function-name> = async function * <function-name>() {
| yield '';
| };
Here's the rule for js files:
{
test: /\.js$/,
loader: 'babel-loader',
exclude: [
/node_modules/
],
query: {
cacheDirectory: true,
presets: ['es2015', 'es2016', 'es2017', 'react', 'stage-0']
}
}
and the .babelrc file:
{
"presets": ["react", "es2015", "stage-0", "es2016", "es2017"]
}
Does anyone know what loader this needs?
I am not very knowledgeable in babel, but it seems that this rule is excluding /node-modules/ and this error is coming from a module in the project. Might be relevant.
Also relevant is that this same build is working on other computers where "es2015", "es2016", "es2017" have not been installed and were not added to presets in either of the files above.
Thanks in advance.
I'm using Webpack with my Vuejs app.
I can't get my app to load on IE 11. This is what the console looks like:
The console states SCRIPT1010: Expected identifier
webpack.config.js
{
test: /\.(es6|js|mjs)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"modules": false,
"debug": true
}
]
]
}
.browerslistrc
> 0.25%
not ie <= 10
main.js
import "core-js/stable";
According to the stacktrace, the error is thrown by the "async" library you’re using. Having a look at the docs (https://caolan.github.io/async/v3/), it says:
Async should work in any ES2015 environment (Node 6+ and all modern browsers).
If you want to use Async in an older environment, (e.g. Node 4, IE11) you will have to transpile.
Because async cromes from node_modules and your Webpack loader config explicitely exclude it, async is not transpiled. To make it so, you can change your exclude rule like this:
exclude: /node_modules\/(?!async)/,
But this might not fix the overall IE11 compatibility if you have other incompatible libraries. You can adapt the rule to add as many packages as you need to be transpiled like this:
exclude: /node_modules\/(?!async|library2|library3)/,
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
Good afternoon,
This is the same issue I reported at webpack's github, but I suspect I might be the one doing something wrong, thus opening a question here.
I'm trying to configure webpack 2 with Babel, and one of the requirements is to transpile built-ins such as Symbol.
Despite that now working fine, when I try to use webpack and babel's transform-runtime, I'm unable to use exports *.
Input file (src/index.js):
export * from './secondFile'
secondFile.js:
export let TESTSYMBOL = Symbol('test');
export let TESTSYMBOL2 = Symbol('test2');
webpack.config.js (only copied the relevant part):
module: {
rules: [
{
test: /\.jsx?$/,
// Skip any files outside of `src` directory
include:path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: ["es2015", "stage-3"],
plugins: ['transform-runtime']
}
}
}
]
}
script:
"webpack -d --config config/webpack.config.js"
Output file: gist
Exception:
Uncaught ReferenceError: exports is not defined - at Object.defineProperty(exports, "__esModule", {
Dev Dependencies:
"webpack": "2.6.1",
"webpack-dev-server": "2.4.5",
"webpack-notifier": "1.5.0"
"babel-cli": "6.24.1",
"babel-loader": "7.0.0",
"babel-plugin-transform-runtime": "6.23.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-3": "6.24.1"
Dependencies:
- "babel-runtime": "6.23.0"
Thanks for any help!
It seems that the problem is with the include. For some reason, I was unable to use path.resolve or path.join. The webpack documentation has such example.
If the webconfig is as follows, it works just fine:
module: {
rules: [
{
test: /\.js$/,
include: [
/src/
],
// or exclude: [/node_modules/],
use:
{
loader: 'babel-loader',
options: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-3']
}
}
}
]
}
Either way, now there's a problem with exports not defined, which can be solved by setting modules to false in es2015 preset (thanks to Vanuan at Github for that suggestion):
presets: [['es2015', { modules: false }], 'stage-3'],
For IE or older browsers, I need to use es-shims - libraries which ports the ECMAScript specs to legacy JS engines.
These libs below may resolve your problem if added as the first imports on your index.html (or equivalent). Here's one for example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
See this link for every lib you may need:
ES-Shims
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