2

i am working react.js project on my local its working fine after build development and try to serve static files it's throwing this error and also in production. As i try different solutions but nothing working. As i am not using any script tag , i am not able to figure out the problem.

enter image description here

<html lang="en">

  <head>
    <title>React App</title>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" type="text/css" charset="UTF-8"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"
      type="text/css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <style>
      :root {
        --brand-base-primary: green;
        --brand-text-primary: yellow;
      }

    </style>
  </head>

  <body dir="ltr">
    <style id="updateStyle"></style>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

</html>

//Manifest.json

{
  "short_name": "Rest Hero",
  "name": "Rest Hero",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
Andaman
  • 295
  • 3
  • 10

2 Answers2

0

The "Uncaught SyntaxError: Unexpected token '<' error occurs when JavaScript tries to execute a JavaScript file or module that is not actually a JavaScript file or module. This usually occurs when one of the JavaScript or module files is imported as a plain text file or as an HTML file.

Double check that you have included the correct JavaScript file or module. Make sure you put the code in the right place and make sure there are no syntax errors in the code. If there are still errors, check for errors in the use of quotation marks or HTML tags in the code

But if you use Vite technology, try changing the file extension to .jsx

khoeriilham
  • 1
-1

To fix this I had to update the homepage node in package.json

Original:

"version": "0.1.0",
  "homepage": "./",
  "private": true,

Instead use:

"version": "0.1.0",
  "homepage": "/",

  "private": true,

Hopefully this is able to help someone else out also

Pål
  • 11
  • 3