Vite + Vue do not see values on left bar + bug on 11.0^

[raizdev]

Hi all,

Thankyou for this awosome library!!

Im experience some issues. I've copied everything from https://stackblitz.com/run?file=src%2FApp.vue and I see only the date, values from left bar are missing. In my code i see the following code.

<g class="ticks invisible" aria-hidden="true" aria-label="invisible left ticks" fill="none" font-size="10" font-family="sans-serif" text-anchor="end" style="opacity: 0; pointer-events: none;"><path class="domain" stroke="currentColor" d="M0.5,269.4799995422363V0.5"></path></g>

Ticks invisible, how could that happen?

Also I noticed that everything above version 1.11.0 doesn't work. Receive this error

    node_modules/esbuild/lib/main.js:1336:21:
      1336 │         let result = await callback({

    at packageEntryFailure (file:///C:/Users/starr500/Desktop/faweb-frontend/node_modules/vite/dist/node/chunks/dep-2faf2534.js:34107:11)
    at resolvePackageEntry (file:///C:/Users/starr500/Desktop/faweb-frontend/node_modules/vite/dist/node/chunks/dep-2faf2534.js:34102:9)
    at tryNodeResolve (file:///C:/Users/starr500/Desktop/faweb-frontend/node_modules/vite/dist/node/chunks/dep-2faf2534.js:33842:20)
    at Context.resolveId (file:///C:/Users/starr500/Desktop/faweb-frontend/node_modules/vite/dist/node/chunks/dep-2faf2534.js:33602:28)
    at Object.resolveId (file:///C:/Users/starr500/Desktop/faweb-frontend/node_modules/vite/dist/node/chunks/dep-2faf2534.js:40539:46)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolve (file:///C:/Users/starr500/Desktop/faweb-frontend/node_modules/vite/dist/node/chunks/dep-2faf2534.js:40763:26)
    at async file:///C:/Users/starr500/Desktop/faweb-frontend/node_modules/vite/dist/node/chunks/dep-2faf2534.js:40937:34
    at async requestCallbacks.on-resolve (C:\Users\starr500\Desktop\faweb-frontend\node_modules\esbuild\lib\main.js:1336:22)
    at async handleRequest (C:\Users\starr500\Desktop\faweb-frontend\node_modules\esbuild\lib\main.js:706:13)

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1260:20:
      1260 │       let promise = setup({````

[nstuyvesant]

Hi @raizdev - can you create fork of my StackBlitz fork that reproduces your issue? The URL you shared is the initial URL when a demo is created in StackBlitz but is not shareable.

As you'll notice, the StackBlitz fork I've shared shows ticks on the y-axis without problems. This is version 1.11.6 but there haven't been any Vue-specific changes since 1.11.0.

[raizdev]

Hi @nstuyvesant thanks for your quick reply! I suppose that the issue is in Vite. Your fork is based on vue cli. I tried to reproduce it on stackblitz but i'm reciving the same error as in my local environment. I believe 11.16 has vue 3 support.

https://stackblitz.com/edit/vue3-vite-router-starter-psdlqe

i've also created a git repository with the issue, even 11.0 as 11.16 both doesn't work with a different error

https://github.com/raizdev/carbon-charts

[plugin:vite:import-analysis] Failed to resolve entry for package "@carbon/charts-vue". The package may have incorrect main/module/exports specified in its package.json: Missing "." specifier in "@carbon/charts-vue" package
C:/Users/starr500/napon/src/App.vue
at packageEntryFailure (file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:28687:11)
at resolvePackageEntry (file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:28682:9)
at tryNodeResolve (file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:28415:20)
at Context.resolveId (file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:28176:28)
at async Object.resolveId (file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:44158:32)
at async TransformContext.resolve (file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:43874:23)
at async normalizeUrl (file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:41746:34)
at async file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:41898:47
at async Promise.all (index 0)
at async TransformContext.transform (file:///C:/Users/starr500/napon/node_modules/vite/dist/node/chunks/dep-75f53616.js:41823:13
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

edit: also on cli receive the same error again

WAIT Compiling... 23:43:06

Compiling...

ERROR Failed to compile with 1 error 23:43:07

error in ./src/main.js

Module not found: Error: Package path . is not exported from package C:\Users\bryan\cli-faweb\node_modules@carbon\charts-vue (see exports field in C:\Users\bryan\cli-faweb\node_modules@carbon\charts-vue\package.json)

ERROR in ./src/main.js 2:0-43
Module not found: Error: Package path . is not exported from package C:\Users\bryan\cli-faweb\node_modules@carbon\charts-vue (see exports field in C:\Users\bryan\cli-faweb\node_modules@carbon\charts-vue\package.json)

webpack compiled with 1 error

[nstuyvesant]

@raizdev - I was able reproduce the issue as well as provide a simple (temporary) workaround. Please look at this StackBlitz example:
https://stackblitz.com/edit/vue3-vite-router-starter-quktr4?file=src%2FApp.vue

Important things

1. The temporary workaround is to do the import like this: import { CcvLineChart } from '@carbon/charts-vue/dist/index.mjs'
2. The library uses IBM Plex Sans and Sans Condensed by default so these should be loaded in your HTML template file (index.html). You were missing this.
3. If your chart uses the toolbar, you need to load '@carbon/styles/css/styles.css' as I have done in App.vue.
4. It is better for Vite if you import stylesheets inside the script tag to ensure hot module reloading is optimized.
5. I am using a newer version of Vue and Vite (and so should you). Additionally, you'll want to start using the syntactic sugar of script setup. It cuts out a lot of boilerplate code.

I will submit a PR to fix the exports on @carbon/charts-vue's package.json.

[nstuyvesant]

#1642 submitted

[raizdev]

Thank you! Tested and works like a charm. You and your team are awesome with fast response and fixes. Thanks for that!