Absolute import is not working in React Vite js

Question

vite config failed to import from src folder message: Failed to resolve import "redux/1space/letter/inboxSlice" from "src/pages/letter/index.jsx". Does the file exist? /

import { loadInboxs } from "redux/1space/letter/inboxSlice";

my vite configuration :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import jsconfigPaths from 'vite-jsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), jsconfigPaths(), svgrPlugin()],
  build: {
    outDir: 'build',
  },
  server: {
    open: true,
    port: 3000
  },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
  esbuild: {
    loader: "jsx",
    include: /.\/src\/.*\.js?$/,
    exclude: [],
    jsx: "automatic",
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  }, 
})

js config

{
    "compilerOptions": {
        "baseUrl": "src",
        "target": "ESNext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "types": ["vite/client", "vite-plugin-svgr/client"],
    },
    "include": ["src","src/.js"]
  }

and I want to exclude '@' aliases

Abenezer Seyoum
– Abenezer Seyoum

2022-12-05 10:02:50 +00:00
Commented Dec 5, 2022 at 10:02 — Abenezer Seyoum
– Abenezer Seyoum, Commented Dec 5, 2022 at 10:02

Maged Faiz · Accepted Answer · 2023-01-31 15:44:43Z

3

You can achieve this by adding these rules in your vite config:

export default defineConfig({
...
  resolve: {
    alias: [
      { find: '@assets', replacement: '/src/assets' },
      { find: '@components', replacement: '/src/components' },
      { find: '@pages', replacement: '/src/pages' },
    ],
  },
...
});

Then when you want to import a file just use the alias you specified.

import Navbar from '@components/navbar/Navbar';
import Home from '@pages/home/Home';
import Menu from '@pages/menu/Menu';

No need for a js config file.

answered Jan 31, 2023 at 15:44

Maged Faiz

879 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mr.loop Over a year ago

I think this is the best way when using vite react with ts.

Collectives™ on Stack Overflow

Absolute import is not working in React Vite js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related