Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected Token Error #394

Closed
ckauth97 opened this issue May 19, 2022 · 25 comments
Closed

Unexpected Token Error #394

ckauth97 opened this issue May 19, 2022 · 25 comments

Comments

@ckauth97
Copy link

Found in: yaml/dist/compose/composer.js

if (prelude[i + 1]?.[0] !== '#')

Not expecting the period in between the ? and [0].

Threw errors when trying to run in some cases (failed on cron job execution).

Rolled back to v2.0.1 and that seemed to stop the issue from occurring.

Full Stack Trace

yaml/dist/compose/composer.js:33
                if (prelude[i + 1]?.[0] !== '#')
                                   ^

SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (node_modules/yaml/dist/index.js:3:16)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
@ckauth97 ckauth97 added the bug Something isn't working label May 19, 2022
slntopp added a commit to slntopp/nocloud that referenced this issue May 19, 2022
slntopp added a commit to slntopp/nocloud that referenced this issue May 19, 2022
slntopp added a commit to slntopp/nocloud that referenced this issue May 19, 2022
@eemeli
Copy link
Owner

eemeli commented May 19, 2022

Is this perhaps in a Node.js v12 or earlier environment? yaml@2 requires Node.js v14 or later.

@slntopp
Copy link

slntopp commented May 19, 2022

Node v16, same issue.
And 2.0.1 works perfectly fine.

@eemeli
Copy link
Owner

eemeli commented May 19, 2022

Are you able to provide a reproducible case for this? The test suite is run on Node.js v14 and v16, so this is a bit surprising.

@eemeli
Copy link
Owner

eemeli commented May 19, 2022

Also, are you really sure that you're seeing this with Node.js 16? In my testing, this works:

$ docker run -it --rm node:14.0.0 bash

root@2017ef9af875:/# npm i yaml
+ [email protected]
root@2017ef9af875:/# node

> let YAML=require('yaml')
> YAML.parse('%YAML 1.2\n---\n42')
42

But this fails:

$ docker run -it --rm node:12.0.0 bash

root@0a4386ec4111:/# npm i yaml
+ [email protected]
root@0a4386ec4111:/# node

> let YAML=require('yaml')
Thrown:
/node_modules/yaml/dist/compose/composer.js:33
                if (prelude[i + 1]?.[0] !== '#')
                                   ^

SyntaxError: Unexpected token .

@slntopp
Copy link

slntopp commented May 19, 2022

Can't tell for OP, but yes, I have a Vue app using this library, and it is most certainly running Node v16 :)

To be precise, Dockerfile building it uses 16.13, and on my computer it is 16.15

@eemeli
Copy link
Owner

eemeli commented May 20, 2022

@Sintopp That's really curious. Perhaps there's some JS transpiler that's failing to parse the optional chaining? In any case, a reproducible case does seem needed here to diagnose the issue further.

@ckauth97
Copy link
Author

Also running Node v16.

Will post a reproducible scenario if I can find one.

@FelicitusNeko
Copy link

FelicitusNeko commented May 23, 2022

Same error, different location:

./node_modules/yaml/browser/dist/nodes/Scalar.js 13:15
Module parse failed: Unexpected token (13:15)

|   toJSON(arg, ctx) {
>     return ctx?.keep ? this.value : toJS(this.value, arg, ctx);
|   }

It looks like this library recently switched to TypeScript. Perhaps that's related?

Running Node 16.14.2, with a create-react-app on react-scripts version 4.0.3.

@eemeli
Copy link
Owner

eemeli commented May 24, 2022

Thank you @FelicitusNeko, that gave me enough hints to investigate. This looks like it's caused by webpack/webpack#11186, and that the kind of solutions suggested by nuxt/nuxt#7722 (comment) do help resolve this.

In other words, please try one of the following:

  1. Upgrade your react-scripts or webpack dependency to their v5 releases.
  2. Add something like "node 12" to your Browserslist config.

In my own testing, either of those was able to resolve this issue. If you're experiencing this and you're not using either react-scripts or webpack, please share what tools (and their versions) you are using to build your app.

@FelicitusNeko
Copy link

Unfortunately, I am unable to upgrade react-scripts to v5, and especially not webpack, as that causes major breaking changes in my project. Until that gets resolved, I'm stuck on v4.

@eemeli
Copy link
Owner

eemeli commented May 24, 2022

@FelicitusNeko Have you tried adding "node 12" to your Browserslist config?

@FelicitusNeko
Copy link

The main problem is that Webpack no longer polyfills Node core modules. Even if I can get past that, I run into other issues for which tickets exist to be looked into further. I don't think adding "node 12" anywhere is going to change anything.

@eemeli
Copy link
Owner

eemeli commented May 24, 2022

@FelicitusNeko If you are not able to upgrade your tooling or add node 12 to your Browserslist config, then this continues to be an issue for which a minimal reproduction is rather vital for further progress.

@ericpromislow
Copy link

I'm seeing this problem as well.

