ViteJS aliased imports are not resolving

Viewed 660

*Converting a large monorepo ejected react app to vitejs, at least i am attempting to do so. However we use several aliased imports throughout the current app and i would like to leave that functionality there. We are currently using webpack.

ts.config file

  {
  "compilerOptions": {
    "target": "esnext",
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"],
      "@src/*": ["src/*"],
      "@status/*": ["src/packages/status/*"],
      "@cli/*": ["src/packages/cli/*"],
    }
  },
  "include": [
    "./declarations.d.ts",
    "src",
  ],
}

vite.config file:


    import react from '@vitejs/plugin-react';
    import legacy from '@vitejs/plugin-legacy'
    import path from 'path';
    import { defineConfig } from 'vite';
    
    export default defineConfig({
      root: 'src',
      publicDir: './src/assets',
      plugins: [
        react({
          // Use React plugin in all *.jsx and *.tsx files
          include: '**/*.{jsx,tsx}',
          babel: {
            configFile: true,
          },
        }),
        legacy({
          targets: ['defaults', 'not IE 11']
        })
      ],
      resolve: {
        alias: {
          '@src': path.resolve(__dirname, './src'),
          '@status': path.resolve(__dirname, './src/packages/status'),
          '@cli': path.resolve(__dirname, './src/packages/cli')
        },
    
      },
      build: {
        outDir: 'build',
      },
      css: {
        preprocessorOptions: {
          scss: {
            quietDeps: true,
            javascriptEnabled: true,
          },
          sass: {
            quietDeps: true,
            javascriptEnabled: true,
          },
        },
      },
    });

Project structure is as follows:

 package.json
   vite.config
   ts.config
   src/
      packages/
      pages/
      index.html
      app/
         app.tsx

The specific error i am seeing in the console when i run vite serve src is

6:33:25 PM [vite] Internal server error: Failed to resolve import "@cli/constants/ReviewText" from "src/packages/cli/pages/review/Review.tsx". Does the file exist?

Have scoured the interned and tried pretty much every variation of declaring the aliases in the vite.config and ts.config files. What is weird is that it seems that the ts compiler is at least recognizing the aliased path as it shows me it the full path when hovering over import statements, so i believe my problem is with the vite.config aliasing...

0 Answers
Related