Cannot get it to import the correct files

[thany]

Whatever I do, it spews out an error. Either it's importing from a module's cjs directory, which is incorrect, or it's erroring even before that. I've tried a million combinations of type: module in package.json, and the module and target options in tsconfig.json. I also tried the --esm switch on and off. Very frustrating to see every combination spews out its own error.

This all happened when I attempted to update the chalk package. But I really don't think it's related. What is related, is that this project uses sitecore-jss, which comes as a package of both cjs and esm files.

Currently, the tsconfig.json looks like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"],
      "lib/*": ["src/lib/*"],
      "temp/*": ["src/temp/*"],
      "assets/*": ["src/assets/*"]
    },
    "target": "es2021",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "strictFunctionTypes": false,
    "forceConsistentCasingInFileNames": true,
    "downlevelIteration": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

And tsconfig.scripts.json (more on this later) looks like so:

{
	"extends": "./tsconfig.json",
	"compilerOptions": {
		"module": "commonjs"
	}
}

So then, I should be able to run a script (NOT the build process or whatever of the website we're building - just a script to set up some stuff that is not relevant to the issue at hand) like so:

ts-node --project tsconfig.scripts.json scripts/bootstrap.ts

Which doesn't work:

C:\Projects\MyProject\node_modules\ts-node\dist\index.js:851
            return old(m, filename);
                   ^
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Projects\MyProject\node_modules\chalk\source\index.js from C:\Projects\MyProject\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js not supported.
Instead change the require of index.js in C:\Projects\MyProject\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js to a dynamic import() which is available in all CommonJS modules.
    at require.extensions.<computed> [as .js] (C:\Projects\MyProject\node_modules\ts-node\dist\index.js:851:20)
    at Object.<anonymous> (C:\Projects\MyProject\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js:16:33)
    at require.extensions.<computed> [as .js] (C:\Projects\MyProject\node_modules\ts-node\dist\index.js:851:20)
    at Object.<anonymous> (C:\Projects\MyProject\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\index.js:40:33)
    at require.extensions.<computed> [as .js] (C:\Projects\MyProject\node_modules\ts-node\dist\index.js:851:20)
    at Object.<anonymous> (C:\Projects\MyProject\scripts\bootstrap.ts:8:31)
    at m._compile (C:\Projects\MyProject\node_modules\ts-node\dist\index.js:857:29)
    at require.extensions.<computed> [as .ts] (C:\Projects\MyProject\node_modules\ts-node\dist\index.js:859:16)
    at phase4 (C:\Projects\MyProject\node_modules\ts-node\dist\bin.js:466:20)
    at bootstrap (C:\Projects\MyProject\node_modules\ts-node\dist\bin.js:54:12)
    at main (C:\Projects\MyProject\node_modules\ts-node\dist\bin.js:33:12)
    at Object.<anonymous> (C:\Projects\MyProject\node_modules\ts-node\dist\bin.js:579:5) {
  code: 'ERR_REQUIRE_ESM'
}

See how it's importing from the cjs directory? The correct imports are in the file in the esm directory of the same package. Why can't it use those if these don't work?

Common solution the internet is absolutely riddled with is to change the tsconfig.json. So I do:

{
	"extends": "./tsconfig.json",
	"compilerOptions": {
		"module": "ESNext"
	}
}

Lo and behold, this produces a different error:

C:\Projects\MyProject\scripts\bootstrap.ts:1
import 'dotenv/config';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module.m._compile (C:\Projects\MyProject\node_modules\ts-node\src\index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Object.require.extensions.<computed> [as .ts] (C:\Projects\MyProject\node_modules\ts-node\src\index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Function.Module._load (node:internal/modules/cjs/loader:922:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at phase4 (C:\Projects\MyProject\node_modules\ts-node\src\bin.ts:649:14)

It doesn't even try to import anything, it's complately kacked. It wants to be a module, so, I dunno, go ahead? If you need it to be a module, make it a bloody module 🤨 I mean who cares, as long as it works.

I shouldn't have to say this, but I cannot add type: module to my package.json without fluffing up the rest of the project. But just for kicks, let's try it anyway and see how much we can break:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Projects\MyProject\scripts\bootstrap.ts
    at new NodeError (node:internal/errors:400:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Unknown file extension? I'm not blaming ts-node anymore at this point. This is just someone who has done a major fluffup and hidden it behind some obscure setting that no one needs. Anyway, away with the ranting. Onto a solution. I'll remove type: module so as to not completely destroy the project and have other scripts work perfectly fine again. And have it recognise the bloody .ts extension again as well.

What follows is a barrage of millions of combinations of options, each one resulting in at least one of the above errors.

All I need is for it to import esm modules where the import statements are that it expected in the first place. OR, have it not care about require() statements and just bloody take them like a champ. Bottomline is if you absolutely MUST require esm, then import esm files, not their apparant opposite.

So then.

How do I do that?
What is the magical combination of options that makes this work?