React SyntaxError: Unexpected token '<'

bluepuper 0
Viewed 82

When I move to all subroutes of /company/ by react-router-dom's push - all is ok. But right when I'm trying to refresh the page being on these routes I provided you - I see just white screen and error logs in a console

[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (bundle.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (vendors~main.chunk.js:1)
[Error] SyntaxError: Unexpected token '<'
    (anonymous function) (main.chunk.js:1)

And it turns out that these bundle, vendors and main.chunk js files are just containing html code that starts from <!DOCTYPE html> - so of course there should be such error. Previously it worked fine, but seems like after changing some page routes, it starts to give that error. I don't know whether I should add these paths to any config or something, but actually can't find the solution.

Get this refreshing on error paths: enter image description here

And this one, refreshing on old paths which work fine: enter image description here

This is my root folder and there is no webpack config I think(still can't get some moments, I'm not solid at frontend):

enter image description here

Here is my Switch component:

<Switch>
    <Route exact path={'/company/companies'} component={Companies} />
    <Route exact path={'/company'} component={CompanyInfo} />
    <Route exact path={['/company/workspace', '/company/workspace/:directoryId']}>
        <Workspace setWithHistory={setWithHistory} />
    </Route>
    <Route exact path={'/company/units'}>
        <Units setWithHistory={setWithHistory} />
    </Route>
    <Route exact path={'/company/units/:id'} component={SingleUnit} />
    <Route path={'/company/employees'}>
        <Employees setWithHistory={setWithHistory} />
    </Route>
    <Route exact path={'/company/calendar'} component={EventCalendar}>
        <EventCalendar setWithHistory={setWithHistory} isCompanyDefined={true}/>
    </Route>
    <Route exact path={'/company/archive'}>
        <Archive setWithHistory={setWithHistory} />
    </Route>
    <Route exact path={'/company/workplan'} component={WorkplanTable} >
        <WorkplanTable companyId={company.id} isCompanyDefined={true}/>
    </Route>
    <Route exact path={'/company/signing-control'} component={SigningControl} >
        <SigningControl />
    </Route>
</Switch>

and that one /company route is working fine without errors

That switch component locating here: enter image description here

reactjs javascript
1 Answers

An SPA server should return the index.html for all paths that aren't real files, so it's understandable that you'd see a HTML page for an otherwise not-found path. This is so the SPA application can do routing itself.

Right now it looks like you're probably on https://vgokna.ru/company/, and that page attempts to load scripts from . instead of /, so https://vgokna.ru/company/static/js/... gets requested (and since it would otherwise 404, the server returns the index.html page). You'll need to make sure the HTML page attempts to load scripts (and other assets) from the server root instead of the page's directory. IOW, if you'd have

<script src="static/js/bundle.js">

you'd need

<script src="/static/js/bundle.js">

instead.

AKX0
Related