Adding node 12 to package.json::browserslist did nothing.

Trying to bump webpack to 5.x breaks many other dependencies, and some of them don't have a newer version that depends on webpack 5.

So this is a no-go right now.

@eemeli
Copy link
Owner

eemeli commented Jun 9, 2022

@ericpromislow Are you able to provide a minimal reproduction of the problem you're experiencing?

@ericpromislow
Copy link

I don't have a self-contained repro, but since it's for an open-source project, here's how to experience it:

$ git clone https://github.com/rancher-sandbox/rancher-desktop.git
$ cd rancher-desktop
$ patch -p1 <<EOT
diff --git a/package.json b/package.json
index e7fc68fc..786a0a52 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "vue-shortkey": "^3.1.7",
     "vue-slider-component": "^3.2.11",
     "xdg-app-paths": "^5.4.1",
-    "yaml": "^1.10.2"
+    "yaml": "^2.1.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
EOT
$ npm i
$ npm run dev

Many lines will now appear in the terminal, along the lines of:


 ERROR  Failed to compile with 13 errors                                                                friendly-errors 09:34:29


 ERROR  in ./node_modules/yaml/browser/dist/nodes/Scalar.js                                             friendly-errors 09:34:29

Module parse failed: Unexpected token (11:19)

All of the error messages are complaining of instances of ?? and VAR?.FIELD -- Most of our code is in
.ts files and we're using the typescript transpiler, which I guess is converting ?? and ?. to something the
JS compiler accepts. All of the error messages in node_modules/yaml/... are in .js files.

This message:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

is telling me I need to do something, but I'm not knowledgeable enough about the JS dialect world to know what that something should be.

@eemeli
Copy link
Owner

eemeli commented Jun 9, 2022

The issue you're hitting is nuxt/nuxt#9221, and the fix suggested there appears to work just like it should in your example:

--- a/src/nuxt.config.js
+++ b/src/nuxt.config.js
@@ -32,6 +32,7 @@ export default {
         loader:  'raw-loader',
       });
     },
+    transpile: ['yaml'],
   },
   buildDir:     '../dist/nuxt',
   buildModules: [

I'll close this issue at least for now, as this appears to consistently be an upstream issue in tools that depend on Webpack v4 or otherwise need additional configuration for parsing code that uses optional chaining.

@MrWook
Copy link

MrWook commented Jun 24, 2022

Hey, i'm not really sure but this doesn't seem like a tooling problem.
I'm neither using any of the tooling that was described with the problem so far.

I'm using esbuild to execute typescript files directly. In this typescript files i can use someArray?.[1] just fine. I even added another library and added this code in it which worked too.
So this issue only related to the yaml library.

My tooling is basically:

"scripts": {
    "start-ts-file": "node -r esm -r esbuild-register --unhandled-rejections=strict"
  },
  "dependencies": {
    "esbuild": "0.14.47",
    "esbuild-register": "3.3.3",
    "esm": "3.2.25",
    "yaml": "2.1.1",
    "@zxcvbn-ts/core": "2.0.1"
  },
  "devDependencies": {
    "typescript": "4.7.4",
    "@types/node": "18.0.0"
  },

And the script:

import yaml from 'yaml'
import {zxcvbn} from '@zxcvbn-ts/core'

// prints v16.14.2
console.log('VERSION', process.version)

const someJson = {
  'a': 2,
  'b': 'c'
}

// this works fine
const someArray = ['a', 'b']
console.log(someArray?.[1])

// i added the above code into the node_modules file of the next library which works fine too
zxcvbn('password')

// i replaced the   if (prelude[i + 1]?.[0] !== '#') with   if (prelude[i + 1] && prelude[i + 1][0] !== '#') and added the above code into it wich doesn't work
yaml.stringify(someJson)

@eemeli
Copy link
Owner

eemeli commented Jun 24, 2022

@MrWook You're using -r esm as a command-line flag, which should be completely unnecessary with Node.js v16. Internally, that's using Webpack v4 to transpile files while loading them.

@MrWook
Copy link

MrWook commented Jun 24, 2022

Without the -r esm part it is actually working.
Isn't esm an own bundler like webpack? And it doesn't have any webpack as dependency

But the issue remains that yaml is the only library that throws an error with a bundler.

@eemeli
Copy link
Owner

eemeli commented Jun 24, 2022

Ah, true, it's only a dev dependency there. Still, the upstream issue you've hit is this:

@MrWook
Copy link

MrWook commented Jul 12, 2022

How did it hit this upstream issue if yaml is the only package with this issue but other packages and the project code is just fine to have those code parts?

@eemeli
Copy link
Owner

eemeli commented Jul 12, 2022

Your other dependencies might not be using the nullish coalescing operator in their published source code, and your project's own code may be transpiled using different settings than your dependencies.

@gregowahoo
Copy link

Why is this closed? What's the fix?

@gregowahoo
Copy link

Here's the fix... reinstall everything. https://nodejs.org/en/download

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants