Clauds response

A

Anonymous

2 min read

This error trace suggests you're using older React components (specifically rc-time-picker and rc-animate) that rely on CommonJS modules in a Next.js 14 project, which primarily uses ES Modules. This is a common issue when using older packages with modern Next.js.

Here are a few solutions, from most recommended to least:

  1. Use Modern Alternatives

javascript

Copy

// Instead of rc-time-picker, use: import { TimeField } from '@mui/x-date-pickers/TimeField'; // or import { TimePicker } from 'antd'; // if you're using Ant Design

  1. Add Package to Transpile Settings In your next.config.js:

javascript

Copy

/** @type {import('next').NextConfig} */ const nextConfig = { transpilePackages: ['rc-time-picker', 'rc-animate', 'rc-trigger', 'component-classes'], } module.exports = nextConfig

  1. Add Module Resolution Settings In your next.config.js:

javascript

Copy

/** @type {import('next').NextConfig} */ const nextConfig = { webpack: (config) => { config.resolve.fallback = { ...config.resolve.fallback, module: false, }; return config; }, } module.exports = nextConfig

  1. Force CommonJS Resolution In your next.config.js:

javascript

Copy

/** @type {import('next').NextConfig} */ const nextConfig = { experimental: { esmExternals: false }, } module.exports = nextConfig

The best long-term solution is to migrate to modern alternatives that properly support ES Modules. If you're specifically using rc-time-picker, consider switching to a more modern time picker component that's fully compatible with Next.js 14.

Would you like me to suggest some specific modern alternatives for the time picker component?