10

The following is my problem. I packaged my project through vite in library mode. The error occurs whenever my library includes any third party UI library (e.g vue-loading-overlay). But other libraries like moment.js will have no problem.

This is my vite.config.js, Is there any problem with my configuration?

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, "src/lib.ts"),
      name: "my-ui-lib",
      fileName: "my-ui-lib",
    },
    rollupOptions: {
      external: ["vue"],
      output: [
        {
          format: "es",
          exports: "named",
          globals: { vue: "vue" },
        },
      ],
    },
  },
});

enter image description here

JoeH
  • 368
  • 1
  • 3
  • 9

5 Answers5

9

Finally I resolved my problem, Adding the following in vite.config.js. It works for me.

build: {

   /** If you set esmExternals to true, this plugins assumes that 
     all external dependencies are ES modules */

   commonjsOptions: {
      esmExternals: true 
   },
}
JoeH
  • 368
  • 1
  • 3
  • 9
1

Original Answer

"Chart.js V3 is treeshakable so you need to import and register everything or if you want everything you need to import the chart from the auto import like so:

change import Chart from 'chart.js' to ->

import Chart from 'chart.js/auto';

For more information about the different ways of importing and using chart.js you can read the integration page in the docs.

Since you are upgrading from Chart.js V2 you might also want to read the migration guide since there are some major breaking changes between V2 and V3"

James-Riordan
  • 64
  • 3
1

react-pdf v6 has a pretty clever solution for this, look at their entry files. I think the point is to link to the correct file, somehow there's no need to "actually" import the worker (it doesn't run on main thread anyway I guess? New to worker and pdfjs).

import * as pdfjs from 'pdfjs-dist/build/pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url);

import.meta availability.

Minh Nghĩa
  • 854
  • 1
  • 11
  • 28
0

/* Adding the following in vite.config.js. Just copy and paste all these code. It works for me. */

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";


// https://vitejs.dev/config/
export default defineConfig({
   plugins: [react()],
   commonjsOptions: {
      esmExternals: true,
   },
});
Rohit Sahani
  • 1
  • 1
  • Please also explain why this code is solving the problem. – Eli Zatlawy Nov 20 '22 at 11:38
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 20 '22 at 11:39
-9

Refer to vuejs 3 documentation to import vue.

Brainiac
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 29 '22 at 20:14