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.

  1. Check for Errors: Examine the specific error messages you're encountering when using Airtable or other npm packages. These error messages often contain clues about what might be going wrong, such as missing modules, syntax errors, or incorrect usage of package methods.

  2. Environment Setup: Confirm that your environment variables, configurations, or API keys required by Airtable or other npm packages are correctly set up in your project. Incorrect or missing configurations can lead to errors when interacting with these services.

  3. Community Forums and Documentation: Explore the documentation and community forums for both create-miro-app and the npm packages you're using (like Telelinkshub). Frequently, others might have encountered similar issues and solutions might already exist.

  4. Open Issues: Check if there are any open issues related to using Airtable or other npm packages within a create-miro-app project on their respective GitHub repositories or forums. Sometimes, known issues or workarounds are documented there.

Reply


Terms & Conditions