CODEWITHSUNDEEP
reactjsvisual-studio-2019
fra
fra

Reputation: 83

React cant resolve absolute path in VS2019 with a jsconfig.json file

I have created a Asp.net core React project using the build in template in visual studio 2019

enter image description here

The project created a separated folder called ClientApp where the React project live. I have done npm init.

I have added a jsconfig.json file at the root of the folder ClientApp as follow.

Folders

enter image description here

jsconfig.json

enter image description here

When I try to import a component using the absolute paths defined in jsconfig, the compiler does not find the path.

enter image description here

and generate the error

Error

I tried to remove the "./" starting the path from "./src/components/" to "src/components/" like below

enter image description here

But the error is still there

Error

UPDATE

based on this thread https://dev.to/larswaechter/path-aliases-with-typescript-in-nodejs-4353 , when configuring alias in jsconfig.json file, then you can use the new path aliases for module imports in your application. There occur any errors in your IDE or when you compile the code.

However, When you try compile the TS code into JS you won't see any errors. But as soon as you run your compiled JS code you will get an error:

For example: Error: Cannot find module '@modules/user' That's because JS can't resolve the modules for the declared path aliases... Based on the article it can be solved by installing a npm package called module-alias.

Upvotes: 1

Views: 3329

Answers (1)

wisnuaryadipa
wisnuaryadipa

Reputation: 760

Which you have been set baseUrl with . you don't need add ./ in paths property

"baseUrl": ".",
"paths": {
   "@Components/*": [ "src/components/*" ]
}

Upvotes: 0

Related Questions