it doesn't work at all when use with `tsconfig`.

axetroy commented 4 years ago

Hi.

I have followed the step to use in README.md

tsconfig.extend.json

{
  "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": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["./src/*"]
    },
    "experimentalDecorators": true,
    "typeRoots": ["./types"]
  },
  "include": ["src"]
}

tsconfig.json

{
  "extends": "./tsconfig.extend.json",
  "compilerOptions": {}
}

craco.config.js

const CracoLessPlugin = require('craco-less');
const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.extend.json"
      }
    },
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {'@primary-color': '#1DA57A'},
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

information of DEBUG

here is the information when debug=true

Initial options:

{
  "debug": true,
  "source": "tsconfig",
  "baseUrl": "./",
  "tsConfigPath": "./tsconfig.extend.json"
}

Normalized options:

{
  "source": "tsconfig",
  "baseUrl": "./",
  "tsConfigPath": "./tsconfig.extend.json",
  "debug": true
}

Aliases:

{
  "@": "/path/to/my/project/src"
}

Webpack Config:

{
  "react-native": "react-native-web",
  "@": "/path/to/my/project/src"

Useage

// it should import from './src/store'
import store from '@/store';

tsconfig.json should be right here. The editor can recognize correctly. But craco doesn't

any helps are welcome. thanks for your all ❤️

nir-c2c commented 3 years ago

I have the same issue. Setting everything up as it was indicating in the readme. I'm working on TSC version 3.9.7 and both VSCode and when trying to run cannot find the module. VSCode indicate error TS2307 I'm on craco version 5.6.4 and craco-alias 2.1.1

risen228 commented 3 years ago

@nir-c2c Can you provide debug information? (debug: true in options)

nir-c2c commented 3 years ago

@risenforces Here you go:



{
  "source": "tsconfig",
  "baseUrl": "./",
  "tsConfigPath": "./tsconfig.extend.json",
  "debug": true
}

Normalized options:

{
  "source": "tsconfig",
  "baseUrl": "./",
  "tsConfigPath": "./tsconfig.extend.json",
  "debug": true
}

Aliases:

{
  "@config": "/Users/nir/dev/c2c/C2C-V2/src/config",
  "@awsExports": "/Users/nir/dev/c2c/C2C-V2/src/aws-exports.js",
  "@store": "/Users/nir/dev/c2c/C2C-V2/src/store",
  "@actions": "/Users/nir/dev/c2c/C2C-V2/src/store/actions",
  "@icons": "/Users/nir/dev/c2c/C2C-V2/src/icons",
  "@components": "/Users/nir/dev/c2c/C2C-V2/src/components",
  "@utils": "/Users/nir/dev/c2c/C2C-V2/src/utils",
  "@gql": "/Users/nir/dev/c2c/C2C-V2/src/gql"
}

Webpack Config:

{
  "react-native": "react-native-web",
  "src": "/Users/nir/dev/c2c/C2C-V2/src",
  "@config": "/Users/nir/dev/c2c/C2C-V2/src/config",
  "@awsExports": "/Users/nir/dev/c2c/C2C-V2/src/aws-exports.js",
  "@store": "/Users/nir/dev/c2c/C2C-V2/src/store",
  "@actions": "/Users/nir/dev/c2c/C2C-V2/src/store/actions",
  "@icons": "/Users/nir/dev/c2c/C2C-V2/src/icons",
  "@components": "/Users/nir/dev/c2c/C2C-V2/src/components",
  "@utils": "/Users/nir/dev/c2c/C2C-V2/src/utils",
  "@gql": "/Users/nir/dev/c2c/C2C-V2/src/gql"
}

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)```

The error i'm getting is that a module (`VolumeUp`) doesn't exists in `@icons` but the tsx file is under the folder icons.
If I remove the `@` and just use relative path (so in my case `../icons/VolumeUp` it works fine

risen228 commented 3 years ago

@nir-c2c I see you are using react-native, but what starter is it? create-react-native-app? If so, how did you get debug message? I can't do this with either expo start or expo web.

And, as I see:

create-react-native-app needs babel plugin (resolver) as mentioned here
There is no src directory in their starting boilerplate. So maybe you accidentally left ./src in tsconfig.extend.json or somewhere else.
You might have forgotten to add /* to end of folders alias names in tsconfig.extend.json. It should be specified for directories.

But below I see the following:

The following changes are being made to your tsconfig.json file:

compilerOptions.paths must not be set (aliased imports are not supported)```

