'Invalid or unexpected token error occurred when i integrate Node + ReactJS + react-helmet-async

I want to pass META description and title from server side by using react-helmet-async but when i import App.js component at that time this error occurred.If you have good option better than me, please let me know.I'm stucked with this problem please help me. Thanks in advance!

package.json

{
  "name": "dummy_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon -r esm server/index.js",
    "heroku-postbuild": "cd dummy-app && npm install && npm run build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "esm": "^3.2.25",
    "express": "^4.17.3",
    "nodemon": "^2.0.15",
    "react-helmet-async": "^1.0.7"
  },
  "engines": {
    "node": "16.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.9"
  }
}

server/index.js

import path from "path";
import { Helmet } from "react-helmet-async";
import cors from 'cors';
import express from "express";
import {fileURLToPath} from 'url';
import { appString } from "../dummy-app/src/App";

const PORT = process.env.PORT || 3001;

const app = express();

app.use(cors());
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);


// Have Node serve the files for our built React app
// app.use(express.static(path.resolve(__dirname, '../dummy-app/build')));

app.get('/*', (req, res) => {
  const helmet = Helmet.renderStatic();

  const html = `<!DOCTYPE html>
    <html lang="en">
      <head>
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
      </head>
      <body>
        <div id="root">
          ${ appString }
        </div>
      </body>
    </html>
  `
  res.send(html);
});

// All other GET requests not handled before will return our React app
// app.get('/*', (req, res) => {
//   res.sendFile(path.resolve(__dirname, '../dummy-app/build', 'index.html'));
// });

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

reactApp/src/App.js

import logo from './logo.svg';
import './App.css'
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { renderToString } from 'react-dom/server';

function App() {

  return (
    <div className="App">
      <HelmetProvider>
        <div className="App">
          <Helmet>
            <title>App Title</title>
            <meta name="description" content="App Description" />
            <meta name="theme-color" content="#008f68" />
          </Helmet>
        </div>
      </HelmetProvider>
    </div>
  );
}
export const appString = renderToString(<App/>);
export default App;

Error:

/PATH_TO_PROJECT/ReactApp/dummy_react/dummy-app/src/App.js:9
    <div className="App">
    ^

SyntaxError: Invalid or unexpected token
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)
[nodemon] app crashed - waiting for file changes before starting...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Invalid or unexpected token error occurred when i integrate Node + ReactJS + react-helmet-async

Sources

Related Questions