我在一个曾经工作的nuxt.js项目上遇到这个奇怪的错误,事情是在得到一个新鲜的npm install && npm run dev
之后:
SyntaxError: Unexpected token )
at Function (<anonymous>)
at /home/user/Documents/project/frontend/src/node_modules/lodash/lodash.js:14866:16
引用的行是这一行:
14865: var result = attempt(function() {
14866: return Function(importsKeys, sourceURL + 'return ' + source)
14867: .apply(undefined, importsValues);
14868: });
我没有看错。我怀疑这是一个webpack或加载器问题,但我只是无法准确地锻炼什么。我试图将webpack
和lodash
收缩到之前的主要版本,但结果是一样的(恢复lodash实际上使一切变得更糟)。这是package.json:
{
"name": "frontend",
"version": "0.1.1",
"description": "Nuxt.js project",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"@fortawesome/fontawesome-free": "5.5.0",
"@mdi/font": "2.6.95",
"@nuxtjs/apollo": "3.0.7",
"@nuxtjs/axios": "5.3.1",
"ajv": "6.5.2",
"apollo-cache-inmemory": "1.2.6",
"apollo-client": "2.3.7",
"apollo-link": "1.2.2",
"apollo-link-context": "1.0.9",
"apollo-link-error": "1.1.1",
"apollo-link-http": "1.5.4",
"graphql": "0.13.2",
"graphql-tag": "2.9.2",
"jwt-decode": "2.2.0",
"nuxt": "1.4.4",
"qrious": "4.0.2",
"stylus": "0.54.5",
"vue-apollo": "3.0.0-beta.19",
"vue-i18n": "8.0.0",
"vuejs-logger": "1.5.3",
"vuetify": "1.3.9",
"vuex-pathify": "1.1.3",
"vuex-persistedstate": "2.5.4"
},
"devDependencies": {
"babel-eslint": "8.2.1",
"css-loader": "1.0.0",
"eslint": "4.15.0",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.7.1",
"eslint-plugin-vue": "4.0.0",
"node-sass": "4.9.2",
"pug": "2.0.3",
"pug-plain-loader": "1.0.0",
"sass-loader": "7.0.3",
"style-loader": "0.21.0",
"stylus-loader": "3.0.2"
}
}
这是我尝试过的npm-shrinkwrap
(与lodash相同):
{
"name": "frontend",
"version": "0.1.1",
"lockfileVersion": 1,
"dependencies": {
"webpack": {
"version": "3.11.0",
"from": "[email protected]"
}
}
}
这是nuxt,webpack或lodash中的错误吗?它甚至是一个bug吗?
return
作为关键字正在绊倒automatic semicolon insertion。所以你的代码被解释为:
return Function(importsKeys, sourceURL + 'return ' + source);
.apply(undefined, importsValues);
尝试结合这些线。
正如另一个答案所暗示的那样,这确实是webpack的一个问题,但更多的是古怪。最后,问题是由app.html文件中的脚本引起的(zopim聊天客户端代码段):
<!DOCTYPE html>
<html HTML_ATTRS {{ }}>
<head>
{{ HEAD }}
</head>
<body BODY_ATTRS {{ }}>
{{ APP }}
</body>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim || (function (d, s) {
var z = $zopim = function (c) {z._.push(c)}, $ = z.s =
d.createElement(s), e = d.getElementsByTagName(s)[0]
z.set = function (o) {
z.set._.push(o)
}
z._ = []
z.set._ = []
$.async = !0
$.setAttribute('charset', 'utf-8')
$.src = 'https://v2.zopim.com/?XXXXX...'
z.t = +new Date
$.type = 'text/javascript'
e.parentNode.insertBefore($, e)
})(document, 'script')
</script>
<!--End of Zendesk Chat Script-->
</html>
不知何故,这段代码在捆绑步骤中使webpack变得混乱,它归咎于lodash,它只需删除它(我将不再使用它)。