Use absolute path for .jsx files?

Question

I'm trying to make the import file paths in my react app absolute.

(EDIT: I'm trying to make this:

import fetchAPI from "../../util/api"

to this

import fetchAPI from "util/api"

)

I've seen solutions to this by using the jsconfig.json as such

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

The way I understand it, this only makes the file paths in .js files absolute. Unfortunately the wide majority of the files in the project are .jsx, is there a way to make the file paths in these absolute?

Thanks in advance :)

Did you find a solution for this? I am also wondering how to achieve this. — traderjosh, Jul 15 '20 at 15:23
I was using Gatsby so the plugin: "gatsby-plugin-resolve-src" did it for me in the end :) — NiceRice, Jul 16 '20 at 16:18

score 1 · Answer 1 · answered Jul 15 '20 at 16:31

A workaround is to change the target option to "target": "esnext".

And change the compilerOption to target React or react-native like "jsx": "preserve" or "jsx": "react" or "jsx": "react-native".

{
"compilerOptions": {
    "target": "esnext",
    "jsx": "react",
    "baseUrl": "src"
},
"exclude": [
    "node_modules",
    "**/node_modules/*"
]

}

Use absolute path for .jsx files?

1 Answers1