Node.js Cannot find module when refactoring method into separate file - node.js

Question

This has been asked a lot and I still can't wrap my head around it.
My old, working code:
database-setup.mjs file in /
import sqlite3 from 'sqlite3';
import { open } from 'sqlite'
(async () => {
// open the database
const db = await open({
filename: './mydb.sqlite',
driver: sqlite3.Database,
});
await db.migrate({ force: true });
const people = await db.all('SELECT * FROM person');
console.log("All People:", JSON.stringify(people, null, 2));
const vehicles = await db.all('SELECT * FROM vehicle');
console.log("All Vehicles:", JSON.stringify(vehicles, null, 2));
})();
I have a lot of db calls, so I thought I refactor the open method into a separate file.
resulting in this file under /src/lib/db.ts
import sqlite3 from 'sqlite3'
import { open } from 'sqlite'
export async function openDB () {
return open({
filename: 'mydb.sqlite',
driver: sqlite3.Database
})
}
and the previous file from the top now looks like this:
import { openDB } from './src/lib/db'
(async () => {
// open the database
const db= await openDB();
await db.migrate({ force: true });
const people = await db.all('SELECT * FROM person');
console.log("All People:", JSON.stringify(people, null, 2));
const vehicles = await db.all('SELECT * FROM vehicle');
console.log("All Vehicles:", JSON.stringify(vehicles, null, 2));
})();
running this now results in
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\Programming\nextjs\nextjs-basics\src\lib\db' imported from D:\Programming\nextjs\nextjs-basics\database-setup.mjs
My Node version is >14.0.
The path is correct, I see the file ts file there. I do not see any compile file, but I think that's normal? So I don't understand why it is not finding the module?
The tsconfig:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}

Answer 1

One way to solve it:
So I had to rename the db.ts file into db.mjs - problem solved.
But now I am running .js files, even though I wanted a 100% ts coverage.
The - in my eyes - proper way to actually tackle the problem instead of avoiding it:
Install ts-node
Create an additional tsconfig (to avoid interference with frameworks, IE11 Polymorph stuff etc) and add this to it:
{
"compilerOptions": {
"target": "ES2017",
"module": "CommonJS"
}
}
Change your package.json dev command accordingly, e.g. for me this was changing
"dev": "node ./database-setup.mjs && next dev"
into
"dev": "ts-node --project ./tsconfig-node.json ./database-setup.ts && next dev"
Both db.ts and database-setup.ts are now in typescript and everything works.