import file using es module configuration and typescript

Question

I am trying to set up a project with yarn pnp and ts and node 16. I created a monorepo with some packages. But as it is well known, the import without extension .js does not work when we use es module. Below you can see my setup:

file structure:

libs
- service1
- service2
- package.json
packages
- server
- frontend
- package.json
package.json

// root project/package.json
{
    "packageManager": "yarn@3.2.3",
    "private": true,
    "workspaces": [
        "packages/*",
        "libs/*"
    ],
}

// libs/package.json
{
    "name": "...",
    "packageManager": "yarn@3.2.3",
    "version": "1.0.0",
    "type": "module"
}

// packages/server/package.json
{
    "name": "...",
    "packageManager": "yarn@3.2.3",
    "type": "module",
    "scripts": {
        "build": "yarn clean && tsc -p tsconfig.json",
        "server": "nodemon --experimental-modules --es-module-specifier-resolution=node ./dist/app.js",
        "clean": "rm -rf ./dist"
    },
}

packages/server/tsconfig.json
{
    "$schema": "https://json.schemastore.org/tsconfig",
    "display": "Node 16 + ESM + Strictest",
    "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./dist"
        "target": "es2021",
        "lib": [
            "es2021"
        ],
        "module": "es2022" ,
        "moduleResolution": "node" ,
        "checkJs": true ,
        "sourceMap": true ,
        "importsNotUsedAsValues": "error" ,
        "esModuleInterop": true ,
        "forceConsistentCasingInFileNames": true ,

        "strict": true ,
        "noUnusedLocals": true ,
        "noUnusedParameters": true ,
        "exactOptionalPropertyTypes": true ,
        "noImplicitReturns": true ,
        "noFallthroughCasesInSwitch": true ,
        "noUncheckedIndexedAccess": true ,
        "noImplicitOverride": true ,
        "noPropertyAccessFromIndexSignature": true ,
        "allowUnusedLabels": false ,
        "allowUnreachableCode": false ,
        "skipLibCheck": true ,
        "watch": true
    }
}

The problem I have is, even when I am trying to import from one of the services under libs with adding .js add the end of the file name again there is an error and node can not find the file. Ideally I like to import without any extension, however for now I just want to make the project up and running. Any idea?

import file using es module configuration and typescript

0 Answers