unable to add alias to my project src dir, what is the correct way please?

[videni]

Describe the bug

As you can see, I add the same alias for client and server, but still got Failed to resolve import "~/assets/img/google.svg" from "apps/ui/src/pages/Register.tsx". , any reason please?

Location 1

 vite = await require('vite').createServer({
      root,
      // logLevel: isTest ? 'error' : 'info',
      logLevel:  'error',
      server: {
        middlewareMode: 'ssr',
        watch: {
          // During tests we edit the files too fast and sometimes chokidar
          // misses change events, so enforce polling for consistency
          usePolling: true,
          interval: 100
        }
      },
      resolve: {
        alias: [
          { find: '/^~(?=\/)/', replacement: `${root}/src/` },
        ]
      },
    })

Location 2

import { defineConfig, loadEnv} from 'vite'
import react from '@vitejs/plugin-react'
import { visualizer } from 'rollup-plugin-visualizer'
import { omitBy } from 'lodash'
import tsconfigPaths from 'vite-tsconfig-paths'
import path from 'path'

// https://vitejs.dev/config/
export default ({ mode }) => {
  process.env = {
    ...process.env,
    ...omitBy(loadEnv(mode, process.cwd()), Boolean),
  }

  let root = "./apps/ui";

  return defineConfig({
    plugins: [
      react(), 
      tsconfigPaths({
        root: __dirname
      }), 
      visualizer({ open: true })
    ],
    root,
    build: {
      minify: true
    },
    resolve: {
      alias: [
        { find: '/^~(?=\/)/', replacement: `${path.resolve(__dirname, root, '/src')}/` },
      ]
    }
  })
}

Location 3: tsconfig.json

   "baseUrl": "./apps/ui",
    "paths": {
      "~": [
        "./src"
      ],
    }
  },

Reproduction

None

System Info

None

Used Package Manager

yarn

Logs

None

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[NunoSav]

Did you find out how to fix this?

[Shinigami92]

I assume ~ is a really bad choice, due to it's the default symbol for home directory 🤔

[NunoSav]

in my case i use the common '@/*': 'src/*'

[Shinigami92]

Yes, I also have

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

plus

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

and this works

[NunoSav]

I had something very similar. Just tried with what you posted above and it still throws same error:

[vite]: Rollup failed to resolve import "@/components/DeviceStatusSonic.vue" from "src/views/Device.vue".
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 "@/components/DeviceStatusSonic.vue" from "src/views/Device.vue".
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 (/Users/nur/Desktop/Work/playground/vite-ionic6/node_modules/vite/dist/node/chunks/dep-5496817b.js:43768:19)
    at onwarn (/Users/nur/Desktop/Work/playground/vite-ionic6/node_modules/vite/dist/node/chunks/dep-5496817b.js:43546:13)
    at Object.onwarn (/Users/nur/Desktop/Work/playground/vite-ionic6/node_modules/rollup/dist/shared/rollup.js:22980:13)
    at ModuleLoader.handleResolveId (/Users/nur/Desktop/Work/playground/vite-ionic6/node_modules/rollup/dist/shared/rollup.js:22324:26)
    at /Users/nur/Desktop/Work/playground/vite-ionic6/node_modules/rollup/dist/shared/rollup.js:22296:26
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Maybe i'll dedicate some time on this next week and try to get more details.

[anoop0567]

@NunoSav have you found any fix for this??

[axelthat]

In your jsconfig.json or tsconfig.json,

{
  "compilerOptions": {
    ...,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  ...
}

And then in your vite.config.ts,

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@/": path.join(__dirname, "src/"),
    },
  },
})

Notice I am using path.join not path.resolve.

[Zukhrik]

In your jsconfig.json or tsconfig.json,

{
  "compilerOptions": {
    ...,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  ...
}

And then in your vite.config.ts,

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@/": path.join(__dirname, "src/"),
    },
  },
})

Notice I am using path.join not path.resolve.

@axelthat hi. What is difference betweenpath.join and path.resolve?