React firebase error after build and deploy SyntaxError: expected expression, got '<'

Question

i'm trying to deploy my react app through firebase but after deploying i get a blank page and the SyntaxError: expected expression, got '<'. i think this is because it's reading the < from html but i'm not sure how to solve this. below is the index.html form my build folder which is initialized as the source for firebase

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link href="../src/App.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:900" rel="stylesheet">
    <link rel="manifest" href="/CV/manifest.json">
    <link rel="shortcut icon" href="/CV/favicon.ico">
    <title>Lorenzo Wijtman</title>
    <link href="/CV/static/css/main.1b15713e.css" rel="stylesheet">
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="/CV/static/js/main.1b785adb.js"></script>
</body>

</html>

my firebase.json content below

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This is because route rewrite. Your all route request goes to index.html whatever it's javascript or css. You need to fix this in firebase deploy configuration. — Kishan Mundha
– Kishan Mundha, Commented Jun 2, 2018 at 16:55
thank you for the reply, but what exactly do i need to change in the deploy configuration? — Lorenzo Wijtman
– Lorenzo Wijtman, Commented Jun 2, 2018 at 17:04

Frank van Puffelen · Accepted Answer · 2018-06-02 23:45:59Z

1

Your HTML contains this script include:

<script type="text/javascript" src="/CV/static/js/main.30b4dcd1.js"></script>

If you try to load this URL, you will see that you're getting back your original HTML, instead of a JavaScript file. Since you told the browser to expect JavaScript, it is complaining about the angular brackets.

It looks like you're not deploying a /CV/static/js/main.30b4dcd1.js. Since you're telling Firebase Hosting to rewrite everything to /index.html, that's what it does when there is no matching file for a URL.

answered Jun 2, 2018 at 23:45

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React firebase error after build and deploy SyntaxError: expected expression, got '<'

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related