时间戳

首页 > 解决方案 > 在构建时，babel-loader 输出一个 id 为 null 的模块对象 - webpack-command reports/parse throws

webpack - 在构建时，babel-loader 输出一个 id 为 null 的模块对象 - webpack-command reports/parse throws

问题描述

运行 webpack 命令来构建我的 node.js / React 项目会抛出这个错误：

/home/myuser/repos/myproject/node_modules/webpack-command/lib/reporters/parse.js:82
      const row = [module.size, module.id.toString(), modulePath, status(module)];
                                          ^
TypeError: Cannot read property 'toString' of null
    at Object.modules (/home/myuser/repos/myproject/node_modules/webpack-command/lib/reporters/parse.js:82:43)
    at Object.files (/home/myuser/repos/myproject/node_modules/webpack-command/lib/reporters/parse.js:27:36)
    at StylishReporter.render (/home/myuser/repos/myproject/node_modules/webpack-command/lib/reporters/StylishReporter.js:91:39)
    at /home/myuser/repos/myproject/node_modules/webpack-command/lib/compiler.js:27:29
    at finalCallback (/home/myuser/repos/myproject/node_modules/webpack/lib/Compiler.js:425:32)
    at /home/myuser/repos/myproject/node_modules/webpack/lib/Compiler.js:489:17
    at /home/myuser/repos/myproject/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/home/myuser/repos/myproject/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/myuser/repos/myproject/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.storeBuildDependencies (/home/myuser/repos/myproject/node_modules/webpack/lib/Cache.js:122:37)
error Command failed with exit code 1.

我添加了

console.log(module.id)
if (!module.id)console.log(module)

对于有问题的代码，node_modules/webpack-command/lib/reporters/parse.jsbabel-loader 确实输出了一些没有 id 的东西（片段）：

module.id 63635
module.id 11494
module.id null
{
  type: 'module',
  moduleType: 'javascript/auto',
  layer: null,
  size: 1583,
  sizes: { javascript: 1583 },
  built: true,
  codeGenerated: false,
  buildTimeExecuted: false,
  cached: false,
  identifier: '/home/myuser/repos/myproject/node_modules/babel-loader/lib/index.js!/home/myuser/repos/myproject/client/js/store/sagas.js',
  name: './client/js/store/sagas.js',
  nameForCondition: '/home/myuser/repos/myproject/client/js/store/sagas.js',
  index: 344,
  preOrderIndex: 344,
  index2: 419,
  postOrderIndex: 419,
  cacheable: true,
  optional: false,
  orphan: true,
  dependent: undefined,
  issuer: '/home/myuser/repos/myproject/node_modules/babel-loader/lib/index.js!/home/myuser/repos/myproject/client/js/main.js',
  issuerName: './client/js/main.js',
  issuerPath: [
    {
      identifier: '/home/myuser/repos/myproject/node_modules/babel-loader/lib/index.js!/home/myuser/repos/myproject/client/js/main.js',
      name: './client/js/main.js',
      id: null
    }
  ],
  failed: false,
  errors: 0,
  warnings: 0,
  id: null,
  issuerId: null,
.
.

标签： webpackbabeljsbabel-loader

解决方案

显然 webpack-command 现在有点过时并且没有积极维护（？）。从项目中删除 webpack-command 并安装 webpack-cli 来解决问题。我想 webpack-cli 中的等效代码处理来自 babel-loader 的没有 id 的输出。

推荐阅读