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

[ascott18]

Describe the bug

Note: This is similar to #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.

[ascott18]

Tried upgrading to node v16.13.0, but the problem persisted.

[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.

[cx690]

At now,there are some ways that maybe resolve this problem!
first:

import pkg from "vite-plugin-checker";
const checker = (pkg as any).default || pkg;

second:
Change the plugin,use default export as module.exports

//entry of vite-plugin-checker
module.exports = function checker(){
...
}
//not use as this
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = function checker(){
...
}

Third:
Change the plugin to esm! Set its package.json type = "module"

//entry of vite-plugin-checker
export default function checker(){
...
}

At last you can also change the current project as commonjs----remove type = "module".

That's all,I hope vite can fix it,because rollup doesn't have this problem.That means if a plugin can be used in rollup,it can't be used in vite as usual.

[bluwy]

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

Per @cx690 first solution, import checker from "vite-plugin-checker" and checker.default({ typescript: true }) works.

[ascott18]

Unfortunately, these workarounds require abandoning type safety when using a vite.config.ts. This is especially problematic for plugins with lots of options where its very valuable to have intellisense to discover its options. Or doing some wonky casts, I suppose. Either way, its sub-optimal.

[bluwy]

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