Loading...

How to add a custom element to a Next.js/Typescript project?

question typescript react
Ram Patra Published on September 28, 2024

Let’s say I have a custom element setapp-badge that I want to use in my tsx files. If I go ahead and use it, the compiler will throw an error and Next.js will fail to build. It seems the problem might be a combination of how Next.js, TypeScript, and custom elements work together. Therefore, let’s try an approach that avoids the namespace/module issues while ensuring custom elements are recognized in a Next.js/TypeScript project.

Using @types/react Augmentation and Ensuring Proper Recognition of Custom Elements

Instead of extending JSX.IntrinsicElements or HTMLElementTagNameMap, we will focus on properly extending the React types for custom elements directly in a way that Next.js can handle.

Step 1: Ensure TypeScript Knows the Custom Element

Place the following in a file, say custom-elements.d.ts in the root or src/types/:

// custom-elements.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'setapp-badge': {
      appId: string;
      vendorId: string;
      theme: string;
    };
  }
}

Why this should work

  1. Declaring IntrinsicElements within the JSX namespace directly ensures Next.js and TypeScript treat setapp-badge as a valid intrinsic element.
  2. No use of declare module or namespace: We avoid augmenting the React module itself, which seems to be the root of the issue.

Step 2: Verify tsconfig.json Includes the Declarations

Ensure your tsconfig.json file includes the declaration file:

{
  "compilerOptions": {
    // other options
  },
  "include": [
    "custom-elements.d.ts",
    "src/**/*"
  ]
}

Step 3: Use setapp-badge in Your JSX

Now you can use your custom element in any .tsx file like this:

<setapp-badge appId="401" vendorId="285" theme="dark"></setapp-badge>

Key Benefits

  • Avoids ESLint Issues: This solution does not trigger the @typescript-eslint/no-namespace rule since we’re not using namespace or declare module.
  • Simple IntrinsicElements Extension: We’re directly extending JSX.IntrinsicElements, which is allowed in TypeScript and recognized by Next.js.
  • Next.js Friendly: No need for advanced or experimental TypeScript configurations.

This approach avoids the problems we’ve encountered before and directly adds the custom element to JSX without creating issues with Next.js.

Why other solutions might fail

  • declare module/namespace: Next.js might not handle these well in TypeScript configurations, leading to the errors.
  • Next.js JSX handling: By extending JSX.IntrinsicElements directly within a declare namespace JSX, we avoid Next.js misinterpreting the custom element.
Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on September 28, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question typescript July 28, 2024 How to create a JSON Object in Typescript?

Creating a JSON object in TypeScript is similar to how you would create one in JavaScript. Here are the steps you can follow:

question typescript July 20, 2024 How to filter an Array based on a condition in Typescript?

Filtering an array based on a condition in TypeScript is straightforward and similar to how you would do it in JavaScript. TypeScript adds type safety to the process, ensuring that your code is more robust and less error-prone.

question typescript javascript July 17, 2024 Difference between ?? and || in Typescript or Javascript?

In TypeScript (and JavaScript), the ?? (nullish coalescing operator) and || (logical OR operator) are both used to provide default values, but they behave differently in terms of the conditions under which they return the right-hand operand.