CODEWITHSUNDEEP
javascriptreactjstypescriptvite
Abenezer Seyoum
Abenezer Seyoum

Reputation: 62

Absolute import is not working in React Vite js

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"]
  }

Upvotes: 2

Views: 5510

Answers (1)

Maged Faiz
Maged Faiz

Reputation: 87

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.

Upvotes: 3

Related Questions