React项目生成动态sitemap时出现import语句外部使用错误

错误原因 #

你的routes.js使用了ES模块语法（import/export）且包含JSX代码，Node.js默认的CommonJS模块系统无法直接解析，同时Node环境不支持React的JSX语法，导致执行generate-sitemap.js时抛出SyntaxError: Cannot use import statement outside a module错误。

解决方案 #

方案一：拆分纯路由配置（推荐，无额外依赖） #

这种方法将路由路径与React组件分离，让Node.js可以直接读取纯路由配置文件。

1. 创建纯路由配置文件
   在src目录下新建routes-config.js，只存放路由路径信息：

const routesConfig = [
  { path: "/" },
  { path: "/NATA_Application_Form_2025" },
  { path: "/Application-form-Nata-Coaching" },
  { path: "/nata-cutoff-calculator" },
  { path: "/NATA_Coaching_center_near_me_address" },
  { path: "/NATA-coaching-centers-nearby" },
  { path: "/faqs" },
  { path: "/Premium_Books" },
  { path: "/NATA_Free_Books" },
  { path: "/Free-Nata-Class-books-online-registration" },
];

module.exports = routesConfig;

2. 修改原routes.js，关联组件
   更新src/routes.js，导入纯配置并绑定对应组件：

import React from "react";
import { HomePage } from "./Pages/Home/Home.js";
import ApplicationPage from "./Pages/ApplicationFresh/ApplicationPage.js";
import CutoffPage from "./Pages/CutoffCalc/Cutoff.js";
import ContactPage from "./Pages/ContactUs/ContactPage.js";
import FaqsPage from "./Pages/Faqs/FaqSection.js";
import PremiumBooks from "./Pages/Books/PremiumBooks.js";
import FreeBooks from "./Pages/Books/FreeBooks.js";
import NotFound from "./Pages/Error/Notfound.js";
import routesConfig from "./routes-config.js";

const routes = routesConfig.map(route => {
  switch(route.path) {
    case "/":
      return { ...route, element: <HomePage /> };
    case "/NATA_Application_Form_2025":
    case "/Application-form-Nata-Coaching":
      return { ...route, element: <ApplicationPage /> };
    case "/nata-cutoff-calculator":
      return { ...route, element: <CutoffPage /> };
    case "/NATA_Coaching_center_near_me_address":
    case "/NATA-coaching-centers-nearby":
      return { ...route, element: <ContactPage /> };
    case "/faqs":
      return { ...route, element: <FaqsPage /> };
    case "/Premium_Books":
      return { ...route, element: <PremiumBooks /> };
    case "/NATA_Free_Books":
    case "/Free-Nata-Class-books-online-registration":
      return { ...route, element: <FreeBooks /> };
    default:
      return route;
  }
});

// 添加404路由
routes.push({ path: "*", element: <NotFound /> });

export default routes;

3. 更新generate-sitemap.js
   修改生成脚本，引入纯路由配置，并补充完整域名（sitemap要求绝对路径）：

const fs = require("fs");
const routesConfig = require("./src/routes-config.js");

const sitemapRoutes = routesConfig.map((route) => {
  return {
    url: route.path,
    changefreq: "weekly",
    priority: 0.8,
  };
});

// 替换成你的网站实际域名
const baseUrl = "https://your-domain.com";

const sitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${sitemapRoutes
    .map((route) => {
      return `
        <url>
          <loc>${baseUrl}${route.url}</loc>
          <changefreq>${route.changefreq}</changefreq>
          <priority>${route.priority}</priority>
        </url>
      `;
    })
    .join("")}
</urlset>`;

fs.writeFileSync("./public/sitemap.xml", sitemapContent);

console.log("Sitemap generated successfully!");

执行npm run generate-sitemap即可生成正确的sitemap。

方案二：用Babel转译ES模块与JSX #

如果不想拆分路由配置，可以通过Babel将ES模块和JSX代码转译为Node.js可执行的代码。

1. 安装Babel依赖

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

2. 创建Babel配置文件
   在项目根目录新建.babelrc：

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

3. 修改脚本命令
   更新package.json中的generate-sitemap脚本：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "generate-sitemap": "babel-node generate-sitemap.js"
}

4. 调整generate-sitemap.js（可选）
   可以改为ES模块语法，也可保留CommonJS：

import fs from "fs";
import routes from "./src/routes.js";

// 过滤掉404通配路由
const sitemapRoutes = routes
  .filter(route => route.path !== "*")
  .map((route) => {
    return {
      url: route.path,
      changefreq: "weekly",
      priority: 0.8,
    };
  });

const baseUrl = "https://your-domain.com";

const sitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${sitemapRoutes
    .map((route) => {
      return `
        <url>
          <loc>${baseUrl}${route.url}</loc>
          <changefreq>${route.changefreq}</changefreq>
          <priority>${route.priority}</priority>
        </url>
      `;
    })
    .join("")}
</urlset>`;

fs.writeFileSync("./public/sitemap.xml", sitemapContent);

console.log("Sitemap generated successfully!");

执行npm run generate-sitemap即可完成生成。

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