Subpage routing with Phusion Passenger, node.js and React

Question

I try to deploy a website using hosting provider using nginx + passenger, so I didn't have to care about server config so far. The website consist of main page and few subpages and accessing main page and navigation to subpages inside app works correctly. Routing is done using React Router.

How when I try to access to subpage directly by typing main_url/subpage, it does not work with an error:


import React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at Module.require (/usr/local/lib/ruby/gems/2.5/gems/passenger-6.0.6/src/helper-scripts/node-loader.js:98:25)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object. (/usr/home/(...)/public_nodejs/app.js:1:1)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)

I build my app using npm run build and deploy it using advised folder structure: (root dir) |- \public - app.js

content of app.js is:

require('./src/index.js');

and content of ./src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Routes from './routes';
import { unregister } from './serviceWorker';
import { IntlContextProvider } from './utils/IntlContextProvider';
import './styles/index.css';
import 'swiper/swiper-bundle.css';
import 'swiper/swiper.scss';
import 'swiper/components/effect-coverflow/effect-coverflow.scss';
import 'swiper/components/navigation/navigation.scss';

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root'),
);

unregister();

Routing works fine with npm start. Any ideas how to make routing work with Passenger appreciated.

EDIT:

After additional research it turned out there is difference between client side and server side routing, so issue is not related to passenger itself. See for possible solutions: React-router urls don't work when refreshing or writing manually

Subpage routing with Phusion Passenger, node.js and React

0 Answers