This experimental syntax requires enabling the parser plugin: 'objectRestSpread'

Question

I am running gulp together with webpack to parse the modal.js file from bootstrap 4, however, I am receiving the following error:

> gulp scripts
...
ERROR in ./wp-content/themes/rehub-blankchild/js/modules/Modal.js
Module build failed: SyntaxError: C:\Users\admin\Desktop\project\wp-content\themes\rehub-blankchild\js\modules\Modal.js: This experimental syntax requires enabling the parser plugin: 'objectRestSpread' (223:8)
  221 |     _getConfig(config) {
  222 |       config = {
> 223 |         ...Default,
      |         ^
  224 |         ...config
  225 |       }
  226 |       Util.typeCheckConfig(NAME, config, DefaultType)
    at Parser.raise (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:830:15)
    at Parser.expectPlugin (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2215:18)
    at Parser.parseObj (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:3677:14)
    at Parser.parseExprAtom (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:3308:21)
    at Parser.parseExprSubscripts (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2970:21)
    at Parser.parseMaybeUnary (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2948:21)
    at Parser.parseExprOps (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2853:21)
    at Parser.parseMaybeConditional (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2823:21)
    at Parser.parseMaybeAssign (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2779:21)
    at Parser.parseMaybeAssign (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2809:27)
 @ ./wp-content/themes/rehub-blankchild/js/scripts.js 7:36-62
[15:32:06] Finished 'scripts' after 1.86 s

My webpack configuration looks like the following:

const path = require('path'),
settings = require('./settings');

module.exports = {
  entry: {
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        }
      }
    ]
  }
}

My gulp task gulp scripts basically starts webpack:

gulp.task('scripts', function(callback) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
});

I have installed plugin-syntax-object-rest-spread for babel. See my package.json below for my dependencies:

"devDependencies": { "@babel/core": "7.0.0-beta.34", "@babel/plugin-syntax-object-rest-spread": "^7.0.0-beta.44", "@babel/preset-env": "7.0.0-beta.34", "autoprefixer": "7.2.2", "babel-loader": "8.0.0-beta.0", "browser-sync": "2.18.13", "gulp": "3.9.1", "gulp-postcss": "7.0.0", "postcss-color-function": "4.0.1", "postcss-hexrgba": "1.0.0", "postcss-import": "11.0.0", "postcss-mixins": "6.2.0", "postcss-nested": "3.0.0", "postcss-simple-vars": "4.1.0", "webpack": "3.10.0" }, "dependencies": { "jquery": "3.2.1", "normalize.css": "7.0.0", "slick-carousel": "1.8.1" }

Any suggestions what I am doing wrong and why I get the above error?

I appreciate your replies!

You'll need to add the plugin to your .babelrc (or however webpack does it, looks like pobably as part of options for babel-loader) so that babel knows to look for it too — Paul S.
@PaulS. Thank you for your reply! Any suggestion how to add the plugin to webpack? I am not using .babelrc in my build setup. — Carol.Kar

Carol.Kar Carol.Kar · Accepted Answer · 2018-04-07T14:25:35

Just fixed the error by modifing webpack. See below how to modify the rules section:

  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-proposal-object-rest-spread')]
        }
      }
    }
  ]

This experimental syntax requires enabling the parser plugin: 'objectRestSpread'

1 Answers