0

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

VLAZ
  • 26,331
  • 9
  • 49
  • 67
  • 1
    Browsers don't understand JSX so you're going to have to use a transpiler if you want to use JSX. The immediate error here is probably caused by this line `` and would go away if you changed it to `` but would probably just be replaced by a different parsing error. – Aurast Jan 01 '23 at 03:59

1 Answers1

0

If you've already set "type": "module" in package.json, you can try explicitly annotating your files with the .mjs extension.

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/)

shreyasm-dev
  • 2,711
  • 5
  • 16
  • 34
  • Yes I've done it, even used Babel to transpile but it all ends up with the same import syntax error. I cannot find an answer –  Jan 01 '23 at 07:46