Not compatible with Electron: Node.js internal modules truncated

[nomagick]

Describe the bug

Node.js internal modules were turned into empty objects.
Which is valid and needed in Electron enviroments.

And, Node.js only means SSR is a false assumption.

Reproduction

require("utils").promisify()

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 157.62 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.5 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.128
    Firefox: 85.0.2
    Safari: 14.0.3
  npmPackages:
    @vitejs/plugin-vue: ^1.0.4 => 1.0.5 
    vite: ^2.0.0-beta.12 => 2.0.0-beta.26 

Used package manager: npm

Logs

 [vite] warning: externalized node built-in "child_process" to empty module. (imported by:

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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.

[lusase]

我也有类似的问题
vite 2.1.5 + vue3 _+ electron 12
在开发环境 require('nedb') 是可以正常使用nedb的功能的
但是构建后 软件打开报错找不到 nedb 这个包

但如果我切换成 import DataStore from 'nedb'
又会提示 util.inherit not defined
不知道如何配置或者目前 vite 并不支持?
但是我疑惑的是在开发环境可以正常的跑起来

[nomagick]

Share my walkaround here:

patch-vite.ts

const hack1 = 'req';
const hack2 = 'uire';
const theRequire: any = window[hack1 + hack2 as any];
export default function patchedRequire(module: string): any {
    return theRequire(module);
}

In your code...

import patchedRequire from './patch-vite';

// Vite is incapable of loading node built-in modules.
import type childProcess_t from 'child_process';
import type util_t from 'util';
import type path_t from 'path';
import type fs_t from 'fs';

const childProcess: typeof childProcess_t = patchedRequire('child_process');
const util: typeof util_t = patchedRequire('util');
const path: typeof path_t = patchedRequire('path');
const fs: typeof fs_t = patchedRequire('fs');

...

[nomagick]

So this issue has a better walkaround https://github.com/xiaoxiangmoe/vite-plugin-commonjs-externals thanks to @xiaoxiangmoe.

#2652 #2218

[nomagick]

@lusase 用上面老哥那个插件就能解，挺好用的。

[lusase]

@lusase 用上面老哥那个插件就能解，挺好用的。

试了一下还是不行... 还是报找不到包

[xiaoxiangmoe]

@lusase 如果你的 nedb 里用到了commonjs 里的 require('util') 就会导致问题，因为 commonjs 转 cjs 是在 vite 的 optimize 时刻做的，但目前 optimize 无法受到 插件控制。

相关 issue： #2511

[rainbowsuger]

这个问题怎么解决的呢？

[shilin1983]

vite vue3 element-plus
Error: Module "path" has been externalized for browser compatibility and cannot be accessed in client code.
at Object.get (__vite-browser-external:path:3)
System:
OS: macOS 11.4
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 170.58 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.22.3 - ~/.nvm/versions/node/v12.22.3/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.13 - ~/.nvm/versions/node/v12.22.3/bin/npm
Browsers:
Chrome: 91.0.4472.164
Firefox: 89.0.2
Safari: 14.1.1
npmPackages:
@vitejs/plugin-vue: ^1.2.5 => 1.2.5
vite: ^2.4.2 => 2.4.2

[cll123456]

同问，怎么解决呢？
@shilin1983

[Niputi]

closing as vite is not going support node global builtins and node specific api's on the client

[nomagick]

Shame on you then

[Niputi]

a focus of vite is to promote esm.
vite doesn't/won't support node global builtins/api's on the client (browser) as they don't exist with esm compliant code.
you can use node global builtins/api's in ssr since you are running node environment here

[nomagick]

It's not about vite want something or not.
It will never be your place as a library or tool to dictate what environment the application should be in.
Also not your place to dictate what code people will write.
Libraries are supposed to be self-contained and always reflect the intent of the developer. Not the way around.

It's a simple request here:

Don't screw up the code people write!

When the developer says require('fs'), you just leave it there!
Don't screw it up
How hard is it ?

[patak-dev]

@nomagick I suggest you review the way you are directing yourself to Open Source maintainers. As @Niputi said, Electron is out of the scope of Vite at this point, we are focusing on making the best experience possible to build web apps. There are people in the community using Vite for Electron, and we will try to help as possible. But Vite as a project can and will set its own scope and priorities. If you don't agree with them, you are free to use other tools or respectfully engage with us so to work something together. If there is a concrete change that will unblock your use case, I recommend you send a PR so we can see the added complexity. Please state as clearly as possible the use case that this would enable and how you can't achieve the same in userland through plugins. Locking this issue now as I don't think the current line of discussion is productive.