In my React project it seems when I alter these configurations there is no effect. My goal is to add import aliases. I made sure all the paths are correct many times over so I believe that is not the issue.
Attempts included adding
"baseUrl": "./src", "paths": { "@assets/*": ["Assets/*"], "@components/*": ["components/*"] },
to tsconfig.json and restarting the dev server.
I also tried adding
alias: { "@components": path.resolve(__dirname, 'src/components') }
to webpack.config.js under resolve and restarting the dev server.
Finally i tried adding
"plugins": [ ["module-resolver", { "root": ["./src"], "alias": { "@components": "./src/components" } }] ]
to .babelrc and restarting the dev server (tried this with both ./src/components and /components).
I tested them all individually. In a component I have
import Dropdown from '@components/Master/Dropdown';
Which I tried with {Dropdown} and Dropdown and is meant to recognize
export {default as Dropdown} from './Dropdown';
from the index.js file in that folder.
I have the babel-loader in module.rules in the webpack.config.js.
In package.json I believe I have the required dependencies
{ "name": "amplify-pwa", "version": "0.1.0", "private": true, "dependencies": { "@aws-amplify/ui-react": "^4.2.0", "@lexical/react": "^0.6.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "aws-amplify": "^5.0.5", "axios": "^1.2.1", "bootstrap": "^5.2.3", "lexical": "^0.6.5", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.4.5", **"react-scripts": "5.0.1",** "web-vitals": "^2.1.4" }, "scripts": { "start": "cross-env GENERATE_SOURCEMAP=false react-scripts start", "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build", **"test": "react-scripts test", "eject": "react-scripts eject",** "lint": "eslint .", "lint:fix": "eslint --fix", "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest", "eslint:recommended", "plugin:jest/recommended" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { **"@babel/core": "^7.20.12", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6",** "@typescript-eslint/eslint-plugin": "^5.48.1", "@typescript-eslint/parser": "^5.46.1", "@webpack-cli/generators": "^3.0.1", "babel-plugin-module-resolver": "^5.0.0", "cross-env": "^7.0.3", "eslint": "^8.32.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-google": "^0.14.0", "eslint-config-standard-with-typescript": "^26.0.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-n": "^15.6.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.32.1", "eslint-plugin-react-hooks": "^4.6.0", **"typescript": "^4.9.4",** "webpack": "^5.75.0", "webpack-cli": "^5.0.1" } }
What can I do next to debug this issue? VSCode recognizes the alias from tsconfig but it doesnt work when the dev server starts.