“npm run build”失败并显示 SyntaxError:Unexpected token

IT技术 javascript node.js reactjs npm webpack
2021-05-27 00:41:23

我正在尝试将我的应用程序部署到 AWS,但在执行“npm run build”时遇到错误。此错误似乎与 webpack.config.js 相关,但我不知道,因为我没有对该文件进行任何修改。

我在这里发现了一个类似的问题,但它并没有多大帮助。 语法错误: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

下面是错误日志提到的 webpack.config.js 部分。或者可能在 vm.js 文件中

<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 || {}),
      },
.
.
.

如果您能提供任何建议或可能的原因,我将不胜感激。谢谢 :)

[编辑

<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 });
});

1个回答

听起来代码是使用稍旧的 JavaScript 引擎运行的,在 ES2018 中添加扩展属性之前。ES2015 中添加可迭代对象的扩展,但仅在 ES2018 中添加了属性扩展。)

如果您无法将环境升级到更新的环境,则可以切换到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 在 ES2015 中添加。


旁注:您可以更换

    modules.webpackAliases || {}

只是

    modules.webpackAliases || {}

多于。Object.assign(和属性传播)如果您向它们传递一个虚假值而不是一个对象,则有效地忽略它。(这不是真的,它们只是明确地忽略nullundefined;所有其他对象都被转换为等效的对象,然后使用它们自己的可枚举属性——但false, 0, NaN, 和""被转换成的对象没有任何可枚举的自己的属性。只是不要传递document.all给它,它是假的,但确实有可枚举的自己的属性...... [是的,document.all真的是假的。我在我的书JavaScript: The New Toys 的第 17 章中介绍了那个奇怪的历史文物。])