jsx was set to preserve (next.js implements its own optimized jsx transform)

[Fi1osof]

Feature request

Do not force update tsconfig.json

Is your feature request related to a problem? Please describe.

I want use next-js as dev-server for development components. With "jsx": "preserve" tsc builds .jsx files instead .js. For fix this i should use "jsx": "react". But when i start next-js, tsconfig.json updated by them.

Yes, i can create tsconfig.build.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "jsx": "react",
    "noEmit": false,
    "declaration": true
  },
  // Include in dist this paths only
  "include": ["./src"]
}

but in this case i do not see errors if have not import React from "react"

[osequi]

Next.js breaks my Jest tests.

It overwrites "jsx": "react" with "jsx": "preserve" in tsconfig.json when I run it in dev mode (next dev)

Also this sounds alarming from Next.js: The following mandatory changes were made to your tsconfig.json:
You'll never get something like that from Create React App. It's an obtrusing way to make things work.

[morgs32]

Well actually CRA will change it right back to "react". Won't it?

[schorfES]

I had the same issue that next is always changing the "jsx" setting when running next dev which caused an upcoming run of jest to fail. I am serving a separate tsconfig.test.json right now that looks like this:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

and added this setting into my jest.config.json:

{
  "globals": {
    "ts-jest": {
      "tsconfig": "./tsconfig.test.json"
    }
  },
  ...
}

Now next and jest are happy, but I am not 100% because my tests run on a different setting... 👎

[ScottyMJacobson]

@schorfES see my answer here - you can get away with just overridding that one jsx config value, and leaving the rest of the tsconfig.json the same

[LandonSchropp]

For anyone that comes across this thread via Google like I did, @schorfES's answer works for me with one tiny modification:

"jsx": "react-jsx"

[GermanJablo]

It is not working for me with Vitest. In addition to following those instructions I have added this to my vitest.config.ts:

import { defineConfig } from "vite";

export default defineConfig({
  test: {
    environment: "jsdom",
    typecheck: {
      tsconfig: "./tsconfig.test.json",
    }
  },
});

Has anyone been able to solve it or has the same problem?

[Admiralfeb]

This also causes intellisense issues with Typescript. If jsx is set to preserve, then VSCode recommends importing React when it's no longer necessary in React 17.

[tgallacher]

It would be better if NextJS would warn/notify of potential issues instead of overriding the tsconfig.json file itself.

Overriding the file could then be exposed as an opt-in config.

[jt3k]

also changing the property "jsx": "preserve", next-js formats my tsconfig it uses no settings from .prettierrc or .editorconfig.
because of this, my next edits to this file change the entire file (4 spaces)

[GermanJablo]

The "solution" proposed above to make it work with jest does not work for me when I try it with Vitest.
In addition to following those instructions I have added this to my vitest.config.ts:

import { defineConfig } from "vite";

export default defineConfig({
  test: {
    environment: "jsdom",
    typecheck: {
      tsconfig: "./tsconfig.test.json",
    }
  },
});

Has anyone been able to solve it or has the same problem?

[mathiasfc]

Future reference: for those who are facing issues with rollup ("@rollup/plugin-typescript"), you can manually set prop inside the rollup config file (rollup.config.mjs).

typescript({
   jsx: "react-jsx"
}),

[carlosrsabreu]

To anyone who has this problem (jsx being set to preserve) and is using NextJS, set it to preserve and set this in jest.config.js:

const nextJest = require('next/jest')

const createJestConfig = nextJest({
    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
    dir: './',
})

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
    // Add more setup options before each test is run
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    testEnvironment: 'jest-environment-jsdom',
    preset: 'ts-jest',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(config)