Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught ReferenceError: require is not defined #7901

Closed
volkanunsal opened this issue Mar 7, 2021 · 9 comments
Closed

Uncaught ReferenceError: require is not defined #7901

volkanunsal opened this issue Mar 7, 2021 · 9 comments
Labels
Build Related to build issues feature-request Request a new feature

Comments

@volkanunsal
Copy link

volkanunsal commented Mar 7, 2021

Describe the bug

There are several requires in DataStore source code. It causes this error:

Uncaught ReferenceError: require is not defined

Here is a screenshot from the Dev Tools:

Screen Shot 2021-03-07 at 4 13 34 PM

What is Configured?

I'm using the latest version of amplify-js, i.e. 3.3.22.

This is the file where it is coming from:

https://github.com/aws-amplify/amplify-js/blob/8fa348b8ba708434992d97557b0fceebbf7abe9a/packages/datastore/src/storage/adapter/getDefaultAdapter/index.ts

@volkanunsal volkanunsal added the to-be-reproduced Used in order for Amplify to reproduce said issue label Mar 7, 2021
@iartemiev
Copy link
Member

Which browser/platform are you getting this error in? Which framework or build tool are you using?

@iartemiev iartemiev removed the to-be-reproduced Used in order for Amplify to reproduce said issue label Mar 8, 2021
@volkanunsal
Copy link
Author

I'm using Snowpack bundler, which uses esbuild. It uses the lib-esm folder of the project to load the code, which should contain only ESM code, and that's why it's not using interop for require statements. Configuring interop would be difficult for a single dependency, so it'd be great if it were changed at the source.

@iartemiev
Copy link
Member

I see. We're using require in that file to conditionally import the necessary storage adapter. Once dynamic imports for ESM modules reaches sufficient cross-browser stability, we can migrate to using those instead.

@volkanunsal
Copy link
Author

What is the reasoning for importing them conditionally? Is it the file size? Or do they have a side effect or something?

@iartemiev
Copy link
Member

Mainly file size, as AsyncStorage has upstream dependencies that are not needed on web

@iartemiev iartemiev added the feature-request Request a new feature label Mar 8, 2021
@amhinson amhinson added the Build Related to build issues label Mar 8, 2021
@volkanunsal
Copy link
Author

volkanunsal commented Mar 9, 2021

Once dynamic imports for ESM modules reaches sufficient cross-browser stability, we can migrate to using those instead.

The main issue for me here is that this is not standards compliant ESM.

There are two compilation targets for this project. If you were to use import('...'), it would be transformed into require('...') for the CJS target, and developers who are concerned about supporting legacy browser can already use that.

But the developers who target ESNext now have no other choice but to fork the project to use DataStore.

@iartemiev
Copy link
Member

That's fair. Most of our customers rely on Webpack (via CRA, @angular/cli, etc.), and by default the ESM modules with those get transpiled further, so it's not an issue in most cases. I would be resistant to changing the conditional require behavior as that would introduce a breaking change (all customers would need to install React Native dependencies in order to upgrade).

However, it looks like ESM Dynamic Imports are now supported by > 3 major versions in all major browsers, so we should be able to start using that feature. We'll look into refactoring any conditional require statements into ESM Dynamic Imports.

@niwasmala
Copy link

Is there any update on this? I'm having same problem when using Svelte Kit, Vite, and AWS Amplify DataStore.
Any ideas how to temporary solve this?

@github-actions
Copy link

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 19, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Build Related to build issues feature-request Request a new feature
Projects
None yet
Development

No branches or pull requests

5 participants