Babel not loaded to specific file due to misconfiguration of webpack

Question

ERROR in ./reducers/navigator.js
Module build failed: SyntaxError: C:/Users/Myname/Desktop/Projects/Project2/app/templates/reducers/navigator.js: Unexpected token (11:16)

   9 |         case SWITCH_PAGE:
  10 |             return {
> 11 |                 ...state,
     |                 ^
  12 |                 id : action.payload
  13 |             }
  14 |         default:

My webpack configuration looks like this

const webpack = require('webpack');
const config = {
    entry: __dirname + '/index.jsx',
    output: {
        path: 'C:\\Users\\Myname\\Desktop\\Projects\\Project2\\app\\static\\js\\dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader',
            }
        ]
    },
};
module.exports = config;

When i compile the app, it says this error and thats because this file is not processed by babel. Is there a way to return the state without ES6? or even better how can i make this compile with babel so i can have support to ES6 features.

Notes: index.jsx is the Parent component and others are childs

also my package.json contains this

"babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },

taylorc93 · Accepted Answer · 2017-09-06T02:19:32.703

3

Object spread properties aren't included in ES6, the proposal is currently at stage 3: https://tc39.github.io/proposal-object-rest-spread/. To include it, you'll want to install the babel stage 3 preset (https://babeljs.io/docs/plugins/preset-stage-3/) and update your .babelrc file to include it

edited Sep 06 '17 at 02:19

answered Sep 05 '17 at 21:49

taylorc93

3,676
2
20
34

i have no .babelrc in my project, i made pure react project with python back end so there is not fancy configuration. I will add .babelrc but can you tell me what do i put there since i have never used it before. Thanks in advance – Dimitrios Filippou Sep 05 '17 at 21:54
Thanks! you didn't actually give me the solution but you gave me a head start to start experimenting and i came up with creating .babelrc with stage3 . It was that simple :p . again thanks taylorc93 ! – Dimitrios Filippou Sep 05 '17 at 22:11
There is no such thing as a spread *operator*. – Felix Kling Sep 05 '17 at 22:43
@FelixKling What would you call it then? Legitimately curious, I've never seen this referred to anything but a spread operator and that's what its grouped under on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator – taylorc93 Sep 06 '17 at 02:07
Spread syntax? That just sounds weird to me but ¯\\_(ツ)_/¯ – taylorc93 Sep 06 '17 at 02:08
1

See https://stackoverflow.com/a/37152508/218196 and https://stackoverflow.com/questions/44934828/is-foo-an-operator-or-syntax . In this particular case it should be called object spread spread properties. – Felix Kling Sep 06 '17 at 02:12
Very interesting reads. Thanks for sending this my way, learned something new today :) Updated my answer to reflect the correct naming conventions – taylorc93 Sep 06 '17 at 02:18

Babel not loaded to specific file due to misconfiguration of webpack

1 Answers1