Airtable/airtable.js

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

Asim-Tahir opened this issue · 4 comments

Asim-Tahir commented

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 commented

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

  • 👍5
albreyb commented

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 commented

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 commented

Hi, did you find any solution to this?

  • 😕1