React网站SSR构建报错：solid-js/web.template不是函数问题求助

问题根源 #

你的项目是React应用，但Webpack或Babel配置错误地将React JSX编译成了SolidJS的语法，导致服务端代码尝试调用SolidJS的template函数——而你并没有依赖SolidJS，因此抛出「不是函数」的错误。

解决步骤 #

• 检查Babel配置
  打开项目的.babelrc或babel.config.json，确保使用React的JSX预设，而非Solid的。正确配置示例：

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

  如果之前安装过Solid相关的Babel预设（如babel-preset-solid），直接卸载：

  npm uninstall babel-preset-solid
  

• 修正Webpack的JSX处理配置
  确保Webpack中处理.jsx/.js文件的babel-loader关联的是React预设，没有引入Solid的编译插件。同时卸载多余的Solid依赖：

  npm uninstall solid-js solid-js-web
  

• 确认服务端渲染代码使用React API
  检查server/index.js，确保服务端渲染调用的是ReactDOMServer的方法，比如renderToString或renderToPipeableStream，而非Solid的渲染函数。示例代码片段：

  import React from 'react';
  import ReactDOMServer from 'react-dom/server';
  import App from '../src/App';
  import express from 'express';
  
  const app = express();
  
  app.get('*', (req, res) => {
    const appHtml = ReactDOMServer.renderToString(<App />);
    res.send(`
      <!DOCTYPE html>
      <html>
        <head><title>React SSR App</title></head>
        <body>
          <div id="root">${appHtml}</div>
          <script src="/client-bundle.js"></script>
        </body>
      </html>
    `);
  });
  
  app.listen(3000, () => console.log('Server running on port 3000'));
  

• 清理缓存并重新构建
  删除旧的构建产物和依赖缓存，重新安装依赖并构建项目：

  rm -rf node_modules build
  npm install
  npm run build
  

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