Closed axetroy closed 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
@nir-c2c Can you provide debug information? (debug: true
in options)
@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
@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 heresrc
directory in their starting boilerplate. So maybe you accidentally left ./src
in tsconfig.extend.json
or somewhere else./*
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
?
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
@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)
@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"]
}
}
}`
@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
@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.
@nir-c2c @WeCheung I will make demo project, give me a few hours.
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.)
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:
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:
@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
@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.
@alundiak Is it just a warning? Do imports work?
@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 :(
@alundiak I don't think there is a way to remove the warning. CRA writes it, but in fact it does nothing.
@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.
@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 intsconfig.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.
Hi.
I have followed the step to use in
README.md
tsconfig.extend.json
tsconfig.json
craco.config.js
information of DEBUG
here is the information when
debug=true
Useage
tsconfig.json
should be right here. The editor can recognize correctly. But craco doesn'tany helps are welcome. thanks for your all ❤️