Vite+Vue - 通过 npm 链接引用的 Package 无法解析 vite.resolve.alias

Question

I'm developing a package to help other developers here in our company.

I know that I can create aliases to make the code more cleaner and help the readability of it.

So:

PACKAGE PROJECT

vite.config.js

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    
  resolve:{
        preserveSymlinks: false,
        alias:{
            '@' : path.resolve(__dirname, 'src'),

  },
// ....
})

Assume that I've the following folder structure

• src
  • helpers
    • commonHelper.js
  • index.js

src/index.js

import {merge} from '@/helpers/commonHelper.js'
export {merge}

PROJECT THAT REFERENCES PACKAGE PROJECT

vite.config.js

It alsos have a vite.config.js with an @ alias pointing to it self src

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    
  resolve:{
        preserveSymlinks: false,
        alias:{
            '@' : path.resolve(__dirname, 'src'),

  },
// ....
})

anyfile.js

Lets assume that my package project is called foo and it's referenced using npm link for testing now, after finishing the package it will be referenced using npm install

import {merge} from 'foo'

merge({},{});

When i try to run my project i got the following error

  [vite] Internal server error: Failed to resolve import "@/helpers/commonHelper.js" from 
  "..\..\npmPackages\foo\src\index.js". Does the file exist?       
  Plugin: vite:import-analysis
  File: E:/_Development/foo/src/index.js
  3  |  import {merge} from '@/helpers/commonHelper.js'
     |                       ^
  4  |  export {merge}
      at formatError (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:40853:46)
      at TransformContext.error (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:40849:19)
      at normalizeUrl (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37586:33)
      at async TransformContext.transform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37719:47)
      at async Object.transform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:41102:30)
      at async loadAndTransform (file:///E:/_Development/project/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37364:29)

As far i noticed the problem is happening because @ is pointing to the project that references the foo package

What can i do?

Answer 1

I assume that you're using Vite to build the lib.

In that case using "npm link" or the publishing process, you should point in your package.json of the package using the field "module" to the generated ESM library file instead of the actual source code.

Then you can use the package in your other project same as if it was installed from some package registry.

Answer 2

Please do not use '/src', use '@/' instead