HiraokaHyperTools / msgreader

35 stars 9 forks source link

Module "stream" has been externalized for browser compatibility. Cannot access "stream.Transform" in client code #47

Closed ducphu0ng closed 3 months ago

ducphu0ng commented 4 months ago

Becoming this warning above in console.

This Package use internally the iconv-lite package. That again use stream_module.Transform that only available in node and not for the web. Is there any plan to make it complete for web, without need to use browserify?

kenjiuno commented 4 months ago

Hi Is there minimal reproducible package / project about this issue?

Although I have 3 online demos, I don't get such a warning from a console. Probably I wrote the demo code without including stream.Transform in any possible reasons.

demo sites repo
demo https://github.com/HiraokaHyperTools/msgreader_demo
demo2 https://github.com/HiraokaHyperTools/msgreader_demo2
demo3 https://github.com/HiraokaHyperTools/msgreader_demo3
kenjiuno commented 4 months ago

As a result of quick search, I have recognized that the error you are describing comes from vite.

export default new Proxy({}, { get(_, key) { throw new Error(`Module "${id}" has been externalized for browser compatibility. Cannot access "${id}.\${key}" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.`) } })`

https://github.com/vitejs/vite/blob/2bc5d3de8752d8178c054da628808234a5b21917/packages/vite/src/node/plugins/resolve.ts#L454-L458

The problem is not that the method stream.Transform is not implemented. It seems that that stream object itself isn't covered by vite.

Trying to access any member of stream object will throw the Error.


A guide describes about this issue. Use polyfill, or change the code not to include nodejs specific objects.

Module externalized for browser compatibility

When you use a Node.js module in the browser, Vite will output the following warning.

Module "fs" has been externalized for browser compatibility. Cannot access "fs.readFile" in client code.

This is because Vite does not automatically polyfill Node.js modules.

We recommend avoiding Node.js modules for browser code to reduce the bundle size, although you can add polyfills manually. If the module is imported from a third-party library (that's meant to be used in the browser), it's advised to report the issue to the respective library.

https://github.com/vitejs/vite/blob/2bc5d3de8752d8178c054da628808234a5b21917/docs/guide/troubleshooting.md?plain=1#L200-L208


iconv-lite imports stream object in global initialization stage.

if (stream_module && stream_module.Transform) { iconv.enableStreamingAPI(stream_module);

https://github.com/ashtuchkin/iconv-lite/blob/928f7c68e1be51c1391c70dbee244fd32623f121/lib/index.js#L168-L169

So it is not possible to skip this step as long as we import iconv-lite. The change needs on iconv-lite side.

IMO it needs either applying polyfill of stream, or make require("stream") failure if it is possible.

github-actions[bot] commented 3 months ago

This issue is stale because it has been open for 30 days with no activity.

github-actions[bot] commented 3 months ago

This issue was closed because it has been inactive for 14 days since being marked as stale.