"Internal Server Error" when refreshing page or typing URL manually when using React Router

Question

I am having a problem that I have seen many questions for, but I can't find a solution that works for me.

This problem only happens when I push to Heroku and load it from the web. If i go to the root of my site (i.e. domain.com) the page loads. If I click around, the page rerenders with the correct components while changing the URL. If I refresh the page, type the URL, or navigate to the page via any way but a set of links that originated at the home page I get an "Internal Server Error".

I understand that this is a React-Router problem. I have tried changing my devServer config historyApiFallback to true. I have also tried changing the index in historyApiFallback to the root of my application.

Update When I go into my logs on Heroku, I get this error when trying to navigate to domain.com/activity

2017-11-13T05:43:36.957344+00:00 app[web.1]: ReferenceError: path is not defined
2017-11-13T05:43:36.957347+00:00 app[web.1]:     at /app/server.js:7:23
2017-11-13T05:43:36.957348+00:00 app[web.1]:     at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2017-11-13T05:43:36.957349+00:00 app[web.1]:     at next (/app/node_modules/express/lib/router/route.js:137:13)
2017-11-13T05:43:36.957350+00:00 app[web.1]:     at Route.dispatch (/app/node_modules/express/lib/router/route.js:112:3)
2017-11-13T05:43:36.957351+00:00 app[web.1]:     at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2017-11-13T05:43:36.957352+00:00 app[web.1]:     at /app/node_modules/express/lib/router/index.js:281:22
2017-11-13T05:43:36.957353+00:00 app[web.1]:     at param (/app/node_modules/express/lib/router/index.js:354:14)
2017-11-13T05:43:36.957354+00:00 app[web.1]:     at param (/app/node_modules/express/lib/router/index.js:365:14)
2017-11-13T05:43:36.957355+00:00 app[web.1]:     at Function.process_params (/app/node_modules/express/lib/router/index.js:410:3)
2017-11-13T05:43:36.957355+00:00 app[web.1]:     at next (/app/node_modules/express/lib/router/index.js:275:10)

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "App",
  "main": "index.js",
  "repository": "xxx@github.com",
  "scripts": {
    "start": "webpack-dev-server --inline --content-base . --history-api-fallback",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch",
    "prod": "NODE_ENV=production node server.js",
    "postinstall": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-autosuggest": "^9.3.2",
    "react-dom": "^0.14.3",
    "react-dropzone": "^4.2.1",
    "react-pdf": "^2.1.1",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "react-router-dom": "^4.1.2",
    "react-select": "^1.0.0-rc.10",
    "recharts": "^1.0.0-beta.0",
    "redux": "^3.0.4",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.2.0"
  }
}

server.js

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/'));
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'index.html'))
});
app.listen(process.env.PORT || 8080);

webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

I am not quite clear since I also face the same issue, but there are two possibilities, first need to teach the backend to route correctly, but it is being done in the get * route, second, its an issue with heroku and its needs to be properly configured, but where no idea :( Did you have a look at this (https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku) — Javed, Nov 13 '17 at 05:23
@Jay I had not seen that before, but it didn't solve the problem. — JayBee, Nov 13 '17 at 05:33

score 8 · Accepted Answer · answered Nov 13 '17 at 05:49

8

I think I resolved the issue. To server.js, I added

var path = require('path');

and it began routing properly.

answered Nov 13 '17 at 05:49

JayBee

540
1
5
22

Thank you, thank you. I had no ideea why on heroku, after refreshing each page, beside home, I get "internal server error". I put added the const path in the top of server.js and now pages work :)). The problem was that I forgot to require path inside server.js. Strage is that on localhost worked fine :)) – dragon Aug 25 '20 at 20:28

"Internal Server Error" when refreshing page or typing URL manually when using React Router

1 Answers1