Importing ES Modules - Confused about Configuration

[kjrocker]

I'm trying to debug ESM imports in my VSCode extension. This started with import { parse } from "@astrojs/compiler";, which produced the error:

The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@astrojs/compiler")' call instead.

A dynamic import would require restructuring every single function to be async, I really don't want to do that, I just want to use imports normally. The error also suggested setting type: module in package.json, but when I do that I, any imports of my own files produces the following:

Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './refactors/picture-refactor.js'?

But it's a Typescript file. Adding the ts extension produces:

An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled.

Updating that setting produces:

Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set.

I'm now 4 configuration errors deep, and decide this is not the correct path, so I reverse everything.

I also tried, after undoing all that configuration, const parse = require("@astrojs/compiler").parse, which no longer threw import errors, but lost the types so parse was just any, which was not helpful.

I want to import both functions and types from an external library, robustly and simply, in a way that preserves the libraries types.

To duplicate my situation, you can run the following:

• npx --package yo --package generator-code -- yo code
• Select "New Extension (Typescript)", name it, select "esbuild", select "pnpm"

I ran into the same issue with unbundled, and assumed switching to "esbuild" would configure sensible imports for me. But it didn't help.

An example repository is here: https://github.com/kjrocker/import-nightmare

[darthmaim]

1. ESM modules should use .js as extension in imports even when using typescript, so there is no need to set allowImportingTsExtensions.
2. The require variant should work with const parse = (require("@astrojs/compiler") as typeof import("@astrojs/compiler")).parse, which admittedly is a little ugly.

[kjrocker]

Nope, it doesn't like the typeof import("@astrojs/compiler) import either.

It's not pretty, but I ended up just doubling down on dynamic imports and only using imported functions in my big/important functions, no libraries allowed in my utility functions. Which is a really awkward restriction, but prevents me from importing functions everywhere OR injecting them as a dependency.

The second trick, to let me import types, was to literally copy-paste the library types I needed out of the library and into a types.ts file. Which isn't scalable, but is enough for now.

[RedCMD]

you should ask https://www.npmjs.com/package/@astrojs/compiler to add a separate types file for CommonJS
atm the types file is shared between esm and cjs and TypeScript doesn't like that