Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.

[Asim-Tahir]

Describe the problem

I haven't been able to make a request with airtable.js using Vite + Vue 3. Is this a bug or am I missing something? Its throw

Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.

To Reproduce

Repro link: https://github.com/Asim-Tahir/airtable-repro-278

• [ ] Clone repo into your local

  git clone https://github.com/Asim-Tahir/airtable-repro-278

• [ ] Install dependencies

  yarn

  npm i

• [ ] Rename .env.example file to .env

  mv .env.example .env

• [ ] Fill .env enviroment variables

  VITE_AIRTABLE_API_KEY=key16asd6a4d
  VITE_AIRTABLE_BASE_ID=app16a5sd16as

• [ ] Running the project

  yarn dev

  npm run dev

• [ ] See error on browser console:

  • Go to http://localhost:3000 in browser.
  • Open devtools with F12 or Ctrl + Shift + I.
  • Go to the Console tab of the devtools.
  • See error:

  Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.
   at Object.get (airtable.js?v=3059accc:1137)
   at node_modules/node-fetch/lib/index.mjs (airtable.js?v=3059accc:1730)
   at __init (chunk-EB7XYW2R.js?v=3059accc:9)
   at node_modules/airtable/lib/fetch.js (airtable.js?v=3059accc:2240)
   at __require2 (chunk-EB7XYW2R.js?v=3059accc:12)
   at node_modules/airtable/lib/base.js (airtable.js?v=3059accc:3486)
   at __require2 (chunk-EB7XYW2R.js?v=3059accc:12)
   at node_modules/airtable/lib/airtable.js (airtable.js?v=3059accc:3639)
   at __require2 (chunk-EB7XYW2R.js?v=3059accc:12)
   at airtable.js?v=3059accc:3711

System

System:
    OS: Windows 10 10.0.21390
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
    Node: 16.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.21.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Chrome(Stable): 92.0.4515.159

Additional context

Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.
    at Object.get (airtable.js?v=3059accc:1137)
    at node_modules/node-fetch/lib/index.mjs (airtable.js?v=3059accc:1730)
    at __init (chunk-EB7XYW2R.js?v=3059accc:9)
    at node_modules/airtable/lib/fetch.js (airtable.js?v=3059accc:2240)
    at __require2 (chunk-EB7XYW2R.js?v=3059accc:12)
    at node_modules/airtable/lib/base.js (airtable.js?v=3059accc:3486)
    at __require2 (chunk-EB7XYW2R.js?v=3059accc:12)
    at node_modules/airtable/lib/airtable.js (airtable.js?v=3059accc:3639)
    at __require2 (chunk-EB7XYW2R.js?v=3059accc:12)
    at airtable.js?v=3059accc:3711

[nikosgpet]

Came up with the exact same error. Did you manage to find a solution to this?

[albreyb]

Hey @Asim-Tahir, it looks like we're incorrectly using node-fetch in your case. For context, we check whether window is defined to see if we can use the browsers fetch in a front end context, or node-fetch in the back end context.

To that end, can you check if window is defined?

[Asim-Tahir]

To that end, can you check if window is defined?

Yeah, window is also defined in browser console. I cannot understand why behave like that.

[david2899]

Hi, did you find any solution to this?