Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incompatibility with Rollup/Vite process polyfill #539

Open
WasabiThumb opened this issue Aug 21, 2024 · 10 comments · May be fixed by #543
Open

Incompatibility with Rollup/Vite process polyfill #539

WasabiThumb opened this issue Aug 21, 2024 · 10 comments · May be fixed by #543

Comments

@WasabiThumb
Copy link

Similar to #450, though in this case a polyfill is present. It looks like the process polyfill is an ES module with a default export that isn't being properly unwrapped by readable-stream.

I've set a breakpoint on the line that is causing TypeError: e.nextTick is not a function:
image

I can confirm that a nextTick implementation is available at both the default and process fields. Here my vite.config.ts:

import {defineConfig} from "vite";
import {nodePolyfills} from "vite-plugin-node-polyfills";

export default defineConfig({
    mode: 'development',
    build: {
        sourcemap: true
    },
    plugins: [
        nodePolyfills() // also tried: { globals: { process: true } }
    ]
});
Package Version
readable-stream ^4.5.2
vite ^5.4.2
vite-plugin-node-polyfills ^0.22.0
rollup ^4.21.0
esbuild ^0.23.1
@mcollina
Copy link
Member

Thanks for reporting!

Can you provide steps to reproduce? We often need a reproducible example, e.g. some code that allows someone else to recreate your problem by just copying and pasting it. If it involves more than a couple of different file, create a new repository on GitHub and add a link to that.

@WasabiThumb
Copy link
Author

WasabiThumb commented Aug 22, 2024

Thanks for reporting!

Can you provide steps to reproduce? We often need a reproducible example, e.g. some code that allows someone else to recreate your problem by just copying and pasting it. If it involves more than a couple of different file, create a new repository on GitHub and add a link to that.

Here you are! ^_^
https://github.com/WasabiThumb/reprex-539 (non-boilerplate located here)
I've noticed that simply changing line 2 on src/main.ts to import stream rather than readable-stream makes the demo work flawlessly, but it's a shame since I thought usage of stream was discouraged 😢

@WasabiThumb
Copy link
Author

I've added a GitHub pages deployment, pressing the button should cause a console error.
https://wasabithumb.github.io/reprex-539/

@Gitssalah
Copy link

Any apdate ?

@MattiasBuelens
Copy link

This package seems to require process in a rather odd way since #497. Notice the trailing slash:

const process = require('process/')

Perhaps vite-plugin-node-polyfills doesn't handle this case very well?

WasabiThumb added a commit to WasabiThumb/reprex-539 that referenced this issue Sep 30, 2024
@WasabiThumb
Copy link
Author

This package seems to require process in a rather odd way since #497. Notice the trailing slash:

const process = require('process/')

Perhaps vite-plugin-node-polyfills doesn't handle this case very well?

I noticed #497 since it is somewhat related. I recall editing the package to replace process/ with process to no effect. It should be easy to reproduce with the example. That does make some sense, if it was a resolution issue I would expect Vite to raise a compile-time error. It seems to resolve properly, but provides the whole ES module rather than just the default export. That also makes sense, since that is the default behavior for require, but something is typically supposed to handle this. Either a wrapper function like __webpack_require__, or TSC adding .default when converting import to require; someone can correct me here.

On the TSC note I realized that my example was missing allowSyntheticDefaultImports. However, I added it and got the exact same issue. It can't hurt to have, so I'm pushing it to the example repo. I've also updated the vite.config.ts to only use base: '/reprex-539' when targeting GitHub Pages, since I'm here making a commit anyways ❤️

@WasabiThumb
Copy link
Author

WasabiThumb commented Sep 30, 2024

In the absence of any new insight, I've made a brute-force fix on this branch. For what it's worth, all tests pass and it works perfectly in the reprex. To try it out:

npm install --save-dev WasabiThumb/readable-stream#bug/vite-esm -or-commit-or-tag

(cc. @Gitssalah)
If this passes the bar, I could make a PR (though I imagine that this is far too opaque).

@mcollina
Copy link
Member

I'll be happy to land a PR covered by tests.

@WasabiThumb WasabiThumb linked a pull request Oct 14, 2024 that will close this issue
@WasabiThumb
Copy link
Author

WasabiThumb commented Oct 14, 2024

I'll be happy to land a PR covered by tests.

Created #543. I should also note that the PR would not introduce any new tests, simply that it does not actively cause a regression. I'm not sure what a test for this fix would look like while also being in-scope for the project.

@mcollina
Copy link
Member

Use vite to bundle an app and run the tests in the browser with playwright.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants