Absolute path with Vitejs React TS template

Question

when defining absolute paths in the 'vite.config.ts' file, Vite doesn't read the path and gives me an error in the console

// vite.config.ts

// Librarys
import { resolve } from 'path'
import { defineConfig } from 'vite'
import reactPlugin from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [reactPlugin()],
  server: {
    port: 3000,
    cors: true
  },
  resolve: {
    alias: {
      '@assets': resolve(__dirname, 'src/assets'),
      '@components': resolve(__dirname, 'src/components'),
      '@config': resolve(__dirname, 'src/config'),
      '@containers': resolve(__dirname, 'src/containers/_exports'),
      '@containers/*': resolve(__dirname, 'src/containers/*'),
      '@hooks': resolve(__dirname, 'src/hooks'),
      '@layouts': resolve(__dirname, 'src/layouts'),
      '@redux': resolve(__dirname, 'src/redux'),
      '@routes': resolve(__dirname, 'src/routes'),
      '@services': resolve(__dirname, 'src/services'),
      '@styles': resolve(__dirname, 'src/styles'),
      '@utils': resolve(__dirname, 'src/utils')
    }
  }
})

I define a route '@containers' and another similar '@containers/*'. The purpose of this is that when importing the 'containers', you can do it in the following ways

// import { MainContainer } from '@containers'
// import MainContainer from '@containers/MainContainer'

export default function App() {
  return (
    
      Hello world
    
  )
}

The architecture of the project is like the image below

The '_exports' file takes care of importing all the 'containers' and exporting them from an object. And since I'm using typescript, I leave the file where I define the absolute paths:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@assets/*": ["assets/*"],
      "@config/*": ["config/*"],
      "@components/*": ["components/*"],
      "@components": ["components/_exports"],
      "@containers/*": ["containers/*"],
      "@containers": ["containers/_exports"],
      "@hooks/*": ["hooks/*"],
      "@hooks": ["hooks/_exports"],
      "@layouts/*": ["layouts/*"],
      "@layouts": ["layouts/_exports"],
      "@redux/*": ["redux/*"],
      "@routes/*": ["routes/*"],
      "@services/*": ["services/*"],
      "@styles/*": ["styles/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

I don't need to rename '_exports' to index, so that wouldn't be a solution. Does anyone have an idea, how Vitejs can resolve the route in those 2 ways

Absolute path with Vitejs React TS template

0 Answers