React Redux bundle.js being thrown into request

I have an issue with how my React Redux SSR application is handling site navigation I have a route for list pages which will display different data depending on the params in the URL.

Routes.js file

export default [
  {
    ...App,
    routes: [
      {
        ...HomePage,
        path: '/',
        exact: true
      },
      {
        ...ListPage,
        path: '/list/:id',
        exact: true
      },

In my Index.JS file where my express backend is running I iterate through my routes directory to see the path(s) that matches the request path…

const app = express();
app.use(express.static('public'));
app.get('*', (req, res) => {
  const store = createStore(req);

  const promises = matchRoutes(Routes, req.path)
    .map(({ route }) => {
      console.log("Looking at Route: ", route);
      if (route.loadData) {
        const params = req.path.split('/');
        console.log('my params are: ', params)
        return route.loadData(store, params[2])

      }else{
        return null
      }
    })
    .map(promise => {
      if (promise) {
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve);
        });
      }
    });

  Promise.all(promises).then(() => {
    const context = {params: req.params};
    const content = renderer(req, store, context);

    if (context.url) {
      return res.redirect(301, context.url);
    }
    if (context.notFound) {
      res.status(404);
    }

    res.send(content);
  });
});

My understanding is that there should only be 2 things to iterate over, the App component Route, and the ListPage component Route it then calls their respective loadData() functions and the websites continues to run. However after it goes through the first 2 routes and populates my page with the relevant information the Index.js file gets called again and iterates through the routes but this time instead of having the URL that the user is trying to access it replaces it with “bundle.js” and I don’t understand what’s going on here. This is the output I get I would love to only have the top half of the output.

NOTE this image is taken from my console (I’ve combined both the client and server side output in 1 window) below I’ll include a screenshot of my config Files

Of course my code wasn’t expecting this as a path and the application breaks because it’s trying to get information on a list with the ID of “bundle.js” instead of a standard number.

Question can someone explain to me what my codes doing wrong here or if this is how it’s supposed to behave how I work around this I’d greatly appreciate it.

I’m currently trying to create my first SSR application so I’m new to this technology so I might be missing something obvious.

Answer

Upon further investigation I noticed that the file bundle.js that I could see in the console was referring to a file at location /list/bundle.js but my bundle was actually in my public directory so I had to modify the script Src so that it would refer to the http://localhost:3000/bundle.js after I did this app functioned how It was supposed.

Advertisement

Answer