Require() of ES Module ... error when importing Doughnut chart

[Jeroen Claessens]

Describe the bug

I'm trying to use a Dougnut chart in Nuxt Bridge, so I'm following the examples from Nuxt 2 + SSR + composition-api (without importing composition-api since it should be in Nuxt Bridge already(?).

However as soon as I import DoughnutChart from vue-chart-3 I'm getting hit with a require() of ES Module ... error from lodash-es which is a dependency of @vue/composition-api. I thought it would have something to do with Nuxt Bridge, but as soon as I started building the repro sandbox, it gave the same thing, so I guess there is something else to it?

To Reproduce

repro

Version of vue-chart-3

Tried both v2.0.3 and v3.1.0

Version of Vue

• Vue 3
• Vue 2
• Nuxt 2 (Nuxt Bridge)
• Nuxt 3

[Victor Garcia]

For Nuxt bridge, try v2.1.2 instead, I will look at it because I have only tested on Nuxt 2 and Nuxt 3 but not Nuxt bridge yet

[Jeroen Claessens]

@victorgarciaesgi , I checked with 2.1.2 but also gave the same result.

[Mirko Poloni]

Hey @jclaessens97, adding these lines to the nuxt.config and restarting the sandbox server should solve the problem:

build: {
    // Transpile ESM modules because Nuxt 2 uses CommonJS for building server.
    transpile: ["vue-chart-3", "lodash-es"]
  }

Some extra infos here: https://v3.nuxtjs.org/concepts/esm/

[Jeroen Claessens]

Thanks @mirkopoloni ! Missed that part of the nuxt docs completely 😄

[Victor Garcia]

Thanks @mirkopoloni I forgot about this Nuxt option. I will add it to the docs