"npm run build" fails with SyntaxError:Unexpected token

Question

I am trying to deploy my app to AWS and encountered an error when executing "npm run build". This error seems to be relevant with webpack.config.js, but I have no idea since I haven't modified anything to that file.

I found a similar question here but it did not help that much. SyntaxError: Invalid or unexpected token at createScript (vm.js:80:10)

<error log>
/var/www/gamestocker/app/GameStocker/react_view/node_modules/react-scripts/config/webpack.config.js:306
        ...(isEnvProductionProfile && {
        ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/var/www/gamestocker/app/GameStocker/react_view/node_modules/react-scripts/scripts/build.js:38:23)

npm ERR! Linux 4.14.173-137.229.amzn2.x86_64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
npm ERR! node v6.17.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! gamestocker@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the gamestocker@0.1.0 build script 'react-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the gamestocker package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs gamestocker
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls gamestocker
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /var/www/gamestocker/app/GameStocker/react_view/npm-debug.log

Below is the part of webpack.config.js that the error log mentions. or may be in vm.js file

<webpack.config.js>
.
.
.
      alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      },
.
.
.

I would appreciate it if you could provide any suggestion or possible reasons. Thanks :)

[EDITED

<vm.js>
var test = require('tape');
var vm = require('../');

test('vmRunInNewContext', function (t) {
    t.plan(6);

    t.equal(vm.runInNewContext('a + 5', { a : 100 }), 105);

    (function () {
        var vars = { x : 10 };
        t.equal(vm.runInNewContext('x++', vars), 10);
        t.equal(vars.x, 11);
    })();

    (function () {
        var vars = { x : 10 };
        t.equal(vm.runInNewContext('var y = 3; y + x++', vars), 13);
        t.equal(vars.x, 11);
        t.equal(vars.y, 3);
    })();

    t.end();
});

test('vmRunInContext', function (t) {
    t.plan(2);

    var context = vm.createContext({ foo: 1 });

    vm.runInContext('var x = 1', context);
    t.deepEqual(context, { foo: 1, x: 1 });

    vm.runInContext('var y = 1', context);
    t.deepEqual(context, { foo: 1, x: 1, y: 1 });
});

Answer 1

It sounds like the code is being run with a slightly older JavaScript engine, from before spread properties were added in ES2018. (Spread for iterables was added in ES2015, but property spread was only added in ES2018.)

If you can't upgrade the environment to something more recent, you can switch to Object.assign:

alias: Object.assign(
    {
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web'
    },
    // Allows for better profiling with ReactDevTools
    isEnvProductionProfile && {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    },
    modules.webpackAliases || {}
),

Object.assign was added in ES2015.

---

Side note: You can replace

    modules.webpackAliases || {}

with just

    modules.webpackAliases || {}

above. Object.assign (and property spread) effectively ignore it if you pass them a falsy value instead of an object. (It's not literally true, they only explicitly ignore null and undefined; all others are converted to the equivalent object and then their enumerable own properties are used — but the objects that false, 0, NaN, and "" are converted to don't have any enumerable own properties. Just don't pass document.all to it, which is falsy but does have enumerable own properties... [Yes, document.all is really falsy. I cover that bizarre historical artefact in Chapter 17 of my book JavaScript: The New Toys.])