[SOLVED] Syntax Error: The requested module does not provide an export named 'fetch' | Appwrite | Page 1

earnest cairn Apr 26, 2023, 4:57 PM

#

Hello, I'm running a React TypeScript project with the appwrite sdk installed. When I import the module containing the appwrite setup, I get the following error:
Uncaught SyntaxError: The requested module '/node_modules/cross-fetch/dist/browser-ponyfill.js?v=6461ce81' does not provide an export named 'fetch' (at sdk.js?v=6461ce81:2:10)

I'm guessing it has to do with how modules are being resolved? Any help appreciated 🙂

cedar bough Apr 26, 2023, 4:58 PM

#

Can you share the way you inserted it in the code?

earnest cairn Apr 26, 2023, 5:00 PM

#

I setup appwrite similar to how it's done in the react-todo-template.

As for using it in my code:

<FormProvider methods={methods} onSubmit={handleSubmit(async (data) => { await api.provider().local.clear(); await api .provider() .account.createEmailSession(data.email, data.password); })} >

cedar bough Apr 26, 2023, 5:03 PM

#

Is it React with Next or something or pure frontend?

earnest cairn Apr 26, 2023, 5:03 PM

#

This is in React

#

With TypeScript

#

Even when the api module has not been used after an import - it crashes the app

cedar bough Apr 26, 2023, 5:05 PM

#

How do import the package?
Where do you get the error, in the browser?

earnest cairn Apr 26, 2023, 5:05 PM

#

I get the error in the browser console

#

I am importing the package as a default import:
import api from '@/lib/appwrite';

cedar bough Apr 26, 2023, 5:06 PM

#

I mean inside api package

earnest cairn Apr 26, 2023, 5:07 PM

#

sure, just a sec

#

import { Client, Account, Databases, Teams, Functions, Storage, Avatars, } from 'node_modules/appwrite';

cedar bough Apr 26, 2023, 5:08 PM

#

earnest cairn `import { Client, Account, Databases, Teams, Functions, Storage, A...

Can you try to change it to this

import {
  Client,
  Account,
  Databases,
  Teams,
  Functions,
  Storage,
  Avatars,
} from 'appwrite';

#

And then run it?

earnest cairn Apr 26, 2023, 5:09 PM

#

The above works for JavaScript files but it does not resolve the import in TypeScript files

cedar bough Apr 26, 2023, 5:11 PM

#

It should work with your TypeScript as well

#

What is the value of moduleResolution within your tsconfig.json file?

earnest cairn Apr 26, 2023, 5:13 PM

#

moduleResolution: 'bundler'

#

I'll share the TS error below:

Could not find a declaration file for module 'appwrite'. '/Users/rajiv/Development/xxx/node_modules/appwrite/dist/esm/sdk.js' implicitly has an 'any' type. There are types at '/Users/rajiv/Development/xxxxx/node_modules/appwrite/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'appwrite' library may need to update its package.json or typings.ts(7016)

cedar bough Apr 26, 2023, 5:15 PM

#

That's because it tries to load the js file

#

Can you try to change to either node or nodenext and then you should be able to load the file as I've mentioned before

cedar bough Apr 26, 2023, 5:16 PM

#

cedar bough Can you try to change it to this ```javascript import { Client, Account, D...

This 👆

earnest cairn Apr 26, 2023, 5:16 PM

#

Let me try that

#

The import does not work with node16 but works with node 👍

cedar bough Apr 26, 2023, 5:20 PM

#

Good

#

So is the error still appears?

earnest cairn Apr 26, 2023, 5:21 PM

#

Thanks! The error does not appear anymore

cedar bough Apr 26, 2023, 5:21 PM

#

👍

earnest cairn Apr 26, 2023, 5:22 PM

#

😃

honest salmon Apr 26, 2023, 7:22 PM

#

[SOLVED] Syntax Error: The requested module does not provide export fetch

#[SOLVED] Syntax Error: The requested module does not provide an export named 'fetch'