CODEWITHSUNDEEP
reactjstsconfigreact-scripts
Philipp Chapkovski
Philipp Chapkovski

Reputation: 2069

react jsconfig.json ignores paths

I have the following jsconfig.json in the root of my react app:

{
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
        "rmv": ["components/rmv/*"]
      }
    }
  }

and there is a helper.jsx file located in ./src/components/rmv folder.

But my attempts to export it directly like that: import Helper from 'rmv/helper' fail with an error:

Failed to compile
Module not found: Can't resolve 'rmv/helper'

Only import Helper from 'components/rmv/helper' works. Why? PS: I also tried:

"paths": {
        "rmv/*": ["components/rmv/*"]
      }

Does not work either.

Here is the minimum reproducible example: github.com/chapkovski/trouble_with_jsconfig

Specifically these lines: https://github.com/chapkovski/trouble_with_jsconfig/blob/e37c8c216eac0da7c70023f7fba47eea54973176/src/App.js#L4-L5

Upvotes: 5

Views: 22277

Answers (3)

Michael Landis
Michael Landis

Reputation: 1214

Paths are currently unavailable in apps made with create-react-app:

https://github.com/facebook/create-react-app/issues/5645

You may want to consider using rescripts to let you modify your configuration in CRA 2+ apps.

Upvotes: 16

DiTaBa
DiTaBa

Reputation: 44

[Eject CRA] You could use webpack alias as alternative solution for the use case.

In webpack.config.js

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

Now, you could import Helper component as bellow:

import Helper from 'rmv/helper';

Upvotes: 0

Rob Brander
Rob Brander

Reputation: 3781

The paths need to be relative to the baseUrl. Your baseUrl has a value of ./src which is good. However, your paths listed in the array for rmv/* are NOT relative paths, as they don't start with a relative location (./ or ../).

I would encourage you to try prefixing ./ onto your paths.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "rmv/*": ["./components/rmv/*"]
    }
  }
}

I found this documentation on the subject: Using webpack aliases

Upvotes: 2

Related Questions