我一直得到一个错误,说我不能使用模块外的导入语句,我已经设置包json在我的后端文件夹类型模块,不相信我有一个语法错误,当我从我的前端导入应用程序。有什么问题吗?
这是我的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
我没有使用任何转译器,这可能是一个问题,还是有另一种方法来实现通用渲染
如果你已经在package.json
中设置了"type": "module"
,你可以尝试显式地用.mjs
扩展名注释你的文件。
.js和.mjs文件的区别是什么?
你也可以尝试使用Babel将你的代码转换为旧版本的JavaScript (https://babeljs.io/)