Error "The keyword 'interface' is reserved" trying to use chat component in another project

[Cristóbal Carnero Liñán]

I created a new project with:

npx create-next-app@latest

Installed this repo as a dependency:

npm install mckaywrigley/chatbot-ui-lite#main

In the file pages/index.tsx I added this line on top:

import { Chat } from "ai-chatbot-starter/components/Chat/Chat";

Then I inserted the component in the HTML of the home function:

        <Chat
        />

When I run the code (npm run dev) I get this error:

./node_modules/ai-chatbot-starter/components/Chat/Chat.tsx
Module parse failed: The keyword 'interface' is reserved (8:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { ResetChat } from "./ResetChat";
| 
> interface Props {
|   messages: Message[];
|   loading: boolean;

Sometimes I get a similar error in ResetChat.tsx.

I suppose there is a configuration issue in my project or in this one, but I the few solutions I found on Google didn't work for me.

Also, I'm not sure this repo is ready to be imported into other projects.

[Cristóbal Carnero Liñán]

Solved.

I had to add a line to my next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ['ai-chatbot-starter'], // This line
}

module.exports = nextConfig