Error when importing CJS plugin into vite.config.js when project is ESM.

Describe the bug

Note: This is similar to https://github.com/vitejs/vite/issues/3024, but that issue is about imports within application code, not imports within Vite’s config file. I believe this issue to be different, as it is being governed by the transforms being done in loadConfigFromFile.

---

When importing a cjs plugin (E.g. vite-plugin-checker) with a default export into a esm project ("type": "module")'s vite.config.js file, the import instead looks as if I did import * as checker from ... rather than import checker from .... See logs below, and debugger screenshot:

As an attempted workaround, using import * as checker and then consuming the plugin as checker.default does not work either.

Reproduction

package.json

{
  "name": "vite-cjs-default-bug",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "vite build --mode prod"
  },
  "dependencies": {
    "vue": "2.6.12"
  },
  "devDependencies": {
    "typescript": "4.4.4",
    "vite": "2.6.14",
    "vite-plugin-checker": "0.3.4",
    "vite-plugin-vue2": "1.9.0",
    "vue-template-compiler": "2.6.12"
  }
}

vite.config.js

import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
import checker from "vite-plugin-checker";

export default defineConfig(async ({ command, mode }) => {
  return {
    plugins: [
      createVuePlugin(),
      checker({ typescript: true }),
    ],
  };
});

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 12.62 GB / 31.94 GB
  Binaries:
    Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.53)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    vite: 2.6.14 => 2.6.14

Used Package Manager

npm

Logs

PS C:\src\vite-no-import-cjs-default> npx vite build --debug
  vite:config native esm config loaded in 268.36ms URL {
  href: 'file:///C:/src/vite-no-import-cjs-default/vite.config.js',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/C:/src/vite-no-import-cjs-default/vite.config.js',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
} +0ms
failed to load config from C:\src\vite-no-import-cjs-default\vite.config.js
error during build:
TypeError: checker is not a function
    at file:///C:/src/vite-no-import-cjs-default/vite.config.js?t=1637015450618:9:7
    at loadConfigFromFile (C:\src\vite-no-import-cjs-default\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:68644:15)
    at async resolveConfig (C:\src\vite-no-import-cjs-default\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:68188:28)
    at async doBuild (C:\src\vite-no-import-cjs-default\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:42986:20)
    at async build (C:\src\vite-no-import-cjs-default\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:42974:16)
    at async CAC.<anonymous> (C:\src\vite-no-import-cjs-default\node_modules\vite\dist\node\cli.js:737:9)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

This is often an issue with how the plugin is bundled. They’re exporting the Vite plugin in default with a __esModule hint that are recognized by bundlers to emulate default import. However node’s resolution doesn’t do this hence the awkward syntax. I’d recommend opening an issue in the plugin repo instead unless Vite decides to always bundle the config file, like #5779.

[bluwy]

Closing as this is an issue in userland. We should fix the plugin instead so it’s compatible with node’s spec.