vite-plugin-esmodule: move-file results in ERR_REQUIRE_ESM

[nedsociety]

Repro steps:

1. Clone https://github.com/caoxiemeihao/electron-vite-react (commitid 7fe671e)
2. npm i move-file
3. Add move-file definition to packages\main\vite.config.ts:

   //...
   plugins: [
   esmodule([
     'execa',
     'node-fetch',
     'move-file'     // <- added
   ]),
   ],
   //...

4. Add some code to packages\main\samples\electron-store.ts:

   
   import { execa } from 'execa'

// INSERTED CODE BEGIN

import { moveFile } from 'move-file' console.log('%o', moveFile);

// INSERTED CODE END

(async () => { const { stdout } = await execa('echo', ['unicorns']) console.log(stdout) })()

4. `npm run dev` fails with ERR_REQUIRE_ESM

$ npm run dev

vite-react-electron@1.0.0 dev node scripts/watch.mjs

(node:30336) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead. (Use node --trace-deprecation ... to show where the warning was created) Pre-bundling dependencies: react react-dom react/jsx-dev-runtime (this will be run only when your dependencies or config have changed) vite v2.8.6 building for development...

watching for file changes...

build started... transforming (1) index.tsvite v2.8.6 building for production... ✓ 3 modules transformed. transforming (15) node_modules\cross-spawn\lib\parse.js../../dist/preload/index.cjs 2.58 KiB / gzip: 1.06 KiB built in 305ms. ✓ 64 modules transformed. node_modules/.vite-plugin-esmodule/execa/index.js 50.49 KiB / gzip: 12.55 KiB node_modules/.vite-plugin-esmodule/execa/index.js.map 93.91 KiB vite v2.8.6 building for production... ✓ 25 modules transformed. Entry module "node_modules/node-fetch/src/index.js" is using named and default exports together. Consumers of your bundle will have to use chunk["default"] to access the default export, which may not be what you want. Use output.exports: "named" to disable this warning node_modules/.vite-plugin-esmodule/node-fetch/multipart-parser.js 9.91 KiB / gzip: 2.50 KiB node_modules/.vite-plugin-esmodule/node-fetch/multipart-parser.js.map 17.23 KiB node_modules/.vite-plugin-esmodule/node-fetch/index.js 195.93 KiB / gzip: 32.15 KiB node_modules/.vite-plugin-esmodule/node-fetch/index.js.map 373.92 KiB vite v2.8.6 building for development...

watching for file changes...

build started... ✓ 28 modules transformed. ../../dist/main/index.cjs 275.17 KiB / gzip: 48.16 KiB ../../dist/main/index.cjs.map 421.73 KiB built in 737ms.

App threw an error during load Error [ERR_REQUIRE_ESM]: require() of ES Module D:\Repos\electron-vite-react\node_modules\move-file\index.js from D:\Repos\electron-vite-react\dist\main\index.cjs not supported. Instead change the require of index.js in D:\Repos\electron-vite-react\dist\main\index.cjs to a dynamic import() which is available in all CommonJS modules. at Function.c._load (node:electron/js2c/asar_bundle:5:13331) at Object. (D:\Repos\electron-vite-react\dist\main\index.cjs:19:16) at Function.c._load (node:electron/js2c/asar_bundle:5:13331) at loadApplicationPackage (D:\Repos\electron-vite-react\node_modules\electron\dist\resources\default_app.asar\main.js:110:16) at Object. (D:\Repos\electron-vite-react\node_modules\electron\dist\resources\default_app.asar\main.js:222:9) at Function.c._load (node:electron/js2c/asar_bundle:5:13331) at Object. (node:electron/js2c/browser_init:189:3197) at Object../lib/browser/init.ts (node:electron/js2c/browser_init:189:3401) at __webpack_require__ (node:electron/js2c/browser_init:1:128) at node:electron/js2c/browser_init:1:1200 at node:electron/js2c/browser_init:1:1267 at Function.c._load (node:electron/js2c/asar_bundle:5:13331)

Well, move-file is written by the same author who wrote execa, I'm not sure of what made the difference here.

[caoxiemeihao]

You can see the demo esmodules/move-file.ts

[nedsociety]

You can see the demo esmodules/move-file.ts

Not sure if I understood exactly how it works in that example. So, if my project was based on electron-vite-react, then I should...

1. update vite-plugin-esmodule to ^1.1
2. then add { webpack: true } to the vite.config.ts file

Is it correct?

[caoxiemeihao]

vite-plugin-esmodule@1.1.x added options.webpack support.
Just now, I released vite-plugin-esmodule@1.2.0, using webpack to build esmodule has become the default option.
You just need to upgrade vite-plugin-esmodule@1.2.0. 😄

[nedsociety]

Still not working with 1.2.0, same error. Not sure what causes it. Here's the repo with minimal changes:

https://github.com/nedsociety/electron-vite-react-esm/tree/vite-plugin%2312-repro-example

[caoxiemeihao]

You need move "move-file" to devDependencies, because dependencies packages will be inset rollupOptions.external in vite.config.ts of the tempalte.

{
    rollupOptions: {
      external: [
        'electron',
        ...builtinModules,
        ...Object.keys(pkg.dependencies || {}),
      ],
    },
}

{
  "dependencies": {
    "electron-store": "^8.0.1",
-   "move-file": "^3.0.0"
  },
  "devDependencies": {
+   "move-file": "^3.0.0"
  }
}

[nedsociety]

Huh, that was unexpected reason. Thanks for the support. It might worth putting notes to somewhere on README in the template.