tsconfig failing at using path , keeps adding node modules in react-CodePudding

I got a small project, and I would like to be able to configure path for src so that I dont have to import things really deeply, I have seen examples and for some reason my TS config seems to include no_modules even when it is excluded.

It seems to me it is a problem of the base url, or maybe some module missing , but I got no idea what it is, the error is too vague for me to know, the routing honestly seems fine...

{
"compilerOptions": {
  "sourceMap": true,
  "target": "es5",
  "lib": [
    "es6",
    "dom",
    "dom.iterable",
    "esnext"
  ],
  "baseUrl": "src",
  "paths": {
    "@/*": [
      "./*"
    ]
  },
  "allowJs": true,
  "skipLibCheck": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "strict": true,
  "forceConsistentCasingInFileNames": true,
  "module": "esnext",
  "moduleResolution": "node",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "suppressImplicitAnyIndexErrors": true,
  "noEmit": true,
  "jsx": "react"
},
"include": [
  "src"
],
"exclude": [
  "node_modules",
  "**/node_modules/*"
]

}

This is my TS Config...

  {
  "name": "bootstrap-webpack-5-typescript-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
  "scripts": {
    "start": "webpack serve",
    "watch": "webpack --watch",
    "build": "NODE_ENV=production webpack",
    "build-dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "@types/react-router-dom": "^5.3.1",
    "babel-loader": "^8.2.3",
    "babel-plugin-styled-components": "^1.13.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.4.0",
    "html-webpack-plugin": "^5.4.0",
    "mini-css-extract-plugin": "^2.4.2",
    "postcss": "^8.3.11",
    "postcss-loader": "^6.2.0",
    "postcss-preset-env": "^6.7.0",
    "redux-devtools-extension": "^2.13.9",
    "sass": "^1.43.3",
    "sass-loader": "^12.2.0",
    "ts-loader": "^9.2.6",
    "tsconfig-paths": "^3.12.0",
    "typescript": "^4.4.4",
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "@types/jest": "^27.0.2",
    "@types/node": "^16.11.4",
    "@types/react": "^17.0.31",
    "@types/react-dom": "^17.0.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0",
    "style-loader": "^3.3.1",
    "styled-components": "^5.3.3"
  },
  "resolutions": {
    "styled-components": "^5.3.3"
  }
}

Finally my error...

Please notice that I am using Webpack 5

CodePudding user response：

I don't know why you what to put the path resolution in the tsconfig.json file. But, as I can see you are using Webpack; The way to do it with Webpack is with the resolve configuration.

https://webpack.js.org/configuration/resolve/#resolvealias

In your case:

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      '@/': path.resolve(__dirname, 'src/'),
    },
  },
};

CodePudding user response：

In the root directory of your project run the command in the terminal:

npm i node-modules