TypeScript Errors

This page covers type-related build errors when using the Pexelize SDK in a TypeScript project.

Missing type declarations

What you see:

error TS7016: Could not find a declaration file for module '@pexelize/react-editor'.
  '/node_modules/@pexelize/react-editor/dist/index.js' implicitly has an 'any' type.

Why it happens: The main SDK package ships JavaScript only; types are in a separate package.

Fix: Install the types package:

npm install --save-dev @pexelize/editor-types

The types package includes declarations for all wrappers (react-editor, vue-editor, angular-editor) and the vanilla createEditor API. After installing, the error should disappear on the next build.

If you need a quick workaround before installing types, add a declaration file:

src/pexelize.d.ts

declare module '@pexelize/react-editor' {
  import { ForwardRefExoticComponent, RefAttributes } from 'react';

  export interface PexelizeEditorProps {
    editorKey: string;
    minHeight?: string | number;
    appearance?: Record<string, unknown>;
    mergeTags?: Array<{ name: string; value: string }>;
    specialLinks?: Array<{ name: string; href: string; target?: string }>;
    customFonts?: Array<{ label: string; value: string; url: string }>;
    ai?: Record<string, unknown>;
    onReady?: () => void;
    onImageUpload?: (file: File, done: (result: { progress: number; url?: string }) => void) => void;
    onGenerateText?: (request: Record<string, unknown>, done: (result: Record<string, unknown>) => void) => void;
    onGenerateImage?: (request: Record<string, unknown>, done: (result: Record<string, unknown>) => void) => void;
    onGenerateHeadlines?: (request: Record<string, unknown>, done: (result: Record<string, unknown>) => void) => void;
    [key: string]: unknown;
  }

  export interface PexelizeEditorRef {
    loadDesign(json: Record<string, unknown>): void;
    exportJson(callback: (json: Record<string, unknown>) => void): void;
    exportHtml(callback: (data: { html: string }) => void): void;
    exportImage(callback: (data: { url: string }) => void, options?: { timeout?: number }): void;
    exportPdf(callback: (data: { url: string }) => void, options?: { timeout?: number }): void;
    undo(): void;
    redo(): void;
    registerTool(tool: Record<string, unknown>): void;
    setAppearance(appearance: Record<string, unknown>): void;
    destroy(): void;
  }

  export const PexelizeEditor: ForwardRefExoticComponent<
    PexelizeEditorProps & RefAttributes<PexelizeEditorRef>
  >;
}

---

Version mismatch between SDK and types

What you see:

error TS2345: Argument of type '{ containerId: string; editorKey: string; onReady: () => void; }'
is not assignable to parameter of type 'PexelizeConfig'.
  Object literal may only specify known properties, and 'onReady' does not exist in type 'EditorConfig'.

Why it happens: The installed @pexelize/editor-types version doesn't match the SDK version. A newer SDK may accept properties that older types don't declare.

Fix: Align the versions:

# Check current versions
npm ls @pexelize/react-editor @pexelize/editor-types

# Update both to latest
npm install @pexelize/react-editor@latest @pexelize/editor-types@latest

The types package follows the same major.minor versioning as the SDK. For example, SDK 2.5.x requires types 2.5.x.

---

ref type not working with useRef

What you see:

error TS2322: Type 'MutableRefObject<null>' is not assignable to type 'Ref<PexelizeEditorRef>'.

Why it happens: TypeScript needs the generic parameter on useRef to know the ref type.

Fix: Type the ref explicitly:

import type { PexelizeEditorRef } from '@pexelize/editor-types';

const editorRef = useRef<PexelizeEditorRef>(null);

Then use it:

<PexelizeEditor ref={editorRef} editorKey="..." />

---

Strict null checks on editor methods

What you see:

error TS18047: 'editorRef.current' is possibly 'null'.

Why it happens: useRef<PexelizeEditorRef>(null) has type PexelizeEditorRef | null, and strictNullChecks requires you to handle the null case.

Fix: Use optional chaining:

// Correct
editorRef.current?.exportJson((json) => { /* ... */ });

// Also correct
if (editorRef.current) {
  editorRef.current.exportJson((json) => { /* ... */ });
}

---

onImageUpload callback types

What you see:

error TS2322: Type '(file: File, done: Function) => void' is not assignable to type 'ImageUploadHandler'.

Why it happens: The done parameter has a specific signature, not a generic Function.

Fix: Use the correct type:

import type { ImageUploadDone } from '@pexelize/editor-types';

const handleUpload = (file: File, done: ImageUploadDone) => {
  // done expects: { progress: number; url?: string }
  uploadFile(file).then((url) => {
    done({ progress: 100, url });
  });
};

Or let TypeScript infer it from the prop:

<PexelizeEditor
  onImageUpload={(file, done) => {
    // `file` and `done` are fully typed here
    done({ progress: 100, url: 'https://...' });
  }}
/>

---

Quick checklist

Check	How to verify
Types package installed	npm ls @pexelize/editor-types shows a version
Versions aligned	SDK and types share the same major.minor
useRef is typed	useRef<PexelizeEditorRef>(null)
Optional chaining on .current	editorRef.current?.method()
tsconfig includes node_modules types	"types" array in tsconfig.json is not filtering out @pexelize