extending tsconfig seems to be getting ignored

Question

I have a tsconfig in the root of my app which gets created by create-react-app . With in the src folder of my app, I have a folder called api which is where I have nodejs server side code. The problem I have, is that the tsconfig of create-react-app does not work for what I need in my server side code.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noImplicitAny": false,
    "downlevelIteration":true,
    "baseUrl": "src/",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "api"
  ]
}

The problem is with the "module": "esnext", This option only works for client side code, but wont work for node unless if I have.mjs extension if I understand correctly. In node I need this option set to commonjs. This is causing me to get the following error when running my code

SyntaxError: Cannot use import statement outside a module

So I attempted to create a new tsconfig file inside the api folder which extends the tsconfig of the root of the app. Here is that code.

{
  "extends": "../../tsconfig",
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "sourceMap": false,
    "noUnusedLocals": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
  }
}

It feels like this is getting totally ignored however, because I am still getting the exact same error.

EDIT: I added an option to exclude the api folder in my root tsconfig. Still not working.

Any ideas?

Answer 1

While this does not answer my question directly, I did manage to solve my issue by giving ts-node the exact path of the tsconfig I want it to use when running the server side code. Here is what that looks like.

"start:server": "./node_modules/.bin/ts-node --compiler typescript --project src/api/tsconfig.api.json src/api/index_server.ts"