[vite] Internal server error: Failed to resolve import "@/X" from X

[michealroberts]

I've recently upgraded a project to Sue 2.7.*, and I am now going through a process of upgrading this repo using the example setup in the examples of this repo.

However, I am running into a path alias issue:

[vite] Internal server error: Failed to resolve import "@/store/modules/system/settings" from "src/main.ts". Does the file exist?

My vite.config.ts is as follows:

import vue from '@vitejs/plugin-vue2';
import path from 'path';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // ...
        },
        transformAssetUrls: {
          // ...
        },
      },
    }),
  ],
  build: {
    outDir: './dist/client',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

main.ts is inside src, as are all of the other sub-directories.

index.html is in the level above, at the root of the app alongside the vite.config.ts file.

And my tsconfig.json is as follows:

{
  "extends": "@my-monorepo/tsconfig/base.json",
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "lib": ["dom", "esnext"],
    "paths": {
      "@/*": ["./src/*"],
      "dayjs/plugin/duration": ["./classes/time/dayjs-plugins/duration-shim.d.ts"],
      "plotly.js-strict-dist-min": ["../node_modules/@types/plotly.js"]
    },
    "types": ["vitest/globals"],
    "allowUnreachableCode": true,
    "incremental": true,
    "importHelpers": true,
    "noImplicitReturns": false,
    "noUncheckedIndexedAccess": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false
  },
  "vueCompilerOptions": {
    "target": 2.7
  },
  "include": ["**/*.ts", "**/*.d.ts", "**/*.tsx", "**/*.vue"]
}

I also have the following Vite server that serves the app as an express middleware:

const vite = await createViteServer({
    server: {
      middlewareMode: true,
      hmr: {
        port: HMR_PORT,
        clientPort: HOST_HMR_PORT,
      },
    },
    clearScreen: false,
});

I'm wondering, what have I done wrong here?

The full error for context is here:

Logging

Running Vite build --debug yields the following:

[vite]: Rollup failed to resolve import "@/store/modules/system/settings" from "src/main.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "@/store/modules/system/settings" from "src/main.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (file:///workspace/node_modules/.pnpm/vite@3.1.6_sass@1.54.9/node_modules/vite/dist/node/chunks/dep-db16f19c.js:45916:19)
    at onwarn (file:///workspace/node_modules/.pnpm/vite@3.1.6_sass@1.54.9/node_modules/vite/dist/node/chunks/dep-db16f19c.js:45714:13)
    at Object.onwarn (file:///workspace/node_modules/.pnpm/rollup@2.78.1/node_modules/rollup/dist/es/shared/rollup.js:23225:13)
    at ModuleLoader.handleResolveId (file:///workspace/node_modules/.pnpm/rollup@2.78.1/node_modules/rollup/dist/es/shared/rollup.js:22352:26)
    at file:///workspace/node_modules/.pnpm/rollup@2.78.1/node_modules/rollup/dist/es/shared/rollup.js:22313:26
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
 ELIFECYCLE  Command failed with exit code 1.

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 89.70 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 98.0.2
    Firefox Developer Edition: 99.0
    Safari: 15.4

[y-a-ava]

try adding it like that: { find: '@', replacement: path.resolve(__dirname, './src') },

[michealroberts]

@y-a-ava Thank you, although that may work - and I will try it - the method I've applied is standard and doesn't seem to work out of the box. I still believe it to be a bug with using this plugin with Vite 3.

[michealroberts]

@y-a-ava I can also confirm that the above gives the same error result.

[y-a-ava]

i am also using vue 2.7 with vite 3, and i dont have this error. vite: 3.1.0 vue: 2.7.10

[zouhangwithsweet]

change your config like this

alias: {
  '@/': `${path.resolve(__dirname, 'src')}/`,
},