Browserify cannot find module 'react-router-dom'

Question

I try to play with react-router but can't make it working with browserify. I'm stuck with this error:

events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module 'react-router-dom' from '/usr/src/app'
    at /usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
    at process (/usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
    at ondir (/usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
    at load (/usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:152:21)
npm info lifecycle irregular_verbs@1.0.0~start: Failed to exec start script

My first js file is server.js which generate a bundle to load app.js. I removed everything on my app.js file to be sure that no personal components create a conflict. So it is very light now! But still doesn't work.

My app.js file:

var React = require('react');
require('react-router-dom');
React.render(<div><p>Blop</p></div>, document.getElementById('base_ihm'));

Without the require('react-router-dom');, everything works!

My server.js:

var express = require('express');
var browserify = require('browserify');
var React = require('react');
var jsx = require('node-jsx');
var app = express();

// Constants
const PORT = 8080;

jsx.install();

// Enable compression
var compression = require('compression');
app.use(compression());

// Create a path name bundle.js which call app.js and apply browserify
app.use('/bundle.js', function(req, res) {
  res.setHeader('content-type', 'application/javascript');
  browserify('./app.js', {
    debug: true
  })
  .transform('reactify')
  .bundle()
  .pipe(res);
});

// static ressources
app.use(express.static(__dirname + '/static/css'));
app.use(express.static(__dirname + '/static/images'));

// Main route   
app.use('/', function(req, res) {

    res.setHeader('Content-Type', 'text/html');
    res.end(React.renderToStaticMarkup(

        React.createElement(
            'html', null,

            // Header
            React.createElement(
                'head', null,

                // Title
                React.createElement('title', null, 'Irregular Verbs'),

                // Meta
                React.createElement('meta', {charSet: 'UTF-8'}, null),
                React.createElement('meta', {name: 'viewport', content: 'width=device-width, initial-scale=1'}, null),

                // Custom CSS
                React.createElement('link', { rel: 'stylesheet', href:     'main.css' }, null)
            ),

            // Body
            React.DOM.body(
                null,
                React.DOM.div({
                    id: 'base_ihm',
                    dangerouslySetInnerHTML: {
                    __html:     React.renderToString(React.createElement('div', null))
                    }
                }),

                // Use the path create just before
                React.DOM.script({
                    src: '/bundle.js'
                })
            )
        )
    ));
});

var server = app.listen(PORT, function() {
  var addr = server.address();
  console.log('Listening @ http://%s:%d', addr.address, addr.port);
});

Is react-router well installed?

There is the content of my package.json file:

{
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.13.3",
    "body-parser": "^1.15.2",
    "node-jsx": "^0.13.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.0.0",
    "browserify": "^14.4.0",
    "reactify": "^1.1.1",
    "mysql": "^2.11.1"
  }
}

I use docker and docker-compose. On my Dockerfile, I added RUN npm ls and RUN ls node_modules: I can see react-router and react-router-dom. So there are here!

Any cache with docker?

I rename my image to be sure to use the good one and not an old one. I also restart my container using docker-compose up --force-recreate. So I presume it is ok.

Erreur with server.js where browserify is used

I think I've made a mistake in my server.js file but I have no idea... There are what I have tried with no success:

1. I try to add a global:true then global:false at my transform('reactify')
2. In my Dockerfile, I try to add npm install react-router-dom -g to be sure it was installed
3. I finaly upgraded my versions. And also tried react-router-dom in version 4.1.1
4. I replace the require('react-router-dom') by require('./node_modules/react-router-dom') but get the same error (except it was the new path which wasn't found).

Do you have any idea? Thank you for your help!

Answer 1

Sorry for the late answer. It was finaly a Docker/Docker-compose problem...

Even using docker-compose up --force-recreate, the old image was still used.

I renamed my container in my docker-compose.yml file so at the next start, it created a new container with the new image.