NextJS自定义服务器中导入React组件生成邮件HTML报错求助

你遇到的核心问题是Node.js原生无法解析JSX语法，同时CommonJS模块的require和ES模块的export default存在兼容冲突，导致导入组件时失败。以下是具体解决步骤：

1. 安装JSX编译依赖 #

Node.js本身不支持JSX，需要用Babel编译，先安装必要依赖：

npm install @babel/core @babel/preset-react @babel/register --save-dev

2. 配置Babel #

在项目根目录创建.babelrc文件，添加React预设：

{
  "presets": ["@babel/preset-react"]
}

3. 调整模块导入/导出方式 #

方式一：使用ES模块（推荐） #

• 在项目根目录的package.json中添加：

  "type": "module"
  

• 控制器文件改用import语法导入组件：

  import React from 'react';
  import ReactDOMServer from 'react-dom/server';
  import MessageTemplate from '../components/emails/MessageTemplate.js';
  
  // 渲染组件为静态HTML
  const emailHtml = ReactDOMServer.renderToString(<MessageTemplate />);
  

方式二：保留CommonJS模块 #

• 修改MessageTemplate.js为CommonJS导出格式（避免JSX，改用React.createElement）：

  const React = require('react');
  
  const MessageTemplate = () => {
    return React.createElement('div', null, 'MessageTemplate');
  };
  
  module.exports = MessageTemplate;
  

• 控制器文件直接导入：

  const React = require("react");
  const ReactDOMServer = require("react-dom/server");
  const MessageTemplate = require("../components/emails/MessageTemplate.js");
  
  // 渲染为HTML
  const emailHtml = ReactDOMServer.renderToString(React.createElement(MessageTemplate));
  

4. 启动项目时加载Babel #

如果使用ES模块或保留JSX写法，启动项目时需要让Node.js通过Babel编译代码，修改启动命令：

node -r @babel/register 你的入口文件名.js

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