ESM Compatibility Issue with nanoid in Internal Dependency

[DSamuelHodge]

I'm encountering an ESM compatibility issue when integrating CopilotKit into my Next.js project. The root cause seems to be the use of require('nanoid') within CopilotKit's internal dependencies. This conflicts with the ESM import system used in modern Next.js setups.

Error Details:

Error Message: "Module not found: ESM packages (nanoid) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals"
Call Trace: (Include the import trace you provided)

Steps to Reproduce:

Create a standard Next.js project.
Install the latest version of CopilotKit (@copilotkit/react-core, etc.)
Attempt to use a CopilotKit component within the Next.js application.

Conflicting nanoid --versions
north@0.1.0 /Users/argosmacdevelopmentsystem/north
├─┬ @copilotkit/react-core@0.20.1
│ └── nanoid@4.0.2
├─┬ @copilotkit/react-textarea@0.30.1
│ └── nanoid@4.0.2
├─┬ @copilotkit/react-ui@0.17.1
│ └── nanoid@4.0.2
├── nanoid@5.0.6
├─┬ next@14.1.2
│ └─┬ postcss@8.4.31
│ └── nanoid@3.3.7
└─┬ postcss@8.4.35

Workarounds:

I've temporarily enabled experimental.esmExternals: 'loose' in my Next.js config, but I understand this isn't optimal for performance and long-term use. (Quit working).

Proposed Solution:

Updating the internal dependency that uses require('nanoid') to utilize ESM-style imports instead (import { nanoid } from 'nanoid') would align CopilotKit better with modern JavaScript /Typescript practices.

I greatly appreciate the CopilotKit project. Thank you for considering this issue and working towards improved compatibility!

[ataibarkai]

@DSamuelHodge thank you for this detailed bug report.

I double checked and I'm unable to reproduce this issue with a fresh Next project (created via create-next-app).
Let's figure out what's different about your setup.

Can you please list

• which package manager you are using (and which version), i.e. npm, yarn, etc.?
• how you created the next app? (e.g. create-next-app)
• which OS you are on?
• are you seeing this with an existing project, or a fresh project?
• Anything that might be unique on your setup

Also, please feel free to book a support session with me here, it might be easier to get to the bottom of this 'live' vs asynchronously

[DSamuelHodge]

Which package manager you are using (and which version), i.e. npm, yarn, etc.?
-I used bun

How you created the next app? (e.g. create-next-app)
-Yes, create-next-app@latest

Which OS you are on?
-MacOS Monterey V. 12.7.4

are you seeing this with an existing project, or a fresh project?
-Existing SaaS "North CRM" project.

Anything that might be unique on your setup.
-Radix, Tailwind, Shadcn, Next.js v14.1.2, Prisma, Stripe, Clerk.

I will also book a support session. Thanks in advance.

[DSamuelHodge]

This issue was not able to be duplicated, seemed to be resolved when I had uninstalled and re-installed CopilotKit.

Note: The TailwindCSS v4 isn't just a plugin anymore, the latest update implements a Unified Toolchain removing the need for PostCSS and Autoprefixer, replaced with Built-in CSS processor.

Unified toolchain
Tailwind CSS v4 isn’t just a plugin anymore — it’s an all-in-one tool for processing your CSS. We’ve integrated Lightning CSS directly into the framework so you don’t have to configure anything about your CSS pipeline.

Built-in @import handling — no need to setup and configure a tool like postcss-import.
Built-in vendor prefixing — you don’t have to add autoprefixer to your projects anymore.
Built-in nesting support — no plugins needed to flatten nested CSS, it works out of the box.
Syntax transforms — modern CSS features like oklch() colors and media query ranges are transpiled to syntax with better browser support.
We’re still shipping a PostCSS plugin, but we’re also exploring first-party bundler plugins, and we’re shipping an official Vite plugin with this first alpha release that you can try out today.

[alliumdev]

I'm facing the same issue in a Next app inside a NX monorepo.

[jazarja]

Same issue on my nextjs web app

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Works\node_modules\.pnpm\nanoid@4.0.2\node_modules\nanoid\index.js from C:\Works\node_modules\.pnpm\@copilotkit+react-core@0.22.0_react@18.2.0\node_modules\@co
pilotkit\react-core\dist\index.js not supported.
Instead change the require of C:\Works\node_modules\.pnpm\nanoid@4.0.2\node_modules\nanoid\index.js in C:\Works\node_modules\.pnpm\@copilotkit+react-core@0.22.0_react@18.2.0\node_modules\@copilotkit\react-core\
dist\index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Works\node_modules\.pnpm\@copilotkit+react-core@0.22.0_react@18.2.0\node_modules\@copilotkit\react-core\dist\index.js:149:21)
    at @copilotkit/react-core (C:\Works\apps\web\.next\server\pages\_document.js:260:18)
    at __webpack_require__ (C:\Works\apps\web\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///./src/pages/_app.tsx:15:80)
    at __webpack_require__.a (C:\Works\apps\web\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/pages/_app.tsx:1:21)
    at ./src/pages/_app.tsx (C:\Works\apps\web\.next\server\pages\_document.js:22:1)
    at __webpack_require__ (C:\Works\apps\web\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///../../node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F_document&preferredRegion=&absolutePag
ePath=private-next-pages%2F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:23:80)
    at __webpack_require__.a (C:\Works\apps\web\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///../../node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F_document&preferredRegion=&absolutePag
ePath=private-next-pages%2F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:1:21)
    at ../../node_modules/.pnpm/next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F_document&preferredRegion=&absolutePagePath=private-next-pages%2
F_document&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (C:\Works\apps\web\.next\server\pages\_document.js:44:1)
    at __webpack_require__ (C:\Works\apps\web\.next\server\webpack-runtime.js:33:43)
    at __webpack_exec__ (C:\Works\apps\web\.next\server\pages\_document.js:512:39)
    at C:\Works\apps\web\.next\server\pages\_document.js:513:28
    at Object.<anonymous> (C:\Works\apps\web\.next\server\pages\_document.js:516:3)
    at requirePage (C:\Works\node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\require.js:112:75)
    at C:\Works\node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\load-components.js:76:65
    at async Promise.all (index 0)
    at async loadComponentsImpl (C:\Works\node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\load-components.js:75:33)
    at async DevServer.findPageComponentsImpl (C:\Works\node_modules\.pnpm\next@13.4.19_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\next-server.js:439:36) {
  code: 'ERR_REQUIRE_ESM',
  page: '/'
}

[JimmyLv]

same here

[jazarja]

My workaround

export const CopilotKit = dynamic(
    () => import('@copilotkit/react-core').then((w) => w.CopilotKit),
    {
      ssr: false
    }
);

export const CopilotSidebar = dynamic(
    () => import('@copilotkit/react-ui').then((w) => w.CopilotSidebar),
    {
      ssr: false
    }
);

Instead of

import { CopilotKit } from '@copilotkit/react-core';
import { CopilotSidebar } from '@copilotkit/react-ui';

And add the packages into next.config.js

transpilePackages: ['@copilotkit/react-core', '@copilotkit/react-ui'],

[mme]

@DSamuelHodge

This should be fixed in the latest version:

    "@copilotkit/react-core": "^0.25.0",
    "@copilotkit/react-textarea": "^0.35.0",
    "@copilotkit/react-ui": "^0.22.0",
    "@copilotkit/shared": "^0.7.0",

Please let me know if you still experience issues related to ESM compatibility

[DSamuelHodge]

@mme, I will try later the latest version today and report back ASAP. @jazarja I will also test your workaround in my Next.js project as an alternative.