Browserify ne trouve pas le module 'react-router-dom'

Question

J'essaie de jouer avec le routeur de réaction mais je ne peux pas le faire fonctionner avec browserify. Je suis coincé avec cette erreur:

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 

Mon premier fichier js est server.js qui génèrent un paquet pour charger app.js. J'ai tout supprimé sur mon fichier app.js pour être sûr qu'aucun composant personnel ne crée un conflit. Donc c'est très léger maintenant! Mais ne fonctionne toujours pas.

Mon app.js fichier:

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

Sans require('react-router-dom');, tout fonctionne!

Mon 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); 
}); 

Est-routeur réagit bien installé?

Il y a le contenu de mon fichier package.json:

{ 
    "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" 
    } 
} 

J'utilise docker et docker-compose. Sur mon Dockerfile, j'ai ajouté RUN npm ls et RUN ls node_modules: Je peux voir react-router et react-router-dom. Donc, il y a ici!

Toute mémoire cache avec docker?

Je renommer mon image pour être sûr d'utiliser le bon et pas un ancien. Je redémarre également mon conteneur en utilisant docker-compose up --force-recreate. Donc, je suppose que c'est ok.

avec server.js où Erreur browserify est utilisé

Je pense avoir fait une erreur dans mon dossier de server.js, mais je ne sais pas ... Il n'y ce que j'ai essayé sans succès:

1. J'essaie d'ajouter une approche globale: true puis global: false ma transformation ('reactify')
2. Dans mon Dockerfile, j'essaie d'ajouter npm install react-router-dom -g pour être sûr qu'il a été installé
3. J'ai finalement mis à jour mes versions. Et aussi essayé reac-routeur-dom dans la version 4.1.1
4. Je remplace le require('react-router-dom') par require('./node_modules/react-router-dom') mais obtenir la même erreur (sauf que c'était le nouveau chemin qui n'a pas été trouvé).

Avez-vous une idée? Nous vous remercions de votre aide!

Answer 1

Désolé pour la réponse tardive. Il était finalement Docker/Docker-composer problème ...

Même en utilisant docker-compose up --force-recreate, l'ancienne image était toujours utilisée. J'ai renommé mon conteneur dans mon docker-compose.fichier yml donc au prochain démarrage, il a créé un nouveau conteneur avec la nouvelle image.