Featured image of post Overcoming the "Is not a module" error after generating supabase types for TypeScript
Database

Overcoming the "Is not a module" error after generating supabase types for TypeScript

Struggling to generate Supabase types for your Angular/TypeScript project? Unravel the mystery behind the "File appears to be binary" or "Is not a module" error and learn how to resolve it effortlessly.

Introduction

If you’re an Angular/TypeScript developer working with Supabase, you’ve probably run into the head-scratching File appears to be binary or Is not a module error at some point. It tends to pop up when you try to generate types from your database with a command like this:

1

npx supabase gen types typescript --local --schema public > ./src/app/header/supabase.ts

The file gets created just fine, but the moment you try to import it into your Angular project — you’re hit with that “Is not a module” error. So, what’s going on here, and how do you fix it? Let’s break it down.

What’s Behind the Error?

The “Is not a module” message is TypeScript’s way of saying, “Hey, I don’t know what to do with this file.” The issue stems from how the types are generated. The Supabase script spits out a file encoded in UTF-16, which is a binary format. Meanwhile, TypeScript is sitting there expecting UTF-8, the standard text encoding it’s used to handling. It’s like handing someone a recipe written in hieroglyphics when they just wanted plain English—things don’t line up.

Fixing It

Luckily, the fix is pretty straightforward. You just need to get that file into UTF-8 encoding. Here’s how to do it:

  1. Open the generated file in your favorite text editor—Notepad++, VS Code, whatever works for you.

  2. Check the encoding. If it’s showing UTF-16 (or anything other than UTF-8), switch it to UTF-8. Most editors make this easy with a “Save As” or “Convert Encoding” option.

  3. Save the file, and you’re good to go.

Once it’s in UTF-8, you should be able to import it into your Angular project without any complaints from TypeScript.

Keeping It From Happening Again

Wouldn’t it be nice if this didn’t keep tripping you up? The real long-term fix lies with the Supabase team. If they tweak the type-generation script to output files in UTF-8 by default, this headache could disappear for everyone. Maybe drop them a friendly note about it if you’re feeling proactive!

Wrapping Up

Running into the “File appears to be binary” or “Is not a module” error can definitely throw a wrench in your day, but it’s not hard to sort out once you know what’s causing it. With a quick encoding tweak, you’ll be back to generating and importing Supabase types in your Angular/TypeScript project like nothing ever happened. Hopefully, this little guide saves you some frustration—and maybe a few forehead-desk collisions along the way!