SDK not working in browsers

[tzelon-cypator]

Hey,
In the FAQ it says
"If you generate an SDK with the CLI installation process then yes! If you're having trouble getting autogenerated SDKs working in a browser"

I use npx api install *** to install my sdk, but when I try to use it I get Module not found: Can't resolve 'fs/promises'
I see that the generated code imports /api/dist/core which import the prepareParams.ts, and that file imports nodejs modules.

Thank you, for your help.

[erunion]

I'll update that guide as it's not completely accurate but in a browser environment you will need to polyfill fs as we load fs in prepareParams.ts in order to handle file uploads within SDKs with something like Webpack.

I believe if you add this to your package.json then Webpack will pick it up and make it ok:

"browser": {
  "fs": false
},

Let me know if that works and I'll update the guide to mention this.

[tzelon-cypator]

Hey, thanks for the response.
I tried that with Nextjs config using webpack5. but I get TypeError: Cannot destructure property 'readFile' of 'fs_1.promises' as it is undefined. unfortunately, I don't have time to dig deeper into it.

I still use the API in my server code :)

[bkniffler]

This doesn’t work, because you’re importing fs/promise, which popular polyfill plugins like esbuild node polyfill does not recognize. Could you switch to using fs instead of fs/promise?

[bkniffler]

Or, maybe, if you could simply make sure to have a pure browser compatible build that you allow to use via package.json browser field, that would help. I’ve not been able to get this to work. This is not only for browser environment, but cloudflare workers will also not work with the api package.

[erunion]

Alright I've got a PR here¹ to move from fs/promises to fs in our client-side code. Hopefully this fixes the problem otherwise I'll look into adding a browser field to the package.json file(s).

Footnotes

1. https://github.com/readmeio/api/pull/605 ↩

[bkniffler]

Thanks, appreciate the effort. Very eager to use the api package with some readmeio libraries (including our own that we host on readme) on cloudflare workers.

[erunion]

I've just published v5.0.7 which changes our fs/promises usage in that core library to fs. Hopefully that resolves your issues.

[JPCanaverde]

Hi @erunion! I'm also having trouble running this in the browser, and 5.0.7 or 5.0.8 work unfortunately.

I've got a React TypeScript app using Vite 4.3.2.

The initial error I get is:

[Error] ReferenceError: Can't find variable: process

	node_modules/@readme/json-schema-ref-parser/lib/util/url.js (chunk-3REMNXOU.js:379)
	__require (chunk-AC2VUBZ6.js:11)
	node_modules/@readme/json-schema-ref-parser/lib/util/errors.js (chunk-3REMNXOU.js:517)
	__require (chunk-AC2VUBZ6.js:11)
	node_modules/@readme/json-schema-ref-parser/lib/pointer.js (chunk-3REMNXOU.js:628:104)
	__require (chunk-AC2VUBZ6.js:11)
	node_modules/@readme/json-schema-ref-parser/lib/ref.js (chunk-3REMNXOU.js:763)
	__require (chunk-AC2VUBZ6.js:11)
	node_modules/@readme/json-schema-ref-parser/lib/bundle.js (chunk-3REMNXOU.js:858)
	__require (chunk-AC2VUBZ6.js:11)
	node_modules/@readme/json-schema-ref-parser/lib/index.js (chunk-3REMNXOU.js:4976)
	__require (chunk-AC2VUBZ6.js:11)
	node_modules/oas/dist/index.js (chunk-3REMNXOU.js:15342)
	__require (chunk-AC2VUBZ6.js:11)
	Module Code (oas.js:5)

If I add some Node polyfills, I get this:

[Error] TypeError: Right side of assignment cannot be destructured

	node_modules/datauri/parser.js (api_dist_core.js:7854)
	__require (chunk-W4M7KYKD.js:11)
	node_modules/api/dist/core/prepareParams.js (api_dist_core.js:8860)
	__require (chunk-W4M7KYKD.js:11)
	node_modules/api/dist/core/index.js (api_dist_core.js:9329)
	__require (chunk-W4M7KYKD.js:11)
	Module Code (api_dist_core.js:9436)

Which is caused by:

const fs_1 = require("fs");

const { readFile } = fs_1.promises; 

Also tried adding browserify-fs as polyfill but that still gives me the same error.

Would love to get this to run, as the generated code seems really good. Any ideas?

Thanks in advance!