AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Incorrect Type Import Of SupabasePersistenceOptions In Realtime Monaco Documentation

The documentation code sample for realtime-monaco imports SupabasePersistenceOptions as a value import, causing a TypeScript error when verbatimModuleSyntax is enabled. Additionally, the required package @supabase-labs/y-supabase is not installed as a dependency.

mediumConfidence 95%Supabase

Origin Analysis

The code sample uses a regular import statement for a TypeScript type, which violates the verbatimModuleSyntax compiler option that enforces type-only imports for types. This leads to a compile-time error for users following the documentation. The missing dependency further prevents the import from resolving locally.
1. Follow the documentation at https://supabase.com/ui/docs/react/realtime-monaco. 2. Use the provided code sample in a TypeScript project with verbatimModuleSyntax enabled. 3. Attempt to build or run the project. 4. Observe the error: 'SupabasePersistenceOptions' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. Additionally, note that @supabase-labs/y-supabase is not installed.

Fixing Code Block

import type { SupabasePersistenceOptions } from "@supabase-labs/y-supabase";
Using a type-only import resolves the verbatimModuleSyntax error by making the import erased at runtime, which is the required pattern for type imports. Additionally, the documentation should include instructions to install @supabase-labs/y-supabase as a dependency, or the package should be added to the component's peer dependencies.

Edge Case Audit

This fix assumes the user has @supabase-labs/y-supabase installed. If the package is missing, the import will still fail to resolve. Ensure the dependency is added to package.json or the documentation includes a clear installation step. Also, type-only imports are only erased at compile time; if the type is used in a runtime context accidentally, it will cause a ReferenceError. To rollback, revert to a regular import and disable verbatimModuleSyntax, but this may not align with modern TypeScript best practices.

Ecosystem Topology