Introduction
As an Angular/TypeScript developer utilizing Supabase, you may have encountered the perplexing “File appears to be binary” or “Is not a module” error while attempting to generate types from your database. This error typically manifests when executing the following command:
npx supabase gen types typescript --local --schema public > ./src/app/header/supabase.ts
While the file is successfully generated, importing it into your Angular project triggers the error “Is not a module.”.
Demystifying the Error
The error message “Is not a module” signifies that the generated file is incompatible with TypeScript’s interpretation. This discrepancy arises due to the script generating the types encoding the file in UTF-16, a binary format. Conversely, TypeScript expects the file to be in UTF-8 encoding, a standard text format.
Resolving the Issue
To rectify this issue, the generated file needs to be saved in UTF-8 encoding. Follow these steps to achieve this:
Open the generated file using a text editor.
Verify the file’s encoding. If it’s not UTF-8, convert it to UTF-8.
Save the file.
After saving the file in UTF-8 encoding, you should be able to import it into your Angular/TypeScript project without encountering any errors.
Preventing Future Occurrences
To prevent this issue from recurring, the members of supabase have to modify the script generating the types to output the file in UTF-8 encoding.
Conclusion
While encountering the “File appears to be binary” or “Is not a module” error can be frustrating, understanding its root cause and implementing the solution can help you resolve the issue promptly and prevent its recurrence. By following the steps outlined in this blog post, you can seamlessly generate and import Supabase types into your Angular/TypeScript project.