L'app Express in bundle Webpack non riesce alla vista di ricerca

Question

Corro npm run start e il server funziona correttamente. Quando si tenta di visualizzare cliente al localhost, server restituisce l'errore: GET/500 62.700 ms - 2028 Errore: Impossibile cercare vista "errore" nella directory vista "/ views"

L'applicazione funziona benissimo quando usando solo fonte File. Questo errore si verifica durante l'esecuzione dell'applicazione dal pacchetto Webpack.

Quali sono le differenze tra i file di origine e in bundle che potrebbero causare questo errore?

• npm: 3.8.2
• nodo: 4.2.6
• espresso: 4.13.1
• webpack: 1.12.13
• babel-loader: 6.2.4

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 

var nodeModules = {}; 
fs.readdirSync('node_modules') 
    .filter(function(x) { 
    return ['.bin'].indexOf(x) === -1; 
    }) 
    .forEach(function(mod) { 
    nodeModules[mod] = 'commonjs ' + mod; 
    }); 

module.exports = [ 
    { 
    entry: { 
     'app_bundle': './server.js' 
    }, 
    target: 'node', 
    query: { 
     cacheDirectory: true, 
     presets: ['es2015'] 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.js$/, 
      loader: 'babel', 
      exclude: /node_modules/ 
     } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js'] 
    }, 
    output: { 
     path: './', 
     filename: '[name].js' 
    }, 
    externals: nodeModules 
    }, 
    { 
    entry: [ 
     './src/index.jsx' 
    ], 
    target: 'web', 
    query: { 
     cacheDirectory: true, 
     presets: ['es2015'] 
    }, 
    module: { 
     loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, 
     { 
      test: /\.css$/, 
      loader: 'style!css!autoprefixer' 
     }, 
     { test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
     { test: /\.ttf$/, loader: "file-loader" }, 
     { test: /\.eot$/, loader: "file-loader" }, 
     { test: /\.svg$/, loader: "file-loader" } 
     ] 
    }, 
    resolve: { 
     alias: { 
     'react': path.join(__dirname, 'node_modules', 'react') 
     }, 
     extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
     path: __dirname + '/public', 
     publicPath: '/', 
     filename: 'webpack_bundle.js' 
    } 
    } 
]; 

La Traccia di errore mi dice che l'errore è stato gestito dal gestore di errori di produzione nel mio app.js di file:

// production error handler 
app.use(function(err, req, res, next) { 
    console.log(err); 
    res.status(err.status || 500); 
    res.render('error', { 
    message: err.message, 
    error: {} 
    }); 
}); 

ho console.log l'errore con il seguente risultato:

{ [Error: Failed to lookup view "error" in views directory "/views"] 
    view: 
    View { 
    defaultEngine: 'ejs', 
    ext: '.ejs', 
    name: 'error', 
    root: '/views', 
    engine: [Function], 
    path: undefined } } 

View configurazione del motore

app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs'); 

non sono sicuro di come iniziare il debug ...

Answer 1

Credo che la risposta risieda nel modo in cui webpack gestisce la variabile globale __dirname speciale. Il comportamento predefinito di Webpack è quello di sostituire __dirname con il valore "simulato" /. Questo può essere visto nell'errore che si ottiene da espresso dove sta cercando un file allo root di /views, non ./views.

La soluzione è quella di aggiungere la seguente sezione per la configurazione webpack:

node: { 
    __dirname: true 
} 

Ecco i documenti che spiegano questo comportamento: https://webpack.github.io/docs/configuration.html#node