NextJs使用@persian-tools/persian-mobile-datepicker遇模块语法错误求助

核心解决方案 #

问题根源是@persian-tools/persian-mobile-datepicker发布的是未转译的ES模块，且Next.js 13 App目录下组件默认是服务器组件，导致服务器端渲染时无法正确解析模块。按以下步骤修复：

1. 标记组件文件为客户端组件
   在引入该日期选择器的文件最顶部添加'use client'指令，强制组件在客户端环境执行：

'use client';

import PersianMobileDatepicker from '@persian-tools/persian-mobile-datepicker';
import '@persian-tools/persian-mobile-datepicker/dist/style.css';

export default function DatePickerComponent() {
  return <PersianMobileDatepicker />;
}

2. 配置Next.js转译第三方包
   修改next.config.js，添加transpilePackages让Next.js处理这个未转译的ES模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
  transpilePackages: ['@persian-tools/persian-mobile-datepicker'],
}

module.exports = nextConfig;

为什么之前的尝试没生效？ #

• 动态导入如果没配合'use client'，服务器端仍会尝试解析模块，触发错误。
• 在package.json添加"type": "module"会和Next.js的模块解析逻辑冲突，App目录模式下不支持该配置。
• 修改tsconfig.json的module为commonjs会破坏Next.js对ES模块的原生处理，反而引发更多兼容性问题。

内容的提问来源于stack exchange，提问作者behi