webpack: Spread Operator bug?
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).
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 1
- Comments: 38 (8 by maintainers)
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.
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
acorn now supports it https://github.com/ternjs/acorn/issues/388
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)
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.How could I go about making my webpack use acorn-object-rest-spread? Is there a config option or something?
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.
You probably excluded it from babel-loader rule