tsconfig noEmit must be true

Question

I'm using create-react-app and I also have some ts and tsx files. In my tsconfig file (see below) I set noEmit to false because js files need to be emitted. However, every time I start the server, noEmit is set to false with the following message:

The following changes are being made to your tsconfig.json file:
   - compilerOptions.noEmit must be true

When noEmit is set to false, the js files that should be generated from my ts files, aren't generated, which means the app isn't updated. What causes this behaviour? Is there any way to avoid it? Or is the only option to make a seperate tsconfig for the folder with the ts files?

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "ES2017"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "strictPropertyInitialization": false,
    "strictNullChecks": false,
    "strict": true,
    "sourceMap": true,
    "noEmit": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

You need to override this compile option in your webpack.config-file, like this:

rules: [
     {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
           compilerOptions: {
              "noEmit": false
           }
        },
        exclude: /node_modules/,
      },