Closed abbasegbeyemi closed 3 years ago
I have come back here because it is just good etiquette to provide feedback when a solution is found. It turns out that react scripts 4.0.0 does not support craco alias as at the time of writing.
I downgraded react scripts to 3.4.3, and it works now.
This is what my package.json looks like now.
{
"name": "aster-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^5.8.0",
"@reduxjs/toolkit": "^1.4.0",
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"@theme-ui/color": "^0.3.3",
"@types/jest": "^26.0.15",
"@types/node": "^14.14.7",
"@types/react": "^16.9.56",
"@types/react-dom": "^16.9.9",
"@types/react-redux": "^7.1.11",
"@types/theme-ui": "^0.3.7",
"@types/yup": "^0.29.9",
"@visx/text": "^1.1.0",
"axios": "^0.21.0",
"formik": "^2.2.5",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"theme-ui": "^0.3.3",
"typescript": "4.0.5",
"web-vitals": "^0.2.4",
"yup": "^0.29.3"
},
"scripts": {
"start": "craco start --verbose",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.7.0",
"@typescript-eslint/parser": "^4.7.0",
"craco-alias": "^2.1.1",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"prettier": "^2.1.2"
}
}
craco.config.js
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
baseUrl: "./src",
tsConfigPath: "./tsconfig.paths.json",
},
},
],
};
tsconfig.json
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "es6",
"skipDefaultLibCheck": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
],
"exclude": [
"./node_modules",
"./node_modules/*",
"./node_modules/@types/node/index.d.ts",
"./node_modules/@theme-ui/core/dist/index.d.ts"
]
}
tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@root": [
"./"
],
"@root/*": [
"./*"
]
}
}
}
All the credit goes to @risenforces with the demo he provided here
Thank you.
I don't understand why issues relating to this were closed. But I am facing the same error.
package.json
tsconfig.paths.json
tsconfig.json
craco.config.json
I have followed the instruction to a T, I still get the error from react scripts. Please what am I missing?