ViteJS 别名导入没有解析

Question

*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...

Answer 1

I also came across this issue and I found a solution. It turns out Vite makes use of absolute paths when resolving modules and Vite also treats "src/*" as a package in node_modules and this is what causes this import resolution issues.

To fix it, What I did was make this change to my tsconfig.json

    // tsconfig.json
    "baseUrl": ".",
        "paths": {
            "/src/*": ["src/*"]
        }

Now I can import any module I want as below

// App.tsx
import { Home } from "/src/pages/Home";

The key here is to prefix all your paths with a / . In your case it would be

   "paths": {
      "/src/*": ["src/*"],
      "/@src/*": ["src/*"],
      "/@status/*": ["src/packages/status/*"],
      "/@cli/*": ["src/packages/cli/*"],
    }