I've been getting an error saying I cannot use import statement outside of a module, I've set the package json in my backend folder to type module and don't believe I have a syntax error when I import app from my front end. What could be the issue?
This is my 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!")
})
And this is my 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
I am not using any transpilers, could that be an issue or is there another way to achieve universal rendering
If you've already set
"type": "module"inpackage.json, you can try explicitly annotating your files with the.mjsextension.What is the difference between .js and .mjs files?
You can also try using Babel to transpile your code to older versions of JavaScript (https://babeljs.io/)