Problem with vue-cal 5.x imports in weweb.io deployment

OPra · March 17, 2025, 9:03pm

Hello,

I’m reaching out for help with an issue I’m experiencing with the vue-cal library during deployment of my project.

When trying to deploy, I’m receiving these errors:

🔸 ERROR Failed to compile with 9 errors
error in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/vuecal.css is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

and similar errors for translation files (./dist/i18n/en.es.js, ./dist/i18n/fr.es.js, etc.)

Module not found: Error: Package path ./dist/vuecal.css is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

 error  in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/i18n/en.es.js is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

 error  in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/i18n/fr.es.js is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

 error  in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/i18n/es.es.js is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

 error  in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/i18n/de.es.js is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

 error  in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/i18n/nl.es.js is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

 error  in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/i18n/it.es.js is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

 error  in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/i18n/pt-br.es.js is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

 error  in ./src/components/elements/element-4ce97e36-71b1-48d5-b89d-ef045c0e939e/src/wwElement.vue?vue&type=script&lang=js

Module not found: Error: Package path ./dist/i18n/ar.es.js is not exported from package /tmp/front/node_modules/vue-cal (see exports field in /tmp/front/node_modules/vue-cal/package.json)

Importantly, everything works fine in the editor and on localhost - there are no errors at all. The issues only appear during deployment.
I’m using vue-cal version 5.0.1-rc.8, which has a different export structure than previous versions.

I’ve tried uninstalling and reinstalling the vue-cal package, but this hasn’t resolved the issue.

Could you please help with solving this problem?

Broberto · March 17, 2025, 9:21pm

Can you show us how you’re importing the things that don’t seem to have a proper path? This import for example is also from an npm library and it works just fine for me.

OPra · March 18, 2025, 7:34am

Hi, thanks for you reply.
My import:

import { VueCal } from "vue-cal";
import "vue-cal/style";

but I tried a many others ways to import my node_modules/vue-cal/dist/i18n

My package.json exports in vue-cal pack:

"exports": {
    ".": {
      "import": "./dist/vue-cal.es.js",
      "require": "./dist/vue-cal.cjs.js"
    },
    "./style": {
      "default": "./dist/vue-cal.css"
    },
    "./style.css": {
      "default": "./dist/vue-cal.css"
    },
    "./i18n/*": "./dist/i18n/*",
    "./package.json": "./package.json"
  }

Broberto · March 18, 2025, 7:48am

Maybe you could try the import 'vue-cal/dist/[file_name]' format? It seems to work for my imports.

OPra · March 18, 2025, 9:17am

If i try:
import "vue-cal/dist/i18n/en.json";

then i have compiled with problems in editor:
Module not found: Error: Package path ./dist/i18n/en.json is not exported from package /Users/admin/vue-cal-custom-v1/node_modules/vue-cal (see exports field in /Users/admin/vue-cal-custom-v1/node_modules/vue-cal/package.json)

if i try:
import "vue-cal/dist/i18n/";

then:
Module not found: Error: Resolving to directories is not possible with the exports field (request was ./dist/i18n/)

if i try:
import "vue-cal/i18n/pl.json";

then in editor is fine, but with deploy still problem

I tried also this:

import { VueCal } from "vue-cal";
import "vue-cal/style";
import "vue-cal/style.css";
import "vue-cal/i18n/pl";
import "vue-cal/i18n/en-us";
import "vue-cal/i18n/fr";
import "vue-cal/i18n/es";
import "vue-cal/i18n/de";
import "vue-cal/i18n/nl";
import "vue-cal/i18n/it";
import "vue-cal/i18n/pt-br";
import "vue-cal/i18n/ar";

import "vue-cal/i18n/pl.json";
import "vue-cal/i18n/en-us.json";
import "vue-cal/i18n/fr.json";
import "vue-cal/i18n/es.json";
import "vue-cal/i18n/de.json";
import "vue-cal/i18n/nl.json";
import "vue-cal/i18n/it.json";
import "vue-cal/i18n/pt-br.json";
import "vue-cal/i18n/ar.json";

And this from https://antoniandre.github.io/vue-cal/date-prototypes :

import { VueCal } from "vue-cal";
import "vue-cal/style";

import { useLocale, addDatePrototypes } from 'vue-cal'
import Pl from 'vue-cal/i18n/pl.json'
import Fr from "vue-cal/i18n/fr.json";
import Es from "vue-cal/i18n/es.json";
import De from "vue-cal/i18n/de.json";
import Nl from "vue-cal/i18n/nl.json";
import It from "vue-cal/i18n/it.json";
import Ar from "vue-cal/i18n/ar.json";

useLocale(Pl)
addDatePrototypes()

And still same problem with deploy

dorilama · March 18, 2025, 9:49am

you are probably still using v4.
check the vue-cal version in the dependencies of the package.json of your element.
try installing v5 with npm i vue-cal@next

OPra · March 18, 2025, 10:14am

My vue-cal dependencies in package.json:

{"name":"weweb-vue-cal","version":"1.0.0","description":"Vue Calendar Component for WeWeb.io","main":"src/wwElement.vue","scripts":{"build":"weweb build","serve":"weweb serve"},"dependencies":{"vue":"^3.5.13","vue-cal":"^5.0.1-rc.9"},"author":"","license":"MIT","devDependencies":{"webpack-cli":"^6.0.1"}}

dorilama · March 18, 2025, 10:52am

then this should work:

import { VueCal } from "vue-cal";
import "vue-cal/style";
import "vue-cal/i18n/pl";

in your local repo try these imports and test a local build with npm run build -- name=test type=element
if it builds without errors you can then push it to github, wait for weweb to build the component, set the last version in the dashboard and then rebuild your app

EDIT!
forget about anything I said above. you can not use vue-cal v5 at the moment.
weweb uses vue-cal v4.10.0 and that’s the only version you can use
when building your app your dependencies are merged with the one used by weweb. from the docs:

You can add other dependencies if you need to. Be aware that all package.json will be merged in the final web-app and, if two components need the same dependencies, only the more recent one will be installed. This can lead to conflicts.

so your options are:

use vue-cal v4.10.0
try removing any weweb elements using vue-cal as dependency in your app to see if you can avoid the version conflict
bundle vue-cal in another file in your project and import it from there. I would avoid this option since you will have the same lib twice in your final app.

OPra · March 18, 2025, 11:20am

It worked!

I removed all calendar items that use vue-cal as a dependency in my app and the deployment was successful.

Thanks!

Topic		Replies	Views
New Deploy System Failes Developer corner bug	17	194	November 12, 2024
WeWeb Error CodeBuild Failing for a custom component even though app gets published with it Developer corner	0	22	January 21, 2025
Deployment Error! Ask us anything	2	43	March 24, 2025
Issue when deploying weweb app with a context path How do I?	10	503	December 19, 2023
Error deployment Developer corner	5	135	January 31, 2025

Problem with vue-cal 5.x imports in weweb.io deployment

Related topics