arktype•14mo ago

CJS/ESM issue with arktype

I installed arktype. It's a ESM thing, and it broke my building process. To fix it, I had to switch to building with babel and had to set these values in tsconfig.json::

    "module": "ES2015",
    "moduleResolution": "Bundler"

    "module": "ES2015",
    "moduleResolution": "Bundler"

However, now ts-node stopped working and hence - mocha and all my tests written in TS:

import { Yandex } from './clients';
^^^^^^
SyntaxError: Cannot use import statement outside a module

import { Yandex } from './clients';
^^^^^^
SyntaxError: Cannot use import statement outside a module

Any ideas?

49 Replies

OnkelTemOP•14mo ago

Here is a sandbox where you can see the origin of this problem

OnkelTemOP•14mo ago

https://replit.com/@OnkelTem/NodeJS-TypeScript-1

OnkelTem

replit

NodeJS TypeScript 1

Run Node.js code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.

OnkelTemOP•14mo ago

Just hit the "Run" button

OnkelTemOP•14mo ago

OnkelTemOP•14mo ago

The code is as simple as:

import { type } from 'arktype'


const user = type({
  name: 'string'
})

user.assert('')
user.assert({ name: 1 })
user.assert({ name: 'foo' })

import { type } from 'arktype'


const user = type({
  name: 'string'
})

user.assert('')
user.assert({ name: 1 })
user.assert({ name: 'foo' })

ssalbdivad•14mo ago

I have no idea why this would happen. I guess ts-node cares about module resolution settings in tsconfig. Try using NodeNext or something? It should be able to resolve the CJS exports that are specified in package.json I bet that's what it is there's a resolvePackageJsonExports flag that is enabled by default for NodeNext and maybe some others maybe try enabling that? ES2015 is hella old

OnkelTemOP•14mo ago

Ok I updated it. https://replit.com/@OnkelTem/NodeJS-TypeScript-1

OnkelTem

replit

NodeJS TypeScript 1

Run Node.js code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.

OnkelTemOP•14mo ago

Here is a new version. I also removed not-used deps and @tsconfig/* package, bringing its content into project's tsconfig.json So not it's this:

{
  "compilerOptions": {
    "lib": ["es2021"],
    "module": "node16",
    "target": "es2021",
    "moduleResolution": "node16",
    "resolvePackageJsonExports": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
  }
}

{
  "compilerOptions": {
    "lib": ["es2021"],
    "module": "node16",
    "target": "es2021",
    "moduleResolution": "node16",
    "resolvePackageJsonExports": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
  }
}

ssalbdivad•14mo ago

I don't understand this UI why is it so bad Like I can only see the command line and there's no where obvious for me to click to see files unless I just reload

OnkelTemOP•14mo ago

Hm. Are you logged in?

ssalbdivad•14mo ago

Can you repro it on StackBlitz that's where I usually test AT

ssalbdivad•14mo ago

https://stackblitz.com/edit/rzkceh?file=demo.ts

StackBlitz

Fayxym (forked) - StackBlitz

ArkType demo demo

ssalbdivad•14mo ago

I tried to sign up and just got this

OnkelTemOP•14mo ago

Let's figure out the heck is it with sharing repl.it I created a posting on their forum, waiting for reply I'm not sure if I can reprodice it on stackblitz. I thought it's a client-side thing only maybe I'm wrong

OnkelTemOP•14mo ago

https://stackblitz.com/edit/typescript-yqauxj?file=foo.ts

Artiom Neganov

StackBlitz

Typescript + ArkType (forked) - StackBlitz

Blank starter project for building TypeScript apps.

OnkelTemOP•14mo ago

Not the real deal actually, but an error is displayed anyway

OnkelTemOP•14mo ago

I've an answer on repl.it forum already! Not sure if you figured that out yourself, but...

OnkelTemOP•14mo ago

This button should show the source 🙂

ssalbdivad•14mo ago

Wow that's such bad UX haha That looks like an embed link

OnkelTemOP•14mo ago

ssalbdivad•14mo ago

Anyways I think what you need to do is change "moduleResolution": "Node", You only want NodeNext etc. if you're using ESM

OnkelTemOP•14mo ago

https://replit.com/@OnkelTem/NodeJS-TypeScript-1#tsconfig.json

OnkelTem

replit

NodeJS TypeScript 1

Run Node.js code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.

OnkelTemOP•14mo ago

I set it to NodeNext

    "module": "NodeNext",
    "moduleResolution": "NodeNext",

    "module": "NodeNext",
    "moduleResolution": "NodeNext",

ssalbdivad•14mo ago

I know I meant you have to set it to "moduleResolution": "Node", To use CJS

OnkelTemOP•14mo ago

Ah, I see. Well, that I tried as well

OnkelTemOP•14mo ago

ssalbdivad•14mo ago

Can you change module as well to CommonJS or something?

Dimava•14mo ago

1. Try esbuild-kit/tsx runner 2. Try adding export {}

OnkelTemOP•14mo ago

This seems to be working, yes. So the only working configuration so far is:

    "module": "CommonJS",
    "moduleResolution": "Node",

    "module": "CommonJS",
    "moduleResolution": "Node",

ssalbdivad•14mo ago

Yeah that actually makes sense you need those settings for CJS I just haven't used it in a long time

OnkelTemOP•14mo ago

It's interesting that "moduleResolution": "Node16" doesn't work

ssalbdivad•14mo ago

Node16 is ESM

OnkelTemOP•14mo ago

Ah, I see then So I use a bundler (babel), but cannot set it to Bundler because ts-node starts to look into tsconfig and make false asumptions Probablt it doesn't understand Bundler? Meh

ssalbdivad•14mo ago

I don't know that might be a good question for the TS discord

OnkelTemOP•14mo ago

A few days ago they helped me to discover this "Bundler" options which seemed to be a good solution! Until I tried it with ts-node LOL

ssalbdivad•14mo ago

Is there a reason you can't use ESM? Is it a legacy work project?

OnkelTemOP•14mo ago

I don't know really. Don't want this plague to spread further LOL

ssalbdivad•14mo ago

ESM makes things easier

OnkelTemOP•14mo ago

in what way?

ssalbdivad•14mo ago

ESM can import CJS the reverse isn't true

OnkelTemOP•14mo ago

What I've been through for the last few days - I wouldn't call easy

ssalbdivad•14mo ago

I mean granted this is a pain especially if you're new to it Basically if you have a choice to get it to work with either CJS or ESM, ESM will be easier and better for the long term

OnkelTemOP•14mo ago

But that's not an advantage, right? It's the source of the problems. For this reason I cannot use ESM with commonJS. And ESM - is a system that forces me to switch. I'm not a conspiracy theory follower, but it may look like a deliberate thing, while it's just an architecture consequence

ssalbdivad•14mo ago

No the reason you were getting that error is because your project was specified as CJS because you don't have "type": "module" in your package.json You will have to make some slight adjustments to enable this setting but again the biggest advantage is you can import CJS from ESM but not the reverse, and some projects only support ESM

OnkelTemOP•14mo ago

I don't use such projects, yeah. I use previous versions, cjs compatible

Dimava•14mo ago

@OnkelTem try tsx runner, it can import es from cjs Are it building a lib or app?

OnkelTemOP•14mo ago

A lib

Gaming

Programming

CJS/ESM issue with arktype