同构渲染遇cannot use import statement outside of a module错误求排查

一直遇到错误提示cannot use import statement outside of a module，已将后端文件夹的package.json设置为"type": "module"，且认为导入前端App时无语法错误，请问可能是什么问题？

没有使用任何转译器，这会不会是问题所在？或者有没有其他实现同构渲染的方式？

后端server.js代码 #

import express from "express"
import React from 'react'
import {renderToString} from 'react-dom/server'
import db from './db.js'
import App from '../frontend/src/App.js';
const app = express();

app.use(express.static('../frontend/public')); // added ../ to front end

app.get('*', (req, res) => {
  
  const html = renderToString(React.createElement(App));
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/index.js"></script>
      </body>
    </html>
  `);
});

app.listen(8800, ()=> {
  console.log("Connected to backend!")
})

前端App.js代码 #

import React from 'react';
import {Footer, Contact, WhoChawewo, Header} from './containers';
import {Navbar, Background} from './components';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import './App.css';

/* deleted div app */
const App = () => {
  return (
    <BrowserRouter>
   <Navbar />
    <Routes>
      
          <Route exact path='/' element={< Header />}> </Route>
          <Route path='/about' element={< WhoChawewo />}> </Route>
          <Route path='/contact' element={< Contact />}> </Route> 
   </Routes>
   <Footer/>

</BrowserRouter>


  )
}

export default App

核心问题：未转译前端代码是关键原因 #

你没使用转译器确实是问题所在。Node.js本身只能处理标准ES模块语法，但前端的JSX、CSS导入这类语法Node.js完全不识别——比如import './App.css'、<Header />这种JSX标签，Node.js直接执行会报错，这也是你看到cannot use import statement outside of a module的深层原因之一（表面是模块问题，实际是代码语法不兼容）。

另外还有几个可能的细节问题：

• 确认后端package.json的"type": "module"是否生效：检查文件是否在后端文件夹根目录，有没有拼写错误（比如写成"type": "modules"）。
• 导入前端文件的路径是否可靠：相对路径容易出错，建议用path模块拼接绝对路径，比如：

  import path from 'path';
  import App from path.resolve(__dirname, '../frontend/src/App.js');
  

解决方法：必须添加转译环节 #

要让Node.js识别前端的JSX和CSS导入，需要用转译工具处理代码，常用方案有两种：

方案1：用Babel转译 #

1. 安装依赖：

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

2. 在项目根目录创建.babelrc文件：

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

3. 修改启动命令：把node server.js改成babel-node server.js，或者在package.json的scripts里配置启动脚本。

方案2：用Webpack打包后端代码 #

将后端和前端需要的代码一起打包成Node.js可识别的文件，Webpack会自动处理JSX和模块导入问题。

替代的同构渲染方案 #

如果不想手动配置转译，可以直接用现成框架：

• Next.js：开箱即用的同构框架，无需手动配置后端和转译，写页面就能实现服务端渲染，上手成本极低。
• Remix：全栈同构框架，路由和数据处理更灵活，同样无需手动配置转译。

提醒：即使解决了模块问题，Node.js也无法直接解析JSX和CSS导入，转译是绕不开的步骤，用现成框架能大幅减少配置工作量。

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