Spread Operator bug?

[damianobarbati]

Bug.
I'm requiring a file with the following statement (using require because I'll be using both on node and browser):

const user = require('skeemas/complexUser');

The working complexUser:

const user = require('./user');
const individual = require('./individual');
const company = require('./company');
const credential = require('./credential');

const complexUser = {
    type: {
        type: 'text',
        values: ['individual', 'company'],
        predefined: 'individual',
    }
}

Object.assign(complexUser, user, individual, company, credential);

module.exports = complexUser;

The NOT working complexUser:

const user = require('./user');
const individual = require('./individual');
const company = require('./company');
const credential = require('./credential');

module.exports = {
    type: {
        type: 'text',
        values: ['individual', 'company'],
        predefined: 'individual',
    },
    ...user,
    ...individual,
    ...company,
    ...credential,
};

Error thrown by Webpack:

 ERROR in ./node_modules/skeemas/complexUser.js
    Module parse failed: /Users/damz/Desktop/repmemo/node_modules/skeemas/complexUser.js Unexpected token (12:4)
    You may need an appropriate loader to handle this file type.
    |         predefined: 'individual',
    |     },
    |     ...user,
    |     ...individual,
    |     ...company,
     @ ./models/user.js 1:13-43
     @ ./models/userPresenter.js
     @ ./apps/user/components/profileForm.js
     @ ./apps/user/router.js
     @ ./apps/user/index.js

