如何在Remix中使用react-textarea-code-editor？ESM导入错误求助

问题根源 #

报错显示rehype（react-textarea-code-editor的依赖）是纯ESM模块，但在CommonJS环境下被require()加载，导致模块系统冲突。仅打包编辑器本身不足以解决问题，需处理其依赖链中的ESM模块。

解决方案 #

1. 扩展serverDependenciesToBundle配置 #

在remix.config.js中，不仅要包含编辑器，还要加入它的ESM依赖项：

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  serverDependenciesToBundle: [
    "@uiw/react-textarea-code-editor",
    "rehype",
    "rehype-parse",
    "rehype-stringify",
    "unified",
    "unist-util-visit"
  ],
  // 其他原有配置...
};

这样Remix会把这些ESM模块一起打包，转换为服务端可识别的格式。

2. 强制编辑器仅在客户端渲染 #

编辑器是纯UI组件，不需要服务端渲染，直接让它只在客户端加载：

方法一：使用remix-utils的clientOnly

import { clientOnly } from "remix-utils/client-only";

const CodeEditor = clientOnly(() => import("@uiw/react-textarea-code-editor"));

export default function CodeEditorPage() {
  return (
    <div>
      <CodeEditor
        value="console.log('Hello World');"
        onChange={(val) => console.log(val)}
        language="javascript"
      />
    </div>
  );
}

方法二：动态导入+禁用SSR

import { lazy, Suspense } from "react";

const CodeEditor = lazy(() => import("@uiw/react-textarea-code-editor"));

export default function CodeEditorPage() {
  return (
    <Suspense fallback={<div>加载编辑器...</div>}>
      <CodeEditor
        value="console.log('Hello World');"
        onChange={(val) => console.log(val)}
        language="javascript"
      />
    </Suspense>
  );
}

// 禁用当前路由的SSR
export const ssr = false;

3. 清理缓存并重建 #

删除旧依赖和缓存，重新安装后重启服务：

# 删除依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装
npm install
# 带清除缓存启动开发服务
npm run dev -- --clear-cache

4. 检查Node.js版本 #

确保Node.js版本≥14.13.0或16.x，这些版本对ESM和动态import()的支持更完善。

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