Unexpected Token Error

[ckauth97]

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)

[eemeli]

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

[slntopp]

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

[eemeli]

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]

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
+ yaml@2.1.0
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
+ yaml@2.1.0
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]

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]

@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]

Also running Node v16.

Will post a reproducible scenario if I can find one.

[FelicitusNeko]

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]

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]

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]

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

[FelicitusNeko]

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]

@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]

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]

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

[ericpromislow]

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]

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]

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]

@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]

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]

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

• Nullish coalescing (??) causes SyntaxError standard-things/esm#909

[MrWook]

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]

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]

Why is this closed? What's the fix?

[gregowahoo]

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