As I know expo, it won't delete nothing from tsconfig.json. This looks very strange to me. Are you using a regular create-react-app with react-native?

nir-c2c commented 3 years ago

hi @risenforces , thank you for your fast reply! This is a project I have inherited from a developer that is no longer at the company. It is not a phone application so i'm not sure why there is react native app in here. Its a web base application that runs on aws amplify. here is the tsconfig.extend.json I'm currently using (i'm changing things around to see if I can get it to work)


  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@config": ["./src/config"],
      "@awsExports": ["./src/aws-exports.js"],
      "@store": ["./src/store"],
      "@actions": ["./src/store/actions"],
      "@icons": ["./src/icons"],
      "@components": ["./src/components"],
      "@utils": ["./src/utils"],
      "@gql": ["./src/gql"]
    }
  }
}```

I will try to add the `/*` for folders

risen228 commented 3 years ago

@nir-c2c You don't need to specify ./src twice. baseUrl is enough. With these fixes, it should look like this:

"compilerOptions": {
  "baseUrl": "src",
  "paths": {
    "@store/*": ["./store/*", "./store"]
  }
}

("./store" is optional, but it can be useful for vscode)

nir-c2c commented 3 years ago

@risenforces, it seems that didn't do it. Here is the latest file:


  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@config/*": ["./config/*", "./config"],
      "@awsExports": ["./aws-exports.js"],
      "@store/*": ["./store/*", "./store"],
      "@actions/*": ["./store/actions/*", "./store/actions"],
      "@icons/*": ["./icons/*", "./icons"],
      "@components/*": ["./components/*", "./components"],
      "@utils/*": ["./utils/*", "./utils"],
      "@gql/*": ["./gql/*", "./gql"]
    }
  }
}`

nir-c2c commented 3 years ago

@risenforces I should also mention that the project works fine if it is js (which is what we had so far), but I want to move it to typescript, and that is where it is stop working

kizuner-bonely commented 3 years ago

@risenforces I should also mention that the project works fine if it is js (which is what we had so far), but I want to move it to typescript, and that is where it is stop working

I have the same issue here. It works in JS but not in TS.

risen228 commented 3 years ago

@nir-c2c @WeCheung I will make demo project, give me a few hours.

alundiak commented 3 years ago

Strange it or not, but I'm struggling with this issue a few months for my work-related project (so I may not share some parts of code due to NDA). I mean it doesn't break my regular builds, but as perfectionist I would like to avoid that annoying warning compilerOptions.paths must not be set (aliased imports are not supported). And I also don't like that CRA override JSON files.

Anyhow. I have CRA-based react app, using craco and craco-alias. My setup seems to be very similar as described here in issue. I searched a few resources, and stuck on this from 2019: https://github.com/timarney/react-app-rewired/issues/375#issuecomment-474806096 as it looks most descriptive about issue. I tried also tsconfig-paths-webpack-plugin extending Craco - didn't help (seemed to be not even taken into consideration).

Looks like @risenforces knows something more in this topic :)

PS.

My tsconfig.json

{

  "extends": "./tsconfig.paths.json",  // ATTENTION 
  // this line was in my initial JSON file, then I removed it and warning disappeared. BUT !!!

  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "jsx": "react",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "noImplicitAny": true,
    "noUnusedLocals": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "inlineSourceMap": true,
    "inlineSources": true,
    "checkJs": false,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "include": [
    "src"
  ]
}

My tsconfig.paths.json

{
  "compilerOptions": {
    "traceResolution": false,
    "baseUrl": "./src",
    "paths": {
      "@assets/*": [
        "./assets/*"
      ],
      "@styles/*": [
        "./styles/*"
      ],
      "@modules/*": [
        "./modules/*"
      ],
      "@app/config": [
        "./app-config.ts"
      ],
      "@routing/*": [
        "./routing/*"
      ]
    }
  }
}

I received this setup from previous Development team, and looking to why baseUrl is set twice to ./src I'm interesting if this not an issue here. Yes, I really have src folder, but still wondering.

Then I looked to my craco.config.js, and I realized, that craco-alias does already handle aliasing:

const CracoAlias = require("craco-alias");
const { ESLINT_MODES } = require("@craco/craco");

module.exports = {
    eslint: {
        mode: ESLINT_MODES.extends,
        configure: require('./.eslintrc.js')
    },
    jest: {
        configure: require('./jest.config.js')
    },
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: "tsconfig",
                baseUrl: "./src",
                tsConfigPath: "./tsconfig.paths.json",
                // debug: true
            }
        }
    ]
};

So, I removed line "extends": "./tsconfig.paths.json", from tsconfig.json and warning disappeared. :) :(

I verified it running npm run test, via Git Bash, VSCode (meaning PowerShell, yes Windows), and it WORKS now (no warning).

I also have VSTudio Pro, which turned out looks towards new config badly: But I do not rely on VSTudio much in regards Frontends, so it's rather OK for now.

BUT, back to VSCode or Git Bash - npm start didn't work then:

Meaning, that if I remove line from tsconfig.json running application built in TypeScript doesn't use craco-alias setup. So, @risenforces if you know how to avoid such "toggle" issue (change "here" bad things happen "there" and vice versa.)

TS2307 google results

BTW. Here is my package.json just in case:

{
  "name": "NDA",
  "private": true,
  "homepage": "/",
  "scripts": {
    "start": "craco start", // also tried 'cross-env craco start', didn't do any effect
    "start2": "react-app-rewired start", // my experiments. Didn't help
    "build": "cross-env craco build",
    "build:prod": "cross-env NODE_ENV=production craco build",
    "test": "cross-env NODE_ENV=development CI=true craco test --no-watch",
    "test:update": "cross-env NODE_ENV=development CI=true craco test -u --no-watch",
    "test:coverage": "cross-env NODE_ENV=development CI=true craco test --no-watch --testResultsProcessor=jest-junit --coverage",
    "test:junit": "cross-env NODE_ENV=development CI=true craco test --no-watch --testResultsProcessor=jest-junit",
    "server": "cross-env PORT=3333 NODE_ENV=development node server.js",
    "eject": "craco eject",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/ --max-warnings 0",
    "lint:fix": "npm run lint -- --fix"
  },
  "devDependencies": {
    "@types/classnames": "2.2.9",
    "@types/cleave.js": "1.4.1",
    "@types/date-fns": "2.6.0",
    "@types/enzyme": "3.10.5",
    "@types/express": "4.17.1",
    "@types/file-saver": "2.0.1",
    "@types/fs-extra": "8.0.0",
    "@types/graphql": "14.5.0",
    "@types/history": "4.7.3",
    "@types/jest": "25.1.2",
    "@types/jsdom": "12.2.4",
    "@types/jwt-decode": "2.2.1",
    "@types/lodash.clonedeep": "4.5.6",
    "@types/lodash.get": "4.4.6",
    "@types/lodash.isequal": "4.5.5",
    "@types/lodash.isobject": "3.0.6",
    "@types/lodash.transform": "4.6.6",
    "@types/luxon": "1.15.2",
    "@types/query-string": "6.3.0",
    "@types/react": "16.9.3",
    "@types/react-datepicker": "2.9.4",
    "@types/react-dom": "16.9.1",
    "@types/react-foundation": "0.9.6",
    "@types/react-router": "5.1.1",
    "@types/react-router-dom": "5.1.0",
    "@types/react-select": "3.0.4",
    "@types/react-textarea-autosize": "4.3.5",
    "@types/react-tooltip": "3.11.0",
    "@types/shortid": "0.0.29",
    "@types/validator": "10.11.3",
    "@types/webpack": "4.39.2",
    "@typescript-eslint/eslint-plugin": "^2.34.0",
    "@typescript-eslint/parser": "^2.34.0",
    "craco-alias": "2.1.0",
    "cross-env": "6.0.0",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "enzyme-to-json": "3.4.4",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-typescript": "^7.2.1",
    "eslint-config-prettier": "^6.10.1",
    "eslint-import-resolver-typescript": "^2.0.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-json": "^2.1.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^3.0.0",
    "jest-junit": "^11.0.1",
    "node-sass": "^4.14.1",
    "prettier": "^1.19.1",
    "react-app-rewire-alias": "^0.1.6", // experiments
    "react-app-rewired": "^2.1.6", // experiments
    "react-scripts": "^3.4.1", // upgraded to latest version, but no effect
    "ts-jest": "^25.5.1",
    "tsconfig-paths-webpack-plugin": "^3.2.0", // experiments
    "typescript": "^3.9.6"
  },
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@types/react-tooltip": "3.11.0",
    "apollo-cache-inmemory": "1.6.3",
    "apollo-client": "2.6.4",
    "apollo-link": "1.2.13",
    "apollo-link-error": "1.1.12",
    "apollo-link-http": "1.5.16",
    "apollo-link-retry": "2.2.15",
    "axios": "0.19.2",
    "axios-auth-refresh": "2.2.1",
    "axios-retry": "3.1.2",
    "classnames": "2.2.6",
    "cleave.js": "1.5.3",
    "create-react-app": "^3.4.1",
    "custom-event-polyfill": "1.0.7",
    "date-fns": "2.4.1",
    "date-fns-tz": "1.0.8",
    "express": "4.17.1",
    "fetch-ie8": "1.5.0",
    "file-saver": "2.0.2",
    "foundation-sites": "6.5.3",
    "fs-extra": "8.1.0",
    "graphql": "14.5.8",
    "graphql-tag": "2.10.1",
    "history": "4.10.1",
    "jsdom": "15.1.1",
    "jwt-decode": "2.2.0",
    "lodash": "^4.17.19",
    "lodash.clonedeep": "4.5.0",
    "lodash.get": "4.4.2",
    "lodash.isequal": "4.5.0",
    "lodash.isobject": "3.0.2",
    "lodash.transform": "4.6.0",
    "luxon": "1.19.3",
    "moment": "2.24.0",
    "query-string": "6.8.3",
    "react": "16.10.1",
    "react-apollo": "3.1.1",
    "react-apollo-hooks": "0.5.0",
    "react-async-hook": "3.6.1",
    "react-circular-progressbar": "^2.0.3",
    "react-datepicker": "2.10.0",
    "react-dom": "16.10.1",
    "react-foundation": "0.9.6",
    "react-hot-loader": "4.12.14",
    "react-router": "5.1.1",
    "react-router-dom": "5.1.1",
    "react-select": "3.0.5",
    "react-test-renderer": "16.12.0",
    "react-textarea-autosize": "7.1.2",
    "react-toastify": "5.4.0",
    "react-tooltip": "^4.2.7",
    "replace-json-property": "1.4.3",
    "shortid": "2.2.15",
    "url-search-params-polyfill": "7.0.0",
    "validator": "11.1.0",
    "xlsx": "0.15.1"
  },
  "optionalDependencies": {
    "newrelic": "^6.11.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest-junit": {
    "outputName": "jest.xml"
  }
}

In craco-alias debug mode (with or without extends line in tsconfig.json, I have 99% same output (meaning, that using extends I have visible warning in CLI, and with no extends no warning in CLI):


> asset-reunification@ test C:\Users\lundiaa\source\repos\NDA\src\NDA-Frontend
> cross-env NODE_ENV=development CI=true craco test --no-watch

Initial options:

{
  "source": "tsconfig",
  "baseUrl": "./src",
  "tsConfigPath": "./tsconfig.paths.json",
  "debug": true
}

Normalized options:

{
  "source": "tsconfig",
  "baseUrl": "./src",
  "tsConfigPath": "./tsconfig.paths.json",
  "debug": true
}

Aliases:

{
  "@assets": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\assets",
  "@styles": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\styles",
  "@modules": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\modules",
  "@app/config": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\app-config.ts",
  "@routing": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\routing"
}

Jest Config:

{
  "^react-native$": "react-native-web",
  "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
  "^@assets$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\assets",
  "^@assets/(.*)$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\assets/$1",
  "^@styles$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\styles",
  "^@styles/(.*)$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\styles/$1",
  "^@modules$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\modules",
  "^@modules/(.*)$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\modules/$1",
  "^@app/config$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\app-config.ts",
  "^@routing$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\routing",
  "^@routing/(.*)$": "C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\routing/$1"
}

Note:

I don't have/use React Native. It's CracoAlias/jest config does so.
C:\\Users\\lundiaa\\source\\repos\\NDA\\src\\NDA-Frontend\\src\\modules means, that I have huge folder NDA with many C#/.NET solutions, and they are located in C:\\Users\\lundiaa\\source\\repos\\NDA\\src and React code located in NDA-Frontend\\src\\ . My point is, that it looks like I have 2 src folders which might be an issue, but it's not. It's simply such folders structure, and node_modules, meaning typescript, tslint located in only one folder downside hierarchy. Thou, VSTudio Pro doe shave built-in TypeScript so it may parse my Frontend code a bit differently (that is why I mentioned I ignore VSTudio errors for now in most cases).

Related somehow issues/PRs from GitHub:

risen228 commented 3 years ago

@nir-c2c @alundiak @WeCheung the solution is:

// tsconfig.extend.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@root": ["./"],
      "@root/*": ["./*"],
      "@lib": ["./lib"],
      "@lib/*": ["./lib/*"],
      "@baz": ["./baz.ts"],
      "@boo": ["./boo.tsx"]
    }
  }
}

The problem was that the TS did not resolve the directory index (@lib for example), but resolved any nested modules. By specifying both cases in tsconfig.extend.json, everything works just fine.

Working example: https://github.com/risenforces/craco-alias-ts-demo

alundiak commented 3 years ago

@risenforces in my case, I added changes as u suggested, but it doesn't help. Meaning, that I still have warning:


> NDA@ test C:\Users\lundiaa\source\repos\NDA\src\NDA-Frontend
> cross-env NODE_ENV=development CI=true craco test --no-watch

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

Besides, if I clear tsconfig.json.compilerOprions = {}, then after npm start meaning craco re-start, json file again populated with default code.

> NDA@ test C:\Users\lundiaa\source\repos\NDA\src\NDA-Frontend
> cross-env NODE_ENV=development CI=true craco test --no-watch

Your tsconfig.json has been populated with default values.

And now it's 100% as u have: https://github.com/risenforces/craco-alias-ts-demo/blob/master/tsconfig.json

Here is how my "extend" looks:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@assets": [        "./assets"      ],
      "@assets/*": [        "./assets/*"      ],

      "@styles": [        "./styles"      ],
      "@styles/*": [        "./styles/*"      ],

      "@modules": [        "./modules"      ],
      "@modules/*": [        "./modules/*"      ],

      "@routing": [        "./routing"      ],
      "@routing/*": [        "./routing/*"      ],

      "@app/config": [        "./app-config.ts"      ]
    }
  }
}

Ideas?

PS

node --version
v12.16.3

npm --version
6.14.4

"craco-alias": "2.1.0", But I also tried 2.1.1.

risen228 commented 3 years ago

@alundiak Is it just a warning? Do imports work?

alundiak commented 3 years ago

@risenforces Yes, sure, as I mentioned before. My React/TS application code builds OK, and I'm 99% OK, but 1% my perfectionism tells me - get rid of warning :(

risen228 commented 3 years ago

@alundiak I don't think there is a way to remove the warning. CRA writes it, but in fact it does nothing.

nir-c2c commented 3 years ago

@risenforces, Thank you so much for your detail help and putting the example together. I made sure to follow your example and even downgraded my typscript to the version you had in the example but with no luck. It still doesn't recognize the directories. I have downloaded your example your example works just fine, so i'm not sure what is wrong with my setup and why it doesn't like it.

dukecheng commented 3 years ago

@nir-c2c @alundiak @WeCheung the solution is:
// tsconfig.extend.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@root": ["./"],
      "@root/*": ["./*"],
      "@lib": ["./lib"],
      "@lib/*": ["./lib/*"],
      "@baz": ["./baz.ts"],
      "@boo": ["./boo.tsx"]
    }
  }
}
The problem was that the TS did not resolve the directory index (@lib for example), but resolved any nested modules. By specifying both cases in tsconfig.extend.json, everything works just fine.

Working example: https://github.com/risenforces/craco-alias-ts-demo

Hi @risenforces

base on your example: https://github.com/risenforces/craco-alias-ts-demo , I have upgrade react-scripts(only this, other package no change) packages to 4.0.0, it show follow errors, and then I downgrade to 3.4.3 version, it works, looks 4.0.0 react-scripts have some internal change, Can you help on this, Thanks.

`yarn run v1.22.4 $ craco start craco: Cannot find ESLint loader (eslint-loader). D:\gitrepos\craco-alias-ts-demo\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:231 appTsConfig.compilerOptions[option] = suggested; ^

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible at verifyTypeScriptSetup (D:\gitrepos\craco-alias-ts-demo\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:231:45) at Object. (D:\gitrepos\craco-alias-ts-demo\node_modules\react-scripts\scripts\start.js:31:1) at Module._compile (internal/modules/cjs/loader.js:1137:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10) at Module.load (internal/modules/cjs/loader.js:985:32) at Function.Module._load (internal/modules/cjs/loader.js:878:14) at Module.require (internal/modules/cjs/loader.js:1025:19) at require (internal/modules/cjs/helpers.js:72:18) at start (D:\gitrepos\craco-alias-ts-demo\node_modules\@craco\craco\lib\cra.js:202:5) at Object. (D:\gitrepos\craco-alias-ts-demo\node_modules\@craco\craco\scripts\start.js:27:1) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

risen228 / craco-alias