Reference error: export is not defined

[interseba5]

Hi,
i have just installed vjsf 2.23.3 (because i have vue 2) and i have created a component with v-jsf.
When i tried to open it i get this errore on the chrome console:

ReferenceError: exports is not defined
    at Module.<anonymous> (browser.js:7:1)
    at ./node_modules/@koumoul/vjsf/node_modules/debug/src/browser.js (chunk_app_cash_content_view_chunk_app_cash_report_view_chunk_app_device_status_chunk_app_log_analysi_348bf93f.js:18425:30)
    at __webpack_require__ (bootstrap:853:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (chunk_app_cash_content_view_chunk_app_cash_report_view_chunk_app_device_status_chunk_app_log_analysi_348bf93f.js:229:64)
    at ./node_modules/@koumoul/vjsf/lib/VJsfNoDeps.js (chunk_app_cash_content_view_chunk_app_cash_report_view_chunk_app_device_status_chunk_app_log_analysi_348bf93f.js:951:30)
    at __webpack_require__ (bootstrap:853:1)
    at fn (bootstrap:150:1)
    at ./node_modules/@koumoul/vjsf/lib/VJsf.js (VJsf.js:1:1)
    at __webpack_require__ (bootstrap:853:1)

I have installed vjsf with npm with this command: npm install @koumoul/[email protected]
I use VJsf like this:

<template>
    <v-container>
        <v-card>
            <v-row align="center" justify="center">
                <v-col cols="8">
                    <v-form v-model="deviceDetailValid">
                        <v-jsf v-model="deviceDetailData" :schema="deviceDetailSchema" :options="deviceDetailOptions" />
                    </v-form>
                </v-col>
            </v-row>
        </v-card>
    </v-container>
</template>

<script lang="ts">
import Vue from "vue";
import VJsf from "@koumoul/vjsf/lib/VJsf.js";
import "@koumoul/vjsf/lib/VJsf.css";
import "@koumoul/vjsf/lib/deps/third-party.js";
export default Vue.extend({
    components: { VJsf },
    data() {
        return {
            deviceDetailData: {},
            deviceDetailSchema: {},
            deviceDetailOptions: {
                readOnly: false,
                summary: false,
                density: "default",
                indent: false,
                titleDepth: 2,
                validateOn: "input",
                initialValidation: "withData",
                updateOn: "input",
                debounceInputMs: 300,
                defaultOn: "empty",
                removeAdditional: "error",
                autofocus: false,
                readOnlyPropertiesMode: "show",
                locale: "en",
            },
            deviceDetailValid: false,
        };
    },
}),
</script>

What i am doing wrong?

[interseba5]

I have done some further investigation and i have found out that the error happens only when i set

"transpileDependencies": [
    "vuetify", "@koumoul/vjsf"
  ]

as said in the getting started guide.
If i leave only

"transpileDependencies": [
    "vuetify"
  ]

the error does not happen

[albanm]

It looks like you are using a build tool that expects to read a ESM module but encounters a Commonjs module. Vjsf 2 is commonjs while vjsf 3 is ESM.

You probably need to indicate to your build that this is a commonjs module. For example with vite this can be done using optimizeDeps.include.

You say that without the transpileDependencies options there is not this error, but there is another one ?

[interseba5]

I think i have understood what is the problem. The transpileDependencies only works with modules that do not use commonjs as said in this thread vuejs/vue-cli#1568. Maybe is needed a documentation fix, because i have followed the getting started guide.