#Problem setting up custom import aliases

4 messages · Page 1 of 1 (latest)

wraith token
#

Hi guys. I am trying to set up custom import aliases for my React App. My app's folder structure looks like how it is in the image attached. I created a jsconfig.json file which contains the following:

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "@components/*": ["./appv2/components/*"],
            "@pages/*": ["./appv2/pages/*"],
            "@assets/*": ["./appv2/assets/*"]
        }
    },
    "include": ["src"]
}

And now, when I go to my App.js I have an import like this:

import AllStations from '@pages/HomeScreen/homeScreen';

But this import does not work and I get this error:

Module not found: Error: Can't resolve '@pages/HomeScreen/homeScreen' in '/Users/xyz/Desktop/MyApps/MyReactAppFolder/src'
ERROR in ./src/App.js 5:0-60

I cannot figure out what I am doing wrong with my jsconfig.json file. Any help would be greatly appreciated.

Screenshot_2024-04-18_at_8.06.02_AM.png
wraith token
#

I have tried this as well:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@components/*": ["src/appv2/components/*"],
            "@pages/*": ["src/appv2/pages/*"],
            "@assets/*": ["src/appv2/assets/*"]
        }
    },
    "include": ["src"]
}

But still the same

tall vector
#

Try adding this to your config

export default defineConfig({
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, '/src') }],
  },

I am assuming you are using Vite 😄