0

I have been using create-react-app for a long time, and decided to try out vite.

In webpack, instead of importing a file as follows:

import Appbar from '../../../../../../../../../../components/Appbar'

I can directly import it as:

import Appbar from 'components/Appbar'

the way I used to do it is by making a file in the project root directory called jsconfig.json, and I write the following:

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

This makes webpack think that the root directory is the src directory.

How to make the same thing with vite? vite uses roll-up, but I couldn't find a question as mine, so I decided to ask a new one.

Normal
  • 1,616
  • 15
  • 39
  • you can ref at here i think usefull for you https://stackoverflow.com/questions/68241263/absolute-path-not-working-in-vite-project-react-ts/68250175#68250175 – SƠN HOÀNG ĐÌNH Jul 07 '23 at 04:17

2 Answers2

0

If i understood your question correctly, you might want to try out import.meta.ROOT_DIR, this contains the root directory of your project.

For example: You have a module.js located in the src folder and you want to import it from a file in another folder, you can write:

import moduleName from 'import.meta.ROOT_DIR/src/module.js'

zAlMo
  • 1
  • 3
  • First time I read this, but I wanted the absolute path method, and it looks like vite doesn't support it without aliases – Normal Dec 12 '22 at 11:28
0

Vite now supports absolute imports (sorta). With the vite-tsconfig-paths plugin, you can use absolute imports similar to create-react-app. Refer to this answer: https://stackoverflow.com/a/68250175/10032950

FrankenCode
  • 307
  • 1
  • 5
  • 12