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:
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
import {merge} from '@/helpers/commonHelper.js'
export {merge}
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'),
},
// ....
})
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?
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.
Please do not use '/src', use '@/' instead
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.