lodash.js SyntaxError: Unexpected token )
Question
I am having this weird error on a nuxt.js project that used to work, the thing is that after a fresh npm install && npm run dev I get:
SyntaxError: Unexpected token )
at Function (<anonymous>)
at /home/user/Documents/project/frontend/src/node_modules/lodash/lodash.js:14866:16
The referenced line is this one:
14865: var result = attempt(function() {
14866: return Function(importsKeys, sourceURL + 'return ' + source)
14867: .apply(undefined, importsValues);
14868: });
I see nothing wrong. I suspect it's a webpack or a loader issue, but I just can't workout exactly what. I have tried to shrinkwrap webpack and lodash to the previous major versions, but the result is the same (reverting lodash actually makes everything worse). This is the 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"
}
}
And this is the npm-shrinkwrap I tried with (same with lodash):
{
"name": "frontend",
"version": "0.1.1",
"lockfileVersion": 1,
"dependencies": {
"webpack": {
"version": "3.11.0",
"from": "webpack@3.11.0"
}
}
}
Is this a bug in nuxt, webpack or lodash? Is it even a bug?
2 answers
solution1
1 2019-04-01 18:06:11
return as a keyword is tripping automatic semicolon insertion . So your code is being interpreted as:
return Function(importsKeys, sourceURL + 'return ' + source);
.apply(undefined, importsValues);
Try combining those lines.
solution2
0 2019-04-01 19:22:38
As the other answer suggests, it was indeed an issue with webpack, but more bizzare. In the end, the issue was caused by a script in the app.html file (a zopim chat client snippet):
<!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>
Somehow this piece of code was making webpack go haywire during the bundling step and it was blaming lodash, all it took was removing it (I won't be using it anymore).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.