Pakiety podręczne w pakiecie ekspresowa aplikacja nie sprawdza widoku

Question

Uruchamiam npm run start, a serwer działa poprawnie. Gdy próbuję zobaczyć klienta w localhost, serwer zwraca błąd: GET/500 62,700 ms - 2028 Błąd: Nie udało się odnośnika widok „błąd” w katalogu views „/ widoki”

Aplikacja działa poprawnie, gdy tylko za pomocą źródła akta. Ten błąd występuje podczas uruchamiania aplikacji z pakietu Webpack.

Jakie są różnice między plikami źródłowymi i dołączonymi, które spowodowałyby wystąpienie tego błędu?

• npm: 3.8.2
• węzeł: 4.2.6
• Ekspres 4.13.1
• WebPack: 1.12.13
• Babel ładowarki: 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' 
    } 
    } 
]; 

Ślad błędu mówi mi, że błąd jest obsługiwane przez procedurę obsługi błędu produkcyjnego w moim app.js pliku:

// 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: {} 
    }); 
}); 

I console.log błąd z następującym wyjścia:

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

konfiguracji widoku silnika

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

nie jestem pewien, jak rozpocząć debugowanie ...

Answer 1

Wierzę, że odpowiedź leży w tym, w jaki sposób pakiet internetowy obsługuje specjalną zmienną globalną __dirname. Domyślnym zachowaniem domyślnego pakietu Webpack jest zamiana __dirname z "fałszywą" wartością /. Widać to w błędzie, który dostajesz z express, gdzie szuka pliku pod root z /views, a nie ./views.

Rozwiązaniem jest dodanie następującej sekcji do konfiguracji WebPACK:

node: { 
    __dirname: true 
} 

Oto docs, które tłumaczą to zachowanie: https://webpack.github.io/docs/configuration.html#node