I’m creating a vite react.js web application using typescript and tailwind CSS. I run tsc –watch on my command line and I’m getting the following errors:
tsconfig.json:3:25 - error TS6046: The argument to the '--moduleResolution' option must be: 'node', 'classic', 'node12', 'nodenext'.
tsconfig.json:8:5 - error TS5023: Unknown compiler option 'allowImportingTsExtensions'.
tsconfig.json:21:5 - error TS5070: Option '--resolveJsonModule' cannot be specified without module resolution strategy 'node'.
My typescript version is: 5.6.2
Node: 20.13.0
My tsconfig.json looks like this:
{
"compilerOptions": {
"moduleResolution": "bundler",
"module": "es2020",
"composite": true,
"target": "ES2020",
"jsx": "react-jsx",
"allowImportingTsExtensions": true,
"skipLibCheck": true,
"lib": [
"DOM",
"ESNext",
"ES2020",
"DOM.Iterable"
],
"types": [
"vite/client",
"jest"
],
/* Bundler mode */
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"exclude": [
"node_modules",
"./dist"
],
"include": [
"./src/**/*.ts",
"./src/**/*.tsx",
"./src/__tests__/**/*.ts",
"./src/__tests__/**/*.tsx"
]
}
- npm install typescript@latest;
- Delete the node_modules folder and package-lock.json, followed by npm install
tsconfig.json:3:25 – error TS6046: The argument to the ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node12’, ‘nodenext’.
The error message tells you that bundler is not supported.
tsconfig.json:21:5 – error TS5070: Option ‘–resolveJsonModule’ cannot be specified without module resolution strategy ‘node’.
The third error message tells you to set your moduleResolution to node for it to work.
Try changing your tsconfig.json to this:
{
"compilerOptions": {
"moduleResolution": "node"
// rest of config...
}
}