运行Nuxt.js项目时出现SyntaxError: Unexpected Identifier错误的原因及解决

你的环境 #

• Node.js v6.14.2
• NPM 6.0.1
• Ubuntu 16.04

报错信息 #

npm run dev 
node_modules/nuxt/lib/core/module.js:14
async ready() {
^^^^^
SyntaxError: Unexpected identifier
    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> (/home/ostap/Стільниця/vue-photogram/node_modules/nuxt/lib/core/index.js:2:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-photogram@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vue-photogram@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ostap/.npm/_logs/2018-05-16T16_35_55_903Z-debug.log

错误原因 #

这个报错的核心是Node.js v6.14.2不支持ES2017的async/await语法。你看报错指向的async ready()这行代码，async关键字是ES2017的新特性，Node.js从v7.6.0版本才开始默认支持，而v6.x版本需要手动开启特定的兼容flag才能识别。但Nuxt的代码直接使用了这个语法且未做兼容处理，所以就抛出了语法错误。

另外补充一点：Nuxt的后续稳定版本（比如v2+）对Node.js的版本要求更高，至少需要v8.0以上，你的Node版本确实过于老旧，不仅功能受限还存在安全隐患。

解决方法 #

方法1：升级Node.js（强烈推荐） #

这是最彻底的解决方案，既能解决当前语法兼容问题，也能规避旧版本Node的安全风险。在Ubuntu 16.04上可以用nvm（Node版本管理器）来轻松切换版本：

1. 先安装curl（如果没装的话）：

   sudo apt-get update && sudo apt-get install curl -y
   

2. 安装nvm：
   执行nvm官方提供的安装脚本，安装完成后重启终端让nvm生效。
3. 安装一个支持async/await的LTS（长期支持）版本，比如Node.js 14.x：

   nvm install 14
   

4. 将该版本设置为默认Node版本：

   nvm alias default 14
   

5. 验证版本是否切换成功：

   node -v
   

   当终端显示v14.x开头的版本号后，重新运行npm run dev就能正常启动项目了。

方法2：保留Node.js v6.x（不推荐） #

如果你因为特殊原因必须保留当前Node版本，可以尝试通过添加兼容flag临时解决，但不保证能兼容Nuxt的所有功能：

1. 修改项目根目录下package.json里的dev脚本：

   "scripts": {
     "dev": "node --harmony-async-await node_modules/nuxt/bin/nuxt.js"
   }
   

2. 保存修改后重新运行npm run dev

内容的提问来源于stack exchange，提问作者Ostap Brehin