Skip to main content

Has anyone else tried using libraries with the create-miro-app React TypreScript option? I followed the Hello World Miro example and it works fine but when I add Airtable and even though none of the Airtable code runs I receive the error:

Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.
    at Object.get (browser-external:stream:3)
    at node_modules/node-fetch/lib/index.mjs (index.mjs:10)
    at __init (chunk-EB7XYW2R.js?v=d66c9224:9)
    at node_modules/airtable/lib/fetch.js (fetch.ts:2)
    at __require2 (chunk-EB7XYW2R.js?v=d66c9224:12)
    at node_modules/airtable/lib/base.js (base.ts:4)
    at __require2 (chunk-EB7XYW2R.js?v=d66c9224:12)
    at node_modules/airtable/lib/airtable.js (airtable.ts:1)
    at __require2 (chunk-EB7XYW2R.js?v=d66c9224:12)
    at dep:airtable:1

I have spent several hours looking it up and trying different options but even though the error changes I have not been able to make it work. Here is a sample repository with just a few changes from the default create-miro-app. To see the error get it running in Miro and open the dev console then open the app.

Any assistance would be appreciated.

Hi @Bentley Davis,

According to the Airtable.js README, the package is a node.js package so you can’t directly use it in the browser. If you need to use it in the browser you need to check this section https://github.com/Airtable/airtable.js#browser

@Ahmed El Gabri , thank you so much for the response and your time to look into this. Yes I had forgotten that they have a browser specific version. It is generally not used because it does not integrate into the typescript tool chain easily and the main version works fine in the browser. It is possible to get the browser version working with typescript but it has taken more time than it is worth.

Also, several of our corporate customers can’t use Vite with HTTPS because it requires the user to have permission to install a root certificate which is blocked by IT departments and they refuse to give this permission to the developers.

For these two reasons we will be using and recommending our own template instead of this one. We will re-visit it periodically in the future as it would be nice to have a common community template. 

It is generally not used because it does not integrate into the typescript tool chain easily and the main version works fine in the browser. It is possible to get the browser version working with typescript but it has taken more time than it is worth.

 

I guess for this you need to check with Airtable, nothing much we can do here.

 

Also, several of our corporate customers can’t use Vite with HTTPS because it requires the user to have permission to install a root certificate which is blocked by IT departments and they refuse to give this permission to the developers.

 

You can still use Vite but without the `mkcert` plugin (remove it from `vite.config.js` & uninstall it from `package.json`) & route the traffic using something like ngrok or localtunnel. We are trying with the default setup to make it easy for the majority of the people. But I understand this point, so thanks for the feedback.

Reply


Behind the Canvas Highlights + Your Turn to Weigh In

Terms & Conditions