Webpack捆绑式快递应用无法查找视图

I run npm run start and server is running fine. When I attempt to view client at localhost, server returns error: GET / 500 62.700 ms - 2028 Error: Failed to lookup view "error" in views directory "/views"

我运行npm run start并且服务器运行正常。当我尝试在localhost上查看客户端时，服务器返回错误：GET / 500 62.700 ms - 2028错误：无法在视图目录“/ views”中查找视图“错误”

The application runs fine when just using source files. This error occurs when running application from webpack bundle.

只使用源文件时，应用程序运行正常。从webpack bundle运行应用程序时发生此错误。

What are the differences between source and bundled files that would make this error occur?

导致此错误的源文件和捆绑文件之间有什么区别？

npm:3.8.2
故宫：3.8.2
node: 4.2.6
节点：4.2.6
express: 4.13.1
表达：4.13.1
webpack: 1.12.13
webpack：1.12.13
babel-loader: 6.2.4
babel-loader：6.2.4

webpack.config.js

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'
    }
  }
];

The error trace tells me that the error is being handled by the production error handler in my app.js file:

错误跟踪告诉我错误是由我的app.js文件中的生产错误处理程序处理的：

// 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 the error with the following output:

我使用以下输出console.log错误：

{ [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 engine setup

查看引擎设置

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

I'm not sure how to start debugging...

我不确定如何开始调试......

1 个解决方案

#1

I believe the answer lies in how webpack handles the special __dirname global variable. Webpack's default behavior is to replace __dirname with the "mock" value /. This can be seen in the error you get from express where it's looking for a file at the root of /views, not ./views.

我相信答案在于webpack如何处理特殊的__dirname全局变量。 Webpack的默认行为是将__dirname替换为“mock”值/。这可以从你从快递获得的错误中看出，它在/ views的根目录中寻找文件，而不是./views。

The solution is to add the following section to your webpack configuration:

解决方案是将以下部分添加到您的webpack配置中：

node: {
  __dirname: true
}

Here's the docs which explain this behavior: https://webpack.github.io/docs/configuration.html#node

以下是解释此行为的文档：https：//webpack.github.io/docs/configuration.html#node

#1