question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Main process code is bundled for browser environment

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
cawa-93commented, May 20, 2021

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.

0reactions
NateScarletcommented, May 20, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

accessing process.env freshly in bundled code #6850 - GitHub
I've been wondering for quite a while, why webpack insists by design/default of compiling in the process.env variables at all. It seems rather ......
Read more >
Demystifying Code Bundling with JavaScript Modules
The bundle is the main script file, which the browser loads through a <script> tag. (Or there can be multiple bundle files, but...
Read more >
Bundle.js - Uncaught ReferenceError: process is not defined ...
env when running the Angular app on the browser (without Angular Universal ), e.g. by ng serve . Run npm i -S process...
Read more >
Module Bundling with Webpack - LearnHowToProgram.com
The browser loads them individually, which takes time. But combining code from all dependencies into one file (known as a bundle) decreases this...
Read more >
Building without bundling: How to do more with less
Unbundled roadblock #2: Most npm packages—even primarily web-focused packages—require a Node.js-like environment and will fail in the browser.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found