Both babel and node do not complain if running the file directly (https://goo.gl/E3ZSEq).

[TrySound]

@damianobarbati Object rest/spread operators are not in spec yet (stage-3) and are not supported by acorn out of the box. It's not a bug. Use some babel require hook.

[damianobarbati]

@TrySound but babel compiles fine, no error thrown by the parser so far. How can this be?

[TrySound]

@damianobarbati Babel is transpiller. It supports a lot of future things. Webpack uses acorn, which is not babel.

[damianobarbati]

Oh thanks for clarifying I didn't know this.

But shouldn't webpack use babel-loader for that file since I'm transpiling js/jsx file with that?
Or is it fallbacking to acorn because of the require statement?

[TrySound]

You should use babel-loader to transpile such things.

[TrySound]

Check that you have babel plugin which enables spread operator.

[damianobarbati]

Of course @TrySound! The entire react project is processed through babel-loader.
Everything works fine, I'm using spread operator and ES7/ES8 features literally anywhere.

    "babel": {
        "presets": [
            [
                "env",
                {
                    "modules": false,
                    "useBuiltIns": "usage",
                    "debug": false
                }
            ],
            "stage-0",
            "react"
        ],
        "plugins": [
            "lodash",
            "transform-decorators-legacy",
            "transform-class-properties"
        ]
    },

[TrySound]

As I said spread operator is stage-3. So you don't have it in your config. Please, help yourself and use such plugins directly. stage presets are changed too often.

[damianobarbati]

But stage-0 includes stage-1, 2 and 3 https://babeljs.io/docs/plugins/preset-stage-0/
And stage-3 has it https://babeljs.io/docs/plugins/preset-stage-3/

I'll try tomorrow using individual plugins as you suggest.
But if that is the case I still don't see why object spreading is working everywhere else and webpack does not comply about those files 😓

[TrySound]

You are right. Show webpack config.

[damianobarbati]

This is it => https://github.com/damianobarbati/react-app/blob/master/config/webpack.config.js

I can confirm the problem is only for npm-linked modules.
If I move the module into a project folder and require it as a normal file insted of an installed module it works fine.

[sokra]

You probably excluded it from babel-loader rule

[damianobarbati]

Bingo: I forgot jsnext:main entry 🤦🏻‍♂️ in the package.json.
Thanks @sokra.

[askoretskiy]

One should re-consider that.

As of November 2017, everything else in the chain besides webpack (i.e. firefox, node, babel, uglifyJS) supports object spread operator. I got to this problem only when I started to use Webpack.

What should I do if my browser supports object spread operator? I don't want Babel to transpile that. I want to receive {...x} in the source code.

[askoretskiy]

I see that it is not supported by acorn library, that you use to parse JS. But it is widespread now and maybe they could re-consider having in mind that a big user (i.e. webpack) needs it.

[askoretskiy]

acornjs/acorn#388

[askoretskiy]

Could you use https://github.com/victor-homyakov/acorn-object-rest-spread ?

[askoretskiy]

By the way, it is Stage 3 proposal now https://github.com/tc39/proposals/blob/master/README.md

Stage 3 means "Candidate", i.e. close to be accepted.

[diachedelic]

How could I go about making my webpack use acorn-object-rest-spread? Is there a config option or something?

[askoretskiy]

acorn now supports it acornjs/acorn#388

[Natim]

acorn now supports it acornjs/acorn#388

Does it mean that the next release of acorn and then webpack will handle it?

[alangpierce]

The webpack parser will need to be updated to handle the syntax as well, since it has special-case code for each node type. I recently wrote a (hacky) webpack plugin that patches the parser to handle the syntax, so the updated "walk" functions in the code are approximately what will need to be changed. But it should be an easy fix, I think.

https://github.com/alangpierce/sucrase/tree/master/integrations/webpack-object-rest-spread-plugin
https://github.com/alangpierce/sucrase/blob/master/integrations/webpack-object-rest-spread-plugin/src/index.ts#L111

[Darkrender]

It is fully accepted now as far as I can tell, and this is still an issue for my projects even with all my dependencies fully updated (using webpack 4.0.0)

[nchevobbe]

Thanks a lot @alangpierce !

[simonbuchan]

@Darkrender I hit this too (with webpack 4.5.0), and after slamming my head against trying to create a minimal reproduction of it I eventually fixed it by removing node_modules and yarn.lock and re-installing. This was pretty bizarre for me since yarn outdated didn't list anything to do with webpack and I'd tried removing node_modules and reinstalling before.

[rudzikdawid]

acorn 5.4.0 has relased with New features

Add support for object spread and rest.

but still using webpack 4.5.0 i have

Module build failed: error: couldn't process source due to parse error,Unexpected token

[chearon]

The thing that's strange to me is that some of us have acorn 5.4.0 and experience no problems, while others need @alangpierce's plugin (thanks btw!). (Webpack 3 or 4 didn't seem to make a difference). I have two projects side-by-side, Webpack 3.11.0 and Acorn 5.5.3, both use spread operator. One fails and needs the plugin, the other works just fine.

[simonbuchan]

Are you using yarn or npm lock? My problem went away with a clean install, which implies there's some deep dependency of webpack - but if it's not acorn, what is it?

[chearon]

I'm using yarn.lock. I think your case is that you needed an upgrade of acorn (both Webpack 3 and 4 specify ^5.0.0, so you could have been stuck on an older version). One of my projects worked when I did the same thing as you.

But I think it can be caused even with the right acorn. I have another project where it didn't matter what version acorn was installed, I needed the plugin.

[simonbuchan]

And yarn why acorn only lists the one version? E.g. some loader (eslint?)

[chearon]

It shows webpack is using acorn 5.5 (what I'm doing is building handsontable with babel loader removed, compile with webpack src)

[I] ~/C/handsontable> yarn why acorn
yarn why v1.5.1
[1/4] 🤔  Why do we have the module "acorn"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "acorn@4.0.13"
info Has been hoisted to "acorn"
info Reasons this module exists
   - Hoisted from "webpack#acorn-dynamic-import#acorn"
   - Hoisted from "jest#jest-cli#jest-environment-jsdom#jsdom#acorn"
   - Hoisted from "jest#jest-cli#jest-environment-jsdom#jsdom#acorn-globals#acorn"
info Disk size without dependencies: "172MB"
info Disk size with unique dependencies: "172MB"
info Disk size with transitive dependencies: "172MB"
info Number of shared dependencies: 0
=> Found "webpack#acorn@5.5.3"
info This module exists because "webpack" depends on it.
info Disk size without dependencies: "72MB"
info Disk size with unique dependencies: "72MB"
info Disk size with transitive dependencies: "72MB"
info Number of shared dependencies: 0

... 3 more omitted

[simonbuchan]

It also shows webpack using acorn-dynamic-import, it turn using acorn 4 - that seems suspicious!

[simonbuchan]

webpack upgraded acorn-dynamic-import to 3.0.0, which depends on acorn@^5.0.0 in 5a1ffb5, included in webpack 4.0.0-alpha.5, so it looks like that's a yarn bug.
If you nuked both node_modules and yarn.lock and it's still happening, I dunno.

[simonbuchan]

Hmm, though webpack has had an acorn@^5.0.0 dep since 2.4.0, so it's probably just that you're still on webpack 3. Just tested and yarn 1.6.0 correctly updated the transitive acorn going from webpack 3 to 4.
You'll also want to update jest, or you'll just get the same error when running it.

[klimashkin]

Have the same problem.
Checked acorn version npm ls acorn:

Can that happen because of eslint dependency?

[c-goettert]

Bingo: I forgot jsnext:main entry 🤦🏻‍♂️ in the package.json.
Thanks @sokra.

@damianobarbati could you please speficy what you needed to add exactly? I am having the exact same issue, ES6 spread fails for linked node_modules. But why (and where) did you need to set jsnext? I'm working on a create-react-app-projcet which didn't had any main or jsnext field set in package.json by default.

[iki]

@klimashkin thanks, npm ls acorn (or yarn why acorn) discovered that we resolved webpack 4.11 acorn ^5.0.0 dependency with 5.3.0, which came before object spread support in 5.4.0.

Removing the acorn lines in yarn.lock and running yarn resulted in resolving that with latest 5.6.2 and solved the object spread compile error for us.

-acorn@^5.0.0, acorn@^5.1.2:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
-
-acorn@^5.3.0:
-  version "5.5.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
+acorn@^5.0.0, acorn@^5.1.2, acorn@^5.3.0:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.2.tgz#b1da1d7be2ac1b4a327fb9eab851702c5045b4e7"

[chrisdothtml]

Same issue for me. Deleted my yarn.lock and re-installed and the error went away. I'm using an older version of yarn, so I wonder if that has something to do with it