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
Stop using node modules in client-side libraries #8725
Comments
@alabaki Do you have a project reproducing this that you can share? |
@tylerbutler Please refer to: npm install |
@alabaki Thank you! I was able to get past the node dependencies by including the polyfills. My fork of your repo is here if you want to see those changes. I'll use this issue to track getting the full list of node deps and either removing them or replacing them with isomorphic code. Anyway, the polyfills will unblock the build, but there is still a problem related to the debug package.
I haven't figured out that issue yet. |
@tylerbutler Thank you! I believe you didn't push your changes to the forked repo, however, I also replaced the url module with a polyfill and it solved that issue. Regarding the debug package issue, I included the @types/debug package and now it's building properly, you can refer to the repo to see the changes. But just like you mentioned, all node modules need to be replaced. Thanks for the help! |
@alabaki You're right, I forgot to push to my fork. 🤦🏻♂️ Thank you for sharing the changes you made to get unblocked! |
There are more node dependencies beyond version 0.54. If you upgrade client dependencies, the repo doesn't works anymore. Since 0.55, @fluidframework/routerlicious-driver depends on node-fetch which requires |
oof |
Yes absolutely. The reason for switching to fetch was that Axios doesn't provide streaming capability which was something we wanted to experiment with. Unfortunately, the choice to use I'm actively working on righting this by switching to cross-fetch since @tylerbutler brought this to my attention this morning, but am sadly hung up on mocking it for UTs. |
Just FYI, we currently use
So if we upgrade to it, we will have to put in a shim ourselves or switch to other libraires. |
Fetch API has landed into Node.js since v17.5 and will be a first class citizen in Node.js 18 (LTS). Probably it makes sense to call global Main benefits:
// fetch-polyfill.js
import fetch, {
Blob,
blobFrom,
blobFromSync,
File,
fileFrom,
fileFromSync,
FormData,
Headers,
Request,
Response,
} from 'node-fetch'
if (!globalThis.fetch) {
globalThis.fetch = fetch
globalThis.Headers = Headers
globalThis.Request = Request
globalThis.Response = Response
}
// index.js
import './fetch-polyfill' |
@znewton, wasn't |
@malekpour Upgrading to node-fetch v3 would impact everywhere else in the repo that uses node-fetch. If what @curtisman says is true, then our use of node-fetch v2 is important for other places (e.g. odsp-driver) to not require Node.js polyfills. I did not want to take on the scope of altering their fetch usage. |
Upgrading to I haven't look into cross-fetch, but I believe it has browser polyfill as well? My concern would be that it will increase bundle size in the browser context because of the unused polyfill (we don't support browser that doesn't have the 'fetch' API) Would be good to make sure that cross-fetch doesn't bring additional code for browser. |
I think |
According to cross-fetch README,
So I guess it does indeed add the polyfill/ponyfill of WhatWG-Fetch :/ My main hesitation for touching ODSP's node-fetch usage is I don't know how to locally validate odsp-driver changes. @vladsud thoughts here? |
In the section of the We have a separately versioned package, |
I ran into this issue 6 months ago when I was trying to onboard Fluid Framework for our app. We also use Vite, and I ended up giving up feeling like the Client libraries aren't ready to play around with yet. I started playing around with it again this weekend and am disappointed to see this is still an issue. The workarounds with polyfills described above also weren't working for me anymore. I had to install the |
@tylerbutler What is the update here? Will the packages be fixed? Most front-end frameworks are now using webpack 5 or vite rendering this library unusable |
@curtisman @tylerbutler bumping this thread. |
@RishhiB is actively working on several issues related to this. 👍 |
@RishhiB do you have ADO item tracking this? What's the ETA? |
We've addressed the url, assert, and events issues, and these changes will be in the next release of azure-client and related packages. However, buffer still needs to be polyfilled in some cases. Still investigating that. |
This PR has been automatically marked as stale because it has had no activity for 60 days. It will be closed if no further activity occurs within 8 days of this comment. Thank you for your contributions to Fluid Framework! |
Update 2022-10-12
We've addressed the url, assert, and events issues. However,
buffer
still needs to be polyfilled in some cases. Still investigating that.Describe the bug
Currently, the azure-client package and its dependencies driver-utils and container-loader, are using node-only builtins when it's intended to be a client-side library, therefore it is currently impossible to use this library with Vite or Webpack 5.
The node builtin that are being used are: url and querystring
To Reproduce
The build will fail with errors:
Expected behavior
Successful build and use
Tracking issues
The text was updated successfully, but these errors were encountered: