Next / App router example fails with the latest Next.js release

[vmorilla]

The Next / App router example gives an error with the latest Next.js release:

Argument of type '() => Promise<ReactWebComponent<DeepChat, { onactivate: string; onchange: string; }>>' is not assignable to parameter of type 'DynamicOptions<Omit<HTMLAttributes, "onchange" | "onError" | "onactivate" | "connect" | "directConnection" | "webModel" | "requestBodyLimits" | ... 52 more ... | "attributeChangedCallback"> & EventListeners<...> & Partial<...> & RefAttributes<...>> | Loader<...>'.\n Type '() => Promise<ReactWebComponent<DeepChat, { onactivate: string; onchange: string; }>>' is not assignable to type '() => LoaderComponent<Omit<HTMLAttributes, "onchange" | "onError" | "onactivate" | "connect" | "directConnection" | "webModel" | "requestBodyLimits" | ... 52 more ... | "attributeChangedCallback"> & EventListeners<...> & Partial<...> & RefAttributes<...>>'.\n Type 'Promise<ReactWebComponent<DeepChat, { onactivate: string; onchange: string; }>>' is not assignable to type 'LoaderComponent<Omit<HTMLAttributes, "onchange" | "onError" | "onactivate" | "connect" | "directConnection" | "webModel" | "requestBodyLimits" | "requestInterceptor" | ... 51 more ... | "attributeChangedCallback"> & EventListeners<...> & Partial<...> & RefAttributes<...>>'.\n Type 'ReactWebComponent<DeepChat, { onactivate: string; onchange: string; }>' is not assignable to type 'ComponentType<Omit<HTMLAttributes, "onchange" | "onError" | "onactivate" | "connect" | "directConnection" | "webModel" | "requestBodyLimits" | ... 52 more ... | "attributeChangedCallback"> & EventListeners<...> & Partial<...> & RefAttributes<...>> | ComponentModule<...>'.\n Type 'ForwardRefExoticComponent<Omit<HTMLAttributes, "onchange" | "onError" | "onactivate" | "connect" | "directConnection" | "webModel" | "requestBodyLimits" | "requestInterceptor" | ... 51 more ... | "attributeChangedCallback"> & EventListeners<...> & Partial<...> & RefAttributes<...>>' is not assignable to type 'FunctionComponent<Omit<HTMLAttributes, "onchange" | "onError" | "onactivate" | "connect" | "directConnection" | "webModel" | "requestBodyLimits" | "requestInterceptor" | ... 51 more ... | "attributeChangedCallback"> & EventListeners<...> & Partial<...> & RefAttributes<...>>'.\n Type 'import("/Users/vmorilla/devel/std/nextjs/athena-gpt/node_modules/@lit-labs/react/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.\n Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.\n Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'."

My package.json file looks like this:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "deep-chat-react": "^2.0.1",
    "next": "15.0.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^8",
    "eslint-config-next": "15.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

[OvidijusParsiunas]

I have copied your package config and it appears to work fine for me.

Is this for the app router example?

Also, could you try to remove the node_modules directory and the package-lock.json file, then reinstalling all of your dependencies via npm i. If the issue still occurs can you give me any more information to reproduce it.

Thankyou!

[vmorilla]

Yes, this is for the app router example. The behaviour is the same after removing modules and package-lock.json and reinstalling dependencies.

Some additional information:
ts-config.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

And the file producing the error: page.tsx

'use client';

import React from 'react';
import { usePathname } from 'next/navigation';
import dynamic from 'next/dynamic';


export default function Page() {
    const path = usePathname();
    const segments = path.split('/');
    const id = segments[segments.length - 1];
    console.log('id:', id);

    // need to import the component dynamically as it uses the 'window' property
    const DeepChat = dynamic(
        () => import('deep-chat-react').then((mod) => mod.DeepChat),
        {
            ssr: false,
        }
    );
    return (
        <>
            <main>
                <h1>Deep Chat</h1>
                <DeepChat
                    demo={true}
                    style={{ borderRadius: '10px' }}
                    textInput={{ placeholder: { text: 'Welcome to the demo!' } }}
                />
            </main>
        </>
    );
}

[OvidijusParsiunas]

Hey @vmorilla.
I originally thought it was a compiler/runtime issue, hence I thought nothing was happening.
But I can see that it is actually a TypeScript error - specifically caused by "@types/react" and "@types/react-dom" versions "^19.0.0"+.

The deep-chat-react package is built using the lit/react package which is currently using React version 18, hence I believe that this could be causing the issue. There is currently a PR open to widen the range to version 19. Once this happens I hope it will also fix the issue you are seeing in NextJs. Hence, we have to keep our eye on it.

[OvidijusParsiunas]

In the meanwhile you can use the following TypeScript workaround:

import {DeepChat as DeepChatCore} from 'deep-chat';

const DeepChat = dynamic(
    () => import('deep-chat-react').then((mod) => mod.DeepChat as React.ComponentType<Partial<DeepChatCore>>),
    {ssr: false});

To note, you will also need to change style properties to chatStyle.