Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – jsconfig.json issues with path

I am trying to set up aliases for my react CRA project. I had this in my jsconfig.json

"compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    "baseUrl": "src",
    "paths": {
      "*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

It works but I can’t use Ctrl + Click to go to definition. I changed it to:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist", ".git"]
}

Now I can use Ctrl + Click but on compilation I get a lot of errors that the paths can’t be resolved. Can anyone help?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Did it like this. Now everything works. Basically, just added @ symbol. Would like to know what happened though.

    {
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    "baseUrl": "src",
    "paths": {
      "@*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

  2. 0

    When you used "*": ["src/*"], it matched all paths, essentially overriding any existing module resolution (e.g., node_modules, third-party libraries). This can cause issues because CRA expects certain paths (like those in node_modules) to be resolved through the default mechanism. After you changed the alias to @* and mapped it to "src/*", you scoped the alias to paths prefixed with @. This prevents conflicts with the default module resolution and allows CRA to continue resolving paths normally for libraries and other files that aren’t part of your alias.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search