On building, babel-loader outputs a module object with id null - webpack-command reporters/parse throws

Question

Running the webpack command to build my node.js / React project would throw this error:

/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.

I added

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

to the problematic code in node_modules/webpack-command/lib/reporters/parse.js and babel-loader did indeed output something without an id (snippet):

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,
.
.

score 0 · Answer 1 · answered Aug 02 '21 at 18:07

Apparently webpack-command is now somewhat outdated and not actively maintained (?). Removing webpack-command from the project and installing webpack-cli instead fixed the problem. I suppose the equivalent code in webpack-cli handles output without id from babel-loader.

On building, babel-loader outputs a module object with id null - webpack-command reporters/parse throws

1 Answers1