Remix updates tsconfig and doesn't care about extends key #4978
Closed
Description
What version of Remix are you using?
1.9.0
Steps to Reproduce
- Create
tsconfig-base.jsonto extends
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Default",
"compilerOptions": {
"target": "ES2019",
"composite": false,
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"inlineSources": false,
"isolatedModules": true,
"moduleResolution": "node",
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitAny": false,
"preserveWatchOutput": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"resolveJsonModule": true
}
}- Create
tsconfig-react.json
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "React Application",
"extends": "./tsconfig-base.json",
"compilerOptions": {
"jsx": "react-jsx",
"lib": ["DOM", "DOM.Iterable", "ES2019"],
"module": "ESNext"
},
"include": ["src"]
}- Create
tsconfig-remix.json
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Remix Application",
"extends": "./tsconfig-react.json",
"compilerOptions": {
"allowJs": true,
"resolveJsonModule": true
}
}- Update
tsconfig.json
{
"extends": "./tsconfig-remix.json",
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@app/*": ["./app/*"]
}
}
}-
Run
npm run dev
And you'll see:
The following suggested values were added to your "tsconfig.json". These values can be changed to fit your project's needs:- compilerOptions.forceConsistentCasingInFileNames was set to 'true' - compilerOptions.lib was set to 'DOM,DOM.Iterable,ES2019' - compilerOptions.strict was set to 'true' - compilerOptions.target was set to 'ES2019'
The following mandatory changes were made to your tsconfig.json:
- compilerOptions.esModuleInterop was set to 'true'
- compilerOptions.isolatedModules was set to 'true'
- compilerOptions.jsx was set to 'react-jsx'
- compilerOptions.noEmit was set to 'true'
- compilerOptions.moduleResolution was set to 'node'
And tsconfig.json will be updated. So Remix doesn't care about extends and update config to
{
"extends": "@packages/ts-configs/remix",
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@app/*": ["./app/*"]
},
// everything that above added by remix after npm run dev
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"lib": ["DOM", "DOM.Iterable", "ES2019"],
"strict": true,
"target": "ES2019",
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react-jsx",
"noEmit": true,
"resolveJsonModule": true,
"moduleResolution": "node"
}
}As you see this props already exists in extended config, but why remix updates it?
If I run tsc --showConfig before npm run dev and config will be updated, I got this:
> tsc --showConfig
{
"compilerOptions": {
"target": "es2019",
"composite": false,
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"inlineSources": false,
"isolatedModules": true,
"moduleResolution": "node",
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitAny": false,
"preserveWatchOutput": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"resolveJsonModule": true,
"jsx": "react-jsx",
"lib": [
"dom",
"dom.iterable",
"es2019"
],
"module": "esnext",
"allowJs": true,
"baseUrl": "./",
"paths": {
"@app/*": [
"./app/*"
]
}
},
"files": [
"./remix.env.d.ts",
"./app/entry.client.tsx",
"./app/entry.server.tsx",
"./app/root.tsx",
"./app/routes/index.tsx"
],
"include": [
"remix.env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}As you see, ts tracks extended configs and merged it.
Expected Behavior
Remix will track extends from tsconfig.json and will not update it
Actual Behavior
Remix doesn't care about tsconfig extends props.
If I log console.log(fullConfig); from
node_modules/@remix-run/dev/dist/compiler/utils/tsconfig/write-config-defaults.js
It returns
{
extends: '@packages/ts-configs/remix',
include: [ 'remix.env.d.ts', '**/*.ts', '**/*.tsx' ],
compilerOptions: {
baseUrl: '.',
paths: { '@app/*': [Array] },
allowJs: true,
resolveJsonModule: true
}
}