React browser router getting syntax error unexpected token '<'

Question

I have a react website that works fine locally and uses react browser router. When I build it and place the build folder on my hosted webhost (dreamhost) The routing to other pages does not work. The app.js

    <Router>
      <Header />
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
      <Footer />
    </Router>

I followed this guide: https://www.andreasreiterer.at/fix-browserrouter-on-apache/

Which suggested adding an .htaccess file with

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

So after adding the htaccess file with those lines, my hosted react website now correctly routes to pages (whereas before it was a 404). The only problem is now when I go to those pages I just get console errors that say:

2.6c645178.chunk.js:1 Uncaught SyntaxError: Unexpected token '<' (at 2.6c645178.chunk.js:1:1)
main.2e7dd33a.chunk.js:1 Uncaught SyntaxError: Unexpected token '<' (at main.2e7dd33a.chunk.js:1:1)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Based on things I found online, it sounds like it is treating the pages as html and not recognizing it as javascript. Does anyone have any advice for how I might solve this? Suggestions I saw mentioned adding the lang= to the script tag. But in my react app I don't have any script tag.

This isn't an issue with react-router-dom, or even really react. The server hosting the app and serving up page requests needs to be sufficiently configured to redirect all page requests to to the root index.html file so your React app can load and mount, and handle routing to the correct app page internally. I'm unfamiliar with "dreamhost" so it's not clear if using apache setup/configuration is correct. Take a look at the CRA deployment docs and you'll find many different server environments need different setups/configurations. — Drew Reese
– Drew Reese, Commented Sep 14, 2022 at 18:26
RewriteRule ^ index.html [QSA,L]T73560 - Where is that T73560 coming from? Is that just a typo in your question? "it sounds like it is treating the pages as html and not recognizing it as javascript" - What is the response? Any error response from the server will be a text/html response. — MrWhite
– MrWhite, Commented Sep 14, 2022 at 19:39
Yes that was a typo, not sure how I wrote that in there. I'm not sure of the server response, I just looked at the console logs. But I was able to figure out the solution was a missing / in my homepage in the package.json. So instead of {URL}/contact, it was treating it like {URL}contact. — sephiroth
– sephiroth, Commented Sep 15, 2022 at 0:53

sephiroth · Accepted Answer · 2022-09-15 00:52:11Z

4

I figured out the solution. After trying adding a basename (as suggested by one commentor) I realized the routing was working because the pages worked in the subdirectory with the base name.

It turned out on homepage in the package.json I just had to add a "/". So instead of "homepage" : "http://website.com" I changed it to http://website.com/.

Before I had "homepage": "." Because certain guides had suggested putting that there when deploying to a webserver so it used any folder. Apparently I had to have my websites public URL, along with the / at the end to fix the routing.

answered Sep 15, 2022 at 0:52

sephiroth

1333 silver badges11 bronze badges

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

Comments

Aadil · Accepted Answer · 2022-09-14 18:25:07Z

2

Please go through react router docs and search for basename prop on Router component
The error you are getting is maybe somewhere your JSON isn't being parsed properly. try locating JSON.parse() in your code and see if you can fix it somehow

answered Sep 14, 2022 at 18:25

Aadil

1467 bronze badges

1 Comment

sephiroth Over a year ago

Thank you, your advice helped me figure out the solution! First I added a basename and everything worked. Then I tried making the basename just "/" and that still worked. So I realized all I had to do was add an "/" at the end of the homepage in the package.json.

Collectives™ on Stack Overflow

React browser router getting syntax error unexpected token '<'

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related