How to handle nested react-router routes when serving bundle.js with express?

Question

I am using webpack-dev-server at the dev side for my react-redux app and for production, I am bundling all JS files into one bundle.js . Now I created a basic express app and serving the bundle.js and index.html using the following code.

server.js

app.use(express.static('app'));

app.get('*', (req, res) => {
res.sendFile(__dirname + "/app/" + "index.html");
});

The following is my React component for routes:

return (
        <div>
            <Router>
                <div>
                    <Header/>
                    <Route exact path="/" component={Home}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/signup" component={Signup}/>
                    <Route path="/forgetPassword" component={ForgetPassword}/>
                    <Route path="/wallets" component={Wallets}/>
                    <Route path="/orders" component={Orders}/>
                    <Route path="/settings" component={Settings}/>
                    <Route path="/markets" component={MarketsList}/>
                    <Route path="/market/:marketPair" component={MarketDetail}/>
                    <Route path="/resetPassword/:token" component={ResetPassword}/>
                </div>
            </Router>
        </div>
    );

The problem is for the nested routes. The single-level routes like login and signup work fine. But the routes like /market/:marketPair and /resetPassword/:token give the following error at the browser console:

bundle.js:1 Uncaught SyntaxError: Unexpected token <

When clicked bundle.js , it shows my index.html file.

Can anyone help?

lovethebomb · Accepted Answer · 2018-09-18 09:35:32Z

1

I can see 2 potential issues:

Path for bundle.js is relative
Express doesn't know about the routes

I'm not sure how you create your index.html file and if it's processed by webpack or not, but:

If bundle.js is loaded correctly from the top-level routes /login, /signup, etc, but not by routes like /resetPassword/:token, it's probably because the webpage tries to load /resetPassword/bundle.js, instead of /bundle.js.

If that's the case, check the path of bundle.js resource in your index.html.

answered Sep 18, 2018 at 9:35

lovethebomb

2936 silver badges13 bronze badges

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

3 Comments

SHIVAM SETHI Over a year ago

Yes. You're right! Its looking for resetPassword/bundle.js and that's where it crashes. But how to fix that?

lovethebomb Over a year ago

I do not know how you generate the index.html file, but let's say that you have this: <script src="bundle.js"></script> You instead want <script src="/bundle.js"></script>

SHIVAM SETHI Over a year ago

Yes. Adding a slash helped. I got it. Thanks Thank you so much

Umair Ahmed · Accepted Answer · 2018-09-18 08:50:50Z

0

This is definitely an issue with the webpack config. Make sure that the file is bundled correctly, and you have an output folder with all the correct files that your HTML div is expecting. Running the webpack may start the bundle if its not configured in your package.json

Check your config file for the file name, the id that your div expects and other mismatch in names

answered Sep 18, 2018 at 8:50

Umair Ahmed

5874 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to handle nested react-router routes when serving bundle.js with express?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related