TypeError: Class extends value undefined is not a constructor or null

[pavanrvennapusa]

i am quasar cli with vite and vitest for unit tests, getting below error while trying to run test cases on amcharts4 library.

FAIL src/tests/components/piechart.spec.ts [ src/tests/components/piechart.spec.ts ]
FAIL src/tests/onboarding/executionList.spec.ts [ src/tests/onboarding/executionList.spec.ts ]
TypeError: Class extends value undefined is not a constructor or null
❯ Module.__extends node_modules/tslib/tslib.es6.js:26:15
❯ node_modules/src/.internal/core/elements/Modal.ts:38:5
❯ node_modules/@amcharts/amcharts4/.internal/core/elements/Modal.js:38:2
❯ node_modules/@amcharts/amcharts4/.internal/core/export/Export.js:5:31

vitest.config.ts
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import tsconfigPaths from 'vite-tsconfig-paths'
import AutoImport from 'unplugin-auto-import/vite'
import AutoImportLayouts from 'vite-plugin-pages'
import path from 'path'
export default defineConfig({
test: {
exclude: [
'/node_modules/',
'/dist/',
'/cypress/'],
globals: true,
environment: 'happy-dom',
deps: {
inline: ['@amcharts/amcharts4'],
},
alias: {
'~': './src',
"tslib": path.resolve(__dirname, 'node_modules/tslib/tslib.es6.js'),
"@amcharts/amcharts4/core": path.resolve(__dirname, 'node_modules/@amcharts/amcharts4/core.js'),
"@amcharts/amcharts4/charts": path.resolve(__dirname, 'node_modules/@amcharts/amcharts4/charts.js'),
"@amcharts/amcharts4/themes/animated": path.resolve(__dirname, 'node_modules/@amcharts/amcharts4/themes/animated.js'),
},
coverage: {
reporter: ['text', 'clover', 'lcov', 'json', 'html'],
},
},
plugins: [
AutoImport({
imports: ['vitest'],
dts: false,
}),
AutoImportLayouts({
extensions: ['vue'],
dirs: [{ dir: 'src/onboarding/pages', baseRoute: '' }],
}),
vue({
template: { transformAssetUrls },
}),
quasar({
sassVariables: 'src/quasar-variables.scss',
}),
tsconfigPaths(),
],
})
quasar.config.js
/* eslint-env node */

/*

• This file runs in a Node context (it's NOT transpiled by Babel), so use only
• the ES6 features that are supported by your Node version. https://node.green/
  */

// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

const path = require('path')
const { configure } = require('quasar/wrappers')
// import Pages from 'vite-plugin-pages';
// import Layouts from 'vite-plugin-vue-layouts';
module.exports = configure((ctx) => {
return {
// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
preFetch: true,

// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: ['axios', 'route', { path: 'vue-grid-layout', server: false }, { path: '~@amcharts/amcharts4/core', server: false }, { path: '~@amcharts/amcharts4/charts', server: false }],

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss', 'global.scss', '~codemirror/lib/codemirror.css'],

// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
  'ionicons-v4',
  'mdi-v7',
  'fontawesome-v6',
  'eva-icons',
  'themify',
  'line-awesome',
  // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

  'roboto-font', // optional, you are not bound to it
  'material-icons', // optional, you are not bound to it
],

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
build: {
  alias: {
    '~': path.join(__dirname, './src'),
    "tslib": path.resolve(__dirname, 'node_modules/tslib/tslib.es6.js'),
    "@amcharts/amcharts4/core": path.resolve(__dirname, 'node_modules/@amcharts/amcharts4/core.js'),
    "@amcharts/amcharts4/charts": path.resolve(__dirname, 'node_modules/@amcharts/amcharts4/charts.js'),
    "@amcharts/amcharts4/themes/animated": path.resolve(__dirname, 'node_modules/@amcharts/amcharts4/themes/animated.js'),

  },
  target: {
    browser: ['es2016', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
    node: 'node16',
  },

  vueRouterMode: 'history', // available values: 'hash', 'history'
  // vueRouterBase,
  // vueDevtools,
  vueOptionsAPI: true,

  // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
  // publicPath: '/',
  // analyze: true,
  env: require('dotenv').config().parsed,
  rawDefine: {},
  // ignorePublicFolder: true,
  minify: true,
  polyfillModulePreload: true,
  // distDir,

  extendViteConf(viteConf, { isServer, isClient }) {
    viteConf.build.modulePreload = { polyfill: true };
    Object.assign(viteConf.resolve.alias, {
      '~': `${path.join(__dirname, './src')}`,
    })
    Object.assign(viteConf.commonjsOptions,{
      transformMixedEsModules: true,
    })
    Object.assign(viteConf.optimizeDeps, {
      include: ['vue',
        'vue-router',
        'interactjs',
        'vue-grid-layout',
        '@amcharts/amcharts4'],
      exclude: ['vue-demi'],
    })
    if (isServer) {
      viteConf.ssr = viteConf.ssr || {}
      viteConf.ssr.noExternal = viteConf.ssr.noExternal || []

      viteConf.ssr.noExternal.push('npm:codemirror')
      viteConf.ssr.noExternal.push('npm:vue-grid-layout')
      // viteConf.ssr.noExternal.push('npm:vue-konva')
      viteConf.ssr.noExternal.push('@amcharts/amcharts4')
    }
  },
  viteVuePluginOptions: {},

  vitePlugins: [
    [
      'vite-plugin-pages',
      {
        extensions: ['vue', 'md'],
        dirs: [{ dir: 'src/onboarding/pages', baseRoute: '' }],
      },
    ],
    ['vite-plugin-vue-layouts', {}],
    // [
    //   '@intlify/vite-plugin-vue-i18n',
    //   {
    //     // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
    //     // compositionOnly: false,

    //     // you need to set i18n resource including paths !
    //     include: path.resolve(__dirname, 'locales/**'),
    //   },
    // ],
    [
      'unplugin-auto-import/vite',
      {
        imports: [
          'vue',
          'vue-router',
          'vue-i18n',
          '@vueuse/head',
          '@vueuse/core',
        ],
        dts: 'src/auto-imports.d.ts',
      },
    ],
    [
      'unplugin-vue-components/vite',
      {
        extensions: ['vue', 'md'],

        // allow auto import and register components used in markdown
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],

        // custom resolvers
        resolvers: [
          // auto import icons
          // https://github.com/antfu/unplugin-icons
        ],

        dts: 'src/components.d.ts',
      },
    ],
  ],
},

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
devServer: {
 // https: false,
  open: false, // opens browser window automatically
},

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: {
  config: {},

  // iconSet: 'material-icons', // Quasar icon set
  // lang: 'en-US', // Quasar language pack

  // For special cases outside of where the auto-import strategy can have an impact
  // (like functional components as one of the examples),
  // you can manually specify Quasar components/directives to be available everywhere:
  //
  // components: [],
  // directives: [],

  // Quasar plugins
  plugins: [
    'Notify',
    'Loading', 'Meta', 'LocalStorage', 'SessionStorage'],
},

// animations: 'all', // --- includes all animations
// https://v2.quasar.dev/options/animations
animations: [],

// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
// sourceFiles: {
//   rootComponent: 'src/App.vue',
//   router: 'src/router/index',
//   store: 'src/store/index',
//   registerServiceWorker: 'src-pwa/register-service-worker',
//   serviceWorker: 'src-pwa/custom-service-worker',
//   pwaManifestFile: 'src-pwa/manifest.json',
//   electronMain: 'src-electron/electron-main',
//   electronPreload: 'src-electron/electron-preload'
// },

// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
ssr: {
  // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
  // will mess up SSR

  // extendSSRWebserverConf (esbuildConf) {},
  // extendPackageJson (json) {},

  pwa: false,

  // manualStoreHydration: true,
  // manualPostHydrationTrigger: true,

  prodPort: 9000, // The default port that the production server should use
  // (gets superseded if process.env.PORT is specified at runtime)

  middlewares: [
    'render', // keep this as last one
  ],

},

// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
pwa: {
  workboxMode: 'generateSW', // or 'injectManifest'
  injectPwaMetaTags: true,
  swFilename: 'sw.js',
  manifestFilename: 'manifest.json',
  useCredentialsForManifestTag: false,
  useFilenameHashes: true,
  // extendGenerateSWOptions (cfg) {}
  // extendInjectManifestOptions (cfg) {},
  // extendManifestJson (json) {}
  // extendPWACustomSWConf (esbuildConf) {}
},

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
cordova: {
  // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
capacitor: {
  hideSplashscreen: true,
},

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
electron: {
  // extendElectronMainConf (esbuildConf)
  // extendElectronPreloadConf (esbuildConf)

  inspectPort: 5858,

  bundler: 'packager', // 'packager' or 'builder'

  packager: {
    // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
    // OS X / Mac App Store
    // appBundleId: '',
    // appCategoryType: '',
    // osxSign: '',
    // protocol: 'myapp://path',
    // Windows only
    // win32metadata: { ... }
  },

  builder: {
    // https://www.electron.build/configuration/configuration

    appId: 'qted-poc',
  },
},

// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
bex: {
  contentScripts: ['my-content-script'],

  // extendBexScriptsConf (esbuildConf) {}
  // extendBexManifestJson (json) {}
},

}
})
can you please help me how to solve this