v1.0.2 through v21.1.0 breaks with vite

[UglyHobbitFeet]

I'm using vite v4.3.9 with vue v3.3.4 and vuetify v3.3.6. When I switch from node20 v1.0.1 to v1.0.2 I am now seeing similar errors to below:

vite.config.ts:2:30 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("vite")' call instead.
  To convert this file to an ECMAScript module, change its file extension to '.mts', or add the field `"type": "module"` to '/<myPath>/package.json'.

2 import { defineConfig } from 'vite';
                               ~~~~~~

Found 116 errors in 42 files.

My vite.config.ts looks like:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
  build: {
    target: 'esnext'
  },
  plugins: [
    vue(),
    vuetify({
      autoImport: true,
    }),
  ],
  resolve: {
    alias: {
      // @ts-ignore
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: '0.0.0.0',
    port: 1234,
    proxy: {
        '/socket.io': {
            target: 'ws://localhost:5678',
            ws: true
        },
    },
    hmr: {
        path: "/socket.io",
        port: 5678,
        clientPort: 443,
    },
    watch: {
      usePolling: true,
    }
  },
});

[orta]

the config file would need to be an mts file, or you specify that you are using a module in your package json to get default esm support when using the modern module settings in TS

[UglyHobbitFeet]

@orta
Renaming the file to mts had no effect. The errors are the same. I do not understand what you are saying about the package.json file. I'm guessing that you were suggesting to add the following to my package.json:.

"type": "module",

However when I do add that, I am seeing errors like:

vite.config.mts:11:5 - error TS2349: This expression is not callable.
  Type 'typeof import("/myPath/node_modules/@vitejs/plugin-vue/dist/index")' has no call signatures.

11     vue(),
       ~~~

vite.config.mts:12:5 - error TS2349: This expression is not callable.
  Type 'typeof import("/myPath/node_modules/vite-plugin-vuetify/dist/index")' has no call signatures.

12     vuetify({

Please reopen this ticket until it is confirmed to be working.

Thanks

[UglyHobbitFeet]

@orta Can we please reopen this ticket? Thanks!

[orta]

I don't really have the time to hand hold you through the issue, so if you find something out - let us know, but you should check with the 1.1.0 release

[UglyHobbitFeet]

I'm sorry if you feel it's handholding, but I do not see any documentation or "how to" articles on how to fix/address the issues. All I know is that if I use v1.0.2 it breaks. I do not see a v1.1.0 release at this location https://www.npmjs.com/package/@tsconfig/node20

Thanks

[UglyHobbitFeet]

Just an FYI it seems that the latest version is out now (renamed to v20.1.0) and it still breaks with the same errors.

[UglyHobbitFeet]

@orta This is still an issue with the latest version 21.1.0

[orta]

No worries, it might be that because you are using a bundler - you will want to override the module resolution setting in the tsconfig entry (because the new setting is the correct one for a nodejs project) otherwise you're welcome to look into it

[UglyHobbitFeet]

The following needed to be added to my tsconfig.json files in order for it to correctly work as expected

  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
````