Main process code is bundled for browser environment

[NateScarlet]

Describe the bug

npm run watch failed with window is undefined after add @koa/router, caused by any-promise package.

Vite seems only designed to bundle code for browser, so it uses browser field of package.json, and i found no way to disable this behavior.

To Reproduce

issue-repro-2021-05-20.zip

Steps to reproduce the behavior:

1. npm install koa @koa/router @types/koa @types/koa__router
2. use koa router
3. npm run watch
4. See error

Expected behavior

any-promise register-shim.js should not included in bundle because it has been marked for browser only.

Screenshots
If applicable, add screenshots to help explain your problem.

PS D:\~\src\github.com\cawa-93\vite-electron-builder> npm run watch

> watch
> node scripts/watch.js

下午9:48:44 [main] App threw an error during load

下午9:48:44 [main] ReferenceError: window is not defined
    at Object.<anonymous> (D:\~\src\github.com\cawa-93\vite-electron-builder\packages\main\dist\index.js:14474:27)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at Module.require (internal/modules/cjs/loader.js:959:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\~\src\github.com\cawa-93\vite-electron-builder\packages\main\dist\index.cjs:2:1)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)

Additional context

I searched about bundle for node with vite/rollup, but not found anything useful,
maybe we should use esbuild for main/preload code directly?

[cawa-93]

Because vite was designed for the browser environment, there are some issues with handling specific packages. I'm not sure if there's a way to fix this but You can add koa to build.rollupOptions.external in packages/main/vite.config.js as workaround

[NateScarlet]

External not work for this, i can not use a packge without bundle it

PS D:\~\src\github.com\cawa-93\vite-electron-builder> npm run watch

> watch
> node scripts/watch.js

下午10:55:31 [main] App threw an error during load

下午10:55:31 [main] TypeError: Koa__namespace is not a constructor
    at Object.<anonymous> (D:\~\src\github.com\cawa-93\vite-electron-builder\packages\main\dist\index.cjs:62:1)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at loadApplicationPackage (D:\~\src\github.com\cawa-93\vite-electron-builder\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
    at Object.<anonymous> (D:\~\src\github.com\cawa-93\vite-electron-builder\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)

Why vite is used to build main/preload code in the first place?

[cawa-93]

- import * as Koa from 'koa'
+ import Koa from 'koa'

And you need to enable allowSyntheticDefaultImports in ts config

[NateScarlet]

It works now, external dependency is handled by electron-builder, seems electron builder not handle transform result of import *

That's a strange workaround because allowSyntheticDefaultImports should be no-op here.

Maybe later i will send a PR to use esbuild directly for main/preload code, because vite is not designed for that.

Thanks for the quick response anyway.

[cawa-93]

Maybe later i will send a PR to use esbuild directly for main/preload code, because vite is not designed for that.

Perhaps you will be better to explore other templates or approaches, since the main idea of this template is using a single build tool for everything.