`verbatimModuleSyntax:true` throws error with no reason | TypeScript Community | Page 1

frigid forge Oct 30, 2023, 10:50 AM

#

Hi 👋
I am trying to set up a TS project with verbatimModuleSyntax enabled. Unfortunately it gives me TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled. error even when I only use ESM. Does it look like a bug to you or am I just misunderstanding how/where CommonJS is (not) used here?

Here is the repository with reproduction: https://github.com/cjayyy/checkly-typescript-debug

Any ideas appreciated 🙏

tacit cipher Oct 30, 2023, 6:53 PM

#

@frigid forge please show your tsconfig

frigid forge Oct 30, 2023, 8:47 PM

#

tacit cipher <@481811738166165514> please show your tsconfig

here is used tsconfig:

// This is base config from https://github.com/tsconfig/bases/blob/main/bases/node18.json
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 18",

  "_version": "18.2.0",

  "compilerOptions": {
    "lib": ["es2023"],
    "module": "node16",
    "target": "es2022",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node16",

    // Next line is only thing changed from base config
    "verbatimModuleSyntax": true
  }
}

tacit cipher Oct 30, 2023, 8:49 PM

#

using node16 for the module is ambiguous

#

since it can output either cj or esm

#

I'd recommend using es2022 if you want to target esm

#

but also, if you are targetting esm, don't forget imports must have file extensions in them, as per the esm spec

#

@frigid forge

frigid forge Oct 30, 2023, 8:54 PM

#

using node16 for the module is ambiguous
It's recommended config for Node18 (which I am using). What do you mean by that it's ambiguous?

tacit cipher Oct 30, 2023, 8:55 PM

#

Available from 4.7+, the node16 and nodenext modes integrate with Node’s native ECMAScript Module support. The emitted JavaScript uses either CommonJS or ES2020 output depending on the file extension and the value of the type setting in the nearest package.json.

#

because that setting depends on other things, like the package.json or file exnteison

#

also, node uses cjs by default, but you specifically asked for esm

frigid forge Oct 30, 2023, 8:58 PM

#

tacit cipher because that setting depends on other things, like the package.json or file exnt...

That's why I have "type": "module" in the package. Thats why I find it weird that TS thinks I am using CommonJS.

#

It's recommended config for Node18 (which I am using).
I think I misunderstood what these recommendation types mean. Now i get it I think - Node* are meant for packages working on NodeJS level - thus should use CommonJS.
I am on the other hand making package for browser runtime (except for this Checkly part), therefore I should rather go with CRA base config.

tacit cipher Oct 30, 2023, 9:08 PM

#

Node* are meant for packages working on NodeJS level - thus should use CommonJS
right

#

therefore I should rather go with CRA base config
huh, CRA is pretty much deprecated, or at least shouldn't be used for newer projects

#

have a look at Vite if you're going for a webapp, or something custom using esbuild for libraries

frigid forge Oct 30, 2023, 9:09 PM

#

I don't use CRA, I just meant this CRA example is relevant for my setup

#

in the meaning that it targets ESM

#

Anyway, when I try this config, the result is the same

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 18",

  "_version": "18.2.0",

  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "es2015",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,

    "verbatimModuleSyntax": true
  }
}

#

If I use es2022 as you suggested, it's the same

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 18",

  "_version": "18.2.0",

  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "es2022"],
    "module": "es2022",
    "moduleResolution": "bundler",
    "target": "ES2022",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,

    "verbatimModuleSyntax": true
  }
}

tacit cipher Oct 30, 2023, 9:14 PM

#

make sure you have "type": "module" in your package.json

frigid forge Oct 30, 2023, 9:14 PM

#

I do

tacit cipher Oct 30, 2023, 9:14 PM

#

if that's the case, then idk what else could be the problem MeowThink

#

everything looks good to me

frigid forge Oct 30, 2023, 9:37 PM

#

Thank you for your time anyway! 🙂

golden delta Oct 31, 2023, 2:42 PM

#

could be a problem in checkly? i don't really know what that is/how it works, but from your test script it seems like it's the one compiling/interpreting your typescript code

#

i did find https://www.checklyhq.com/docs/cli/using-constructs/#using-ecmascript-modules-files-experimental which makes it sound like ESM is supported (but "experimental", whatever that means)

#

i pulled your repo and it compiles fine with tsc, so yeah i'd look at what checkly is doing

frigid forge Nov 1, 2023, 1:33 PM

#

That's what came to my mind as well, but I wasn't able to debug it further. Didn't find the docs You sent. I am going to theck that out again. Thanks for the tip! ❤️

frigid forge Nov 14, 2023, 8:57 AM

#

Ok so I finally managed to debunk the issue - As @golden delta presumed the issue lays in Checkly itself. It seems that it doesn't respect package's type: module and that's the culprit. If I renamed all Checkly files (config and checks) to .mjs it started to work as expected! 🎉

Thank you guys for your effort. 🙂

#`verbatimModuleSyntax:true` throws error with no reason