ERR_REQUIRE_ESM about vitest-sonar-reporter

[AriPerkkio]

Thanks for providing the info.

I tried changing the "type": "module" in the package.json, but it breaks the project.

I see, you are trying to use a pure ESM package in a non-ESM project. You'll need to import all ESM modules using dynamic import. Luckily Vite support async config: https://vitejs.dev/config/#async-config.

This should do the trick:

- import SonarReporter from 'vitest-sonar-reporter';

- export default defineConfig({
+ export default defineConfig(async function () {
+   const { default: SonarReporter } = await import("vitest-sonar-reporter");
+
+  return {  
  ...
  test: {
    reporters: [new SonarReporter()],

Let me know if this helps.

[AriPerkkio]

The Error [ERR_REQUIRE_ESM]: require() of ES Module error message indicates this reporter is imported with require('vitest-sonar-reporter') instead of import SonarReporter from 'vitest-sonar-reporter'. Could you share your vite.config.ts and the run command you are using to run vitest?

Here is a working example where vitest-sonar-reporter runs just fine: https://stackblitz.com/edit/vitest-dev-vitest-hip4ge?file=vite.config.ts

[josefernandezatceiba]

Here's the vite.config.ts and the command is vitest (i'm using yarn)

/// <reference types="vitest" />
import { resolve } from 'path';

import VueI18n from '@intlify/vite-plugin-vue-i18n';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import Legacy from '@vitejs/plugin-legacy';
import Vue from '@vitejs/plugin-vue';
import CleanUp from 'rollup-plugin-cleanup';
import Visualizer from 'rollup-plugin-visualizer';
import Components from 'unplugin-vue-components/vite';
import { defineConfig } from 'vite';
import Inspect from 'vite-plugin-inspect';
import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-vue-layouts';
import SvgLoader from 'vite-svg-loader';


import SonarReporter from 'vitest-sonar-reporter';


export default defineConfig({
  resolve: {
    alias: {
      '~/': `${resolve(__dirname, 'src')}/`,
    },
  },
  plugins: [
    Vue({
      include: [/\.vue$/],
      template: { transformAssetUrls },
    }),
    Inspect(),
    // https://github.com/hannoeru/vite-plugin-pages
    Pages({
      extensions: ['vue'],
    }),

    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
    Layouts({
      defaultLayout: 'main-layout',
    }),
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    quasar({
      sassVariables: 'src/styles/quasar-variables.sass'
    }),
    // https://github.com/antfu/unplugin-vue-components
    Components({
      extensions: ['vue'],
      dirs: ['src/components', '../../../node_modules/h2o-web-shared/components'],
      include: [/\.vue$/, /\.vue\?vue/],
      dts: 'src/components.d.ts',
    }),
    // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
    VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      include: [resolve(__dirname, 'locales/**')],
    }),
    SvgLoader({
      svgoConfig: {
        multipass: true,
      },
    }),
    CleanUp({
      extensions: ['js', 'mjs', 'vue'],
      comments: ['some', 'istanbul', /STABLE/, /__PURE__/],
    }),
    Legacy({
      ignoreBrowserslistConfig: false,
    }),
    Visualizer({
      filename: resolve(__dirname, 'dist/REPORT/stats.html'),
      template: 'treemap', // sunburst|treemap|network
      sourcemap: true,
      brotliSize: true,
      gzipSize: true,
    }),
  ],
  base: './',
  server: {
    fs: {
      strict: true,
    },
    force: true,
  },
  build: {
    brotliSize: true,
    sourcemap: 'hidden',
    rollupOptions: {
      output: {
        compact: true,
      },
    },
  },
  optimizeDeps: {
    include: [
      'vue',
      'vue-router',
      '@vueuse/core',
      'ky',
      'ramda',
      'pinia'
    ],
    exclude: [
      'vue-demi',
    ],
  },
  test: {   
    watch: false,
    reporters: new SonarReporter(),
    outputFile: 'sonar-report.xml',
    globals: true,
    environment: 'happy-dom',
    exclude: ['integration/*'],
    coverage: {
      exclude: ['__mocks__', '**/*.spec.*', '**/*.test.*'],
      reporter: ['text', 'lcov']
    },
  },
});

[josefernandezatceiba]

Bro, thanks a lot. It worked like a charm, i'm getting code coverage and number of tests

[AriPerkkio]

Perfect! I'll add this to a troubleshooting section to README in #9.

[AriPerkkio]

This should do the trick:

- import SonarReporter from 'vitest-sonar-reporter';

- export default defineConfig({
+ export default defineConfig(async function () {
+   const { default: SonarReporter } = await import("vitest-sonar-reporter");

For anyone else running into ERR_REQUIRE_ESM error, solution above is no longer recommended.

Instead of importing the reporter, simply let Vitest handle the importing for you. Define reporter as string in your vitest.config.ts.

Configuration

Add new custom reporter and define outputFile in your vite.config.ts:

import { defineConfig } from 'vitest/config';

export default defineConfig({
    test: {
        reporters: 'vitest-sonar-reporter',
        outputFile: 'sonar-report.xml',
    },
});

...

• ❌ Do not import reporter as import SonarReporter from 'vitest-sonar-reporter';
• ✅ Define reporter as reporters: ['vitest-sonar-reporter'] so that vitest will process it. This quarantees support for projects without { type: 'module' }.