I’m currently having some issues using project A in project B.
From project A’s directory I ran:
<code>npm link
</code>
<code>npm link
</code>
npm link
From project B’s directory I ran:
<code>npm link rc-webcomponents
</code>
<code>npm link rc-webcomponents
</code>
npm link rc-webcomponents
In project B’s main.js I added:
<code>import 'rc-webcomponents'
</code>
<code>import 'rc-webcomponents'
</code>
import 'rc-webcomponents'
but when I run npm run dev
in project B, I end up with the error:
<code>Error: The following dependencies are imported but could not be resolved:
@/polyfill (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/sass/reset.scss (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/plugins/rcwc (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/composables/RcwcObject (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/utils/relativeDate (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/locales (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/composables/customHtmlElement (imported by M:/Dev/RC-WebComponents/src/index.ts)
Are they installed?
at file:///M:/Dev/localtests/my-vue-app3/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:50346:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///M:/Dev/localtests/my-vue-app3/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:49851:26
</code>
<code>Error: The following dependencies are imported but could not be resolved:
@/polyfill (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/sass/reset.scss (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/plugins/rcwc (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/composables/RcwcObject (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/utils/relativeDate (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/locales (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/composables/customHtmlElement (imported by M:/Dev/RC-WebComponents/src/index.ts)
Are they installed?
at file:///M:/Dev/localtests/my-vue-app3/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:50346:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///M:/Dev/localtests/my-vue-app3/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:49851:26
</code>
Error: The following dependencies are imported but could not be resolved:
@/polyfill (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/sass/reset.scss (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/plugins/rcwc (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/composables/RcwcObject (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/utils/relativeDate (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/locales (imported by M:/Dev/RC-WebComponents/src/index.ts)
@/composables/customHtmlElement (imported by M:/Dev/RC-WebComponents/src/index.ts)
Are they installed?
at file:///M:/Dev/localtests/my-vue-app3/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:50346:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///M:/Dev/localtests/my-vue-app3/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:49851:26
Based on my understanding the issue has to do with vite path aliasing.
In my vite.config.mts
I have:
<code>export function defineSharedConfig(cfg:UserConfig): UserConfig {
return defineConfig(
{
resolve: {
...(cfg.resolve || {}),
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
vue: fileURLToPath(new URL("node_modules/@vue/compat", import.meta.url)),
"~rc-webcomponents": fileURLToPath(new URL("./src", import.meta.url)),
"~vue2-datepicker": fileURLToPath(new URL("node_modules/vue2-datepicker", import.meta.url)),
...(cfg.resolve?.alias || {}),
},
},
}
}
</code>
<code>export function defineSharedConfig(cfg:UserConfig): UserConfig {
return defineConfig(
{
resolve: {
...(cfg.resolve || {}),
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
vue: fileURLToPath(new URL("node_modules/@vue/compat", import.meta.url)),
"~rc-webcomponents": fileURLToPath(new URL("./src", import.meta.url)),
"~vue2-datepicker": fileURLToPath(new URL("node_modules/vue2-datepicker", import.meta.url)),
...(cfg.resolve?.alias || {}),
},
},
}
}
</code>
export function defineSharedConfig(cfg:UserConfig): UserConfig {
return defineConfig(
{
resolve: {
...(cfg.resolve || {}),
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
vue: fileURLToPath(new URL("node_modules/@vue/compat", import.meta.url)),
"~rc-webcomponents": fileURLToPath(new URL("./src", import.meta.url)),
"~vue2-datepicker": fileURLToPath(new URL("node_modules/vue2-datepicker", import.meta.url)),
...(cfg.resolve?.alias || {}),
},
},
}
}
but based on the thread: `Vue3 – Vite` project alias src to @ not working
I should try and have it like:
<code>import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: '@assets', replacement: fileURLToPath(new URL('./src/shared/assets', import.meta.url)) },
{ find: '@cmp', replacement: fileURLToPath(new URL('./src/shared/cmp', import.meta.url)) },
{ find: '@stores', replacement: fileURLToPath(new URL('./src/shared/stores', import.meta.url)) },
{ find: '@use', replacement: fileURLToPath(new URL('./src/shared/use', import.meta.url)) },
],
},
});
</code>
<code>import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: '@assets', replacement: fileURLToPath(new URL('./src/shared/assets', import.meta.url)) },
{ find: '@cmp', replacement: fileURLToPath(new URL('./src/shared/cmp', import.meta.url)) },
{ find: '@stores', replacement: fileURLToPath(new URL('./src/shared/stores', import.meta.url)) },
{ find: '@use', replacement: fileURLToPath(new URL('./src/shared/use', import.meta.url)) },
],
},
});
</code>
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: '@assets', replacement: fileURLToPath(new URL('./src/shared/assets', import.meta.url)) },
{ find: '@cmp', replacement: fileURLToPath(new URL('./src/shared/cmp', import.meta.url)) },
{ find: '@stores', replacement: fileURLToPath(new URL('./src/shared/stores', import.meta.url)) },
{ find: '@use', replacement: fileURLToPath(new URL('./src/shared/use', import.meta.url)) },
],
},
});
so I updated mine to look something like:
<code>alias: [
{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: 'vue', replacement: fileURLToPath(new URL('node_modules/@vue/compat', import.meta.url)) },
{ find: '~rc-webcomponents', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: '~vue2-datepicker', replacement: fileURLToPath(new URL('node_modules/vue2-datepicker', import.meta.url)) },
],
</code>
<code>alias: [
{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: 'vue', replacement: fileURLToPath(new URL('node_modules/@vue/compat', import.meta.url)) },
{ find: '~rc-webcomponents', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: '~vue2-datepicker', replacement: fileURLToPath(new URL('node_modules/vue2-datepicker', import.meta.url)) },
],
</code>
alias: [
{ find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: 'vue', replacement: fileURLToPath(new URL('node_modules/@vue/compat', import.meta.url)) },
{ find: '~rc-webcomponents', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
{ find: '~vue2-datepicker', replacement: fileURLToPath(new URL('node_modules/vue2-datepicker', import.meta.url)) },
],
but I’m still getting the same errors