Javascript 显示React的编译错误

我曾经像他们的教程中建议的那样开始正常反应，在这种情况下，它会显示编译错误

现在，我已经为React项目设置了一个网页配置，当它没有编译时，只有一个空白页面

是否有办法在终端或浏览器页面上显示这些错误

谢谢你的回答

编辑：

---

您可以控制向传递stats设置对象的终端输出的stats webpack的级别。以下是我的服务器应用程序的相关部分（node+express+webpack dev）

在我的网页包配置中：

module.exports = {

  devtool: 'source-map',

  context: path.join(__dirname, '..'),

  entry: {
    bundle: [
      'webpack-hot-middleware/client',
      path.resolve('./src/client/index.js')
    ]
  },

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "[name].js",
    publicPath: '/'
  },

  stats: {
    // Add asset Information
    assets: true,
    // Sort assets by a field
    assetsSort: "field",
    // Add information about cached (not built) modules
    cached: true,
    // Add children information
    children: true,
    // Add chunk information (setting this to `false` allows for a less verbose output)
    chunks: false,
    // Add built modules information to chunk information
    chunkModules: true,
    // Add the origins of chunks and chunk merging info
    chunkOrigins: false,
    // Sort the chunks by a field
    chunksSort: "field",
    // Context directory for request shortening
    context: "../src/",
    // `webpack --colors` equivalent
    colors: true,
    // Add errors
    errors: true,
    // Add details to errors (like resolving log)
    errorDetails: true,
    // Add the hash of the compilation
    hash: false,
    // Add built modules information
    modules: false,
    // Sort the modules by a field
    modulesSort: "field",
    // Add public path information
    publicPath: false,
    // Add information about the reasons why modules are included
    reasons: false,
    // Add the source code of modules
    source: false,
    // Add timing information
    timings: true,
    // Add webpack version information
    version: true,
    // Add warnings
    warnings: false
  },

  // ... rest of config ...

对于生产构建，我使用以下方法：

const webpack = require('webpack')

function webpackCompiler (webpackConfig) {

  return new Promise((resolve, reject) => {

    const compiler = webpack (webpackConfig)

    compiler.run((err, stats) => {

      if (err) {

        console.log('Webpack compiler encountered a fatal error.', err)
        return reject(err)
      }

      const jsonStats = stats.toJson()

      console.log(stats.toString(webpackConfig.stats))

      resolve(jsonStats)
    })
  })
}

module.exports = webpackCompiler

---

Webpack在终端中显示编译错误。编译后你能截图显示你的终端吗？很可能是你的配置有问题。我已经根据你的回答编辑了我的帖子。请发布你的完整网页配置文件。我已经编辑了我的帖子。一切似乎都很好。你想渲染什么？可能组件为空，或者id不匹配，或者。。。

module.exports = {

  devtool: 'source-map',

  context: path.join(__dirname, '..'),

  entry: {
    bundle: [
      'webpack-hot-middleware/client',
      path.resolve('./src/client/index.js')
    ]
  },

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "[name].js",
    publicPath: '/'
  },

  stats: {
    // Add asset Information
    assets: true,
    // Sort assets by a field
    assetsSort: "field",
    // Add information about cached (not built) modules
    cached: true,
    // Add children information
    children: true,
    // Add chunk information (setting this to `false` allows for a less verbose output)
    chunks: false,
    // Add built modules information to chunk information
    chunkModules: true,
    // Add the origins of chunks and chunk merging info
    chunkOrigins: false,
    // Sort the chunks by a field
    chunksSort: "field",
    // Context directory for request shortening
    context: "../src/",
    // `webpack --colors` equivalent
    colors: true,
    // Add errors
    errors: true,
    // Add details to errors (like resolving log)
    errorDetails: true,
    // Add the hash of the compilation
    hash: false,
    // Add built modules information
    modules: false,
    // Sort the modules by a field
    modulesSort: "field",
    // Add public path information
    publicPath: false,
    // Add information about the reasons why modules are included
    reasons: false,
    // Add the source code of modules
    source: false,
    // Add timing information
    timings: true,
    // Add webpack version information
    version: true,
    // Add warnings
    warnings: false
  },

  // ... rest of config ...

const webpack = require('webpack')

function webpackCompiler (webpackConfig) {

  return new Promise((resolve, reject) => {

    const compiler = webpack (webpackConfig)

    compiler.run((err, stats) => {

      if (err) {

        console.log('Webpack compiler encountered a fatal error.', err)
        return reject(err)
      }

      const jsonStats = stats.toJson()

      console.log(stats.toString(webpackConfig.stats))

      resolve(jsonStats)
    })
  })
}

module.exports = webpackCompiler