Typescript statement results in require for browser

[Akazm]

I've got a index.ts source file with the following line:

import "./../../menu/menu.ts"

With the following content:

import {fromEvent, map} from "rxjs";

((() => {
    const menuToggle = document.querySelector(
        'input#menu-toggle[type="checkbox"]'
    )! as HTMLInputElement

    fromEvent(menuToggle, "change")
        .pipe(
            map(() => menuToggle.checked)
        ).subscribe(it => {
        document.querySelector("body")?.classList?.toggle("is-menu-open")
    })
})());

I am using a .babelrc file as well:

{
  "presets": [
    ["@babel/preset-env",
      {
        "modules": false,
        "forceAllTransforms" : true,
        "corejs": {"version": 3, "proposals": true},
        "useBuiltIns": "usage",
        "targets": {
          "edge": "15",
          "firefox": "38",
          "chrome": "46",
          "safari": "7.0",
          "ie": "11"
        }
      }
    ],
    ["@babel/preset-typescript", {
      "allowNamespaces": true
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-parameters",
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-transform-template-literals"
  ]
}

(Yep, I'm aware that the target environment is quite outdated)

And this is my vite.config.ts file:

import {defineConfig} from 'vite';
import {PreRenderedAsset} from "rollup";
import react from "@vitejs/plugin-react"
import legacy from '@vitejs/plugin-legacy';
import { resolve } from 'path';
import { writeFile } from 'fs/promises';
import * as fs from "node:fs";

export default defineConfig({
    build: {
        outDir: 'dist', // Root output directory
        target: 'es2015',
        rollupOptions: {
            input: {
                contact: './src/contact/contact.html',
                legal: './src/legal/legal.html',
                index: './src/index/index.html',
                footer: './src/footer/footer.html',
                menu: './src/menu/menu.html',
            },
            output: {
                format: 'es',
                dir: "dist",
                // Customizing the output paths for js, css, and html
                entryFileNames: 'static/js/[name].js', // JavaScript goes to the 'js' folder
                chunkFileNames: 'static/js/[name]-[hash].js', // Chunked JS files will have a hash for cache-busting
                assetFileNames: (assetInfo: PreRenderedAsset) => {
                    if (assetInfo.name?.endsWith('.css')) {
                        return 'static/css/[name].css'; // CSS goes to the 'css' folder
                    }
                    return 'static/media/[name].[ext]'; // Other assets (like images) go to the 'assets' folder
                },
            },
        },
        commonjsOptions: {transformMixedEsModules: true}
    },
    resolve: {
        alias: {
            '@': '/src', // Adjust this according to your project structure
        },
    },
    plugins: [
        react({
            babel: {
                // Use .babelrc files
                babelrc: true,
            }
        }),
        legacy({
            targets: ['IE 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime']
        }),
    ],
    root: "./src",
});

The built index.js file looks like this:

import"./modulepreload-polyfill-B5Qt9EMX.js";function t(){import.meta.url,import("_").catch(()=>1),async function*(){}().next()}require("./../../menu/menu.ts");export{t as __vite_legacy_guard};

As you can see, it uses import as well as require-statements; while import may work for most browsers, require does not.

I'd expect the file to be ES5 compatible (which the -legacy file appears to be). Is my expectation wrong? If not, what am I missing?

[sapphi-red]

I guess babel is converting imports into requires unnecessarily. Vite does not support require outside of node_modules, so that's probably the reason why require is output as-is.

[Akazm]

You're right. It's been caused by the following plugin:

babel/plugin-transform-modules-commonjs

Remove it and it's fine!