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?

Not quite, latest nuxt breaks many things that this project relies on, also, it's kinda buggy https://github.com/nuxt/nuxt.js/issues/5405#issuecomment-478324724 — arielnmz, Apr 01 '19 at 19:24

score 2 · Answer 1 · answered Apr 01 '19 at 18:06

2

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.

answered Apr 01 '19 at 18:06

mcw

3,500
1
31
33

Well, I'm talking about an installed package, which I'm not supposed to have control over, so I assume it's better to disable this setting the webpack config? But this is also a nuxt project so I'm not able to change webpack's settings either (only via nuxt.config.js), so my guess is that it became a default since the last time I ran this project. Btw just changed that line and ran it again but it still complains on the same line, also, if this was the case wouldn't it be compĺaining about `.` and not `(`? – arielnmz Apr 01 '19 at 18:26

score 0 · Answer 2 · answered Apr 01 '19 at 19:22

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).

lodash.js SyntaxError: Unexpected token )

2 Answers2