2017-06-23 205 views
0

我嘗試使用react-router,但無法使其與browserify一起工作。我堅持這個錯誤:Browserify無法找到模塊'react-router-dom'

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 [email protected]~start: Failed to exec start script 

我的第一個js文件是server.js其產生一束加載app.js。 我刪除了我的app.js文件中的所有內容,以確保沒有任何個人組件產生衝突。所以現在很輕!但仍然不起作用。

我app.js文件:

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

沒有require('react-router-dom');,一切正常!

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

是反應路由器安裝好?

還有就是我的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" 
    } 
} 

我用dockerdocker-compose。在我的Dockerfile上,我添加了RUN npm lsRUN ls node_modules:我可以看到react-routerreact-router-dom。所以這裏有!

任何緩存與碼頭?

我重命名我的圖像,以確保使用好的而不是舊的。 我也使用docker-compose up --force-recreate重新啓動我的容器。 所以我認爲它沒問題。

ERREUR與在browserify使用

我想我犯了一個錯誤,我server.js文件,但我不知道server.js ...... 有什麼我都沒有嘗試過成功:

  1. 我嘗試添加一個全球性的:真的,那麼全球:假我的變換(「reactify」)
  2. 在我Dockerfile,我嘗試添加npm install react-router-dom -g,以確保它被安裝
  3. 我最終升級了我的版本。並且還嘗試了版本4.1.1中的react-router-dom
  4. 我將require('react-router-dom')替換爲require('./node_modules/react-router-dom'),但得到相同的錯誤(除了它是未找到的新路徑)。

你有什麼想法嗎? 謝謝你的幫助!

回答

0

對不起,對於遲到的答案。這是最後一個碼頭工/碼頭工合成問題 ...

即使使用docker-compose up --force-recreate,仍舊使用舊圖像。

我將我的容器改名爲docker-compose。yml文件,因此在下一次啓動時,它會使用新映像創建一個新容器。