How to fix the webpack error "version" is a required argument in GCP cloudbuild

Question

I create a bug issue in the webpack repo, but I'm afraid that it'll be closed since they ask for a minimal reproduction, which I cannot produce.

One of my cloudbuild steps is:

- name: node:$_NODE_VERSION
  entrypoint: npm
  args: ['run', 'build:ci'] # with NODE_ENV=production. Skips BundleAnalyzerPlugin
  dir: "v3/client/"
  waitFor: ['css-built', 'secret-available']
  id: 'client-built'

substitutions:
  # Getting errors related to the client/ canvas package using node v15
  #     command failed sh -c node-pre-gyp install --fallback-to-build
  #     No package 'pangocairo' found
  _NODE_VERSION: "14"

It triggers a webpack 4 build as defined below:

  "scripts": {
    "build:ci": "NODE_ENV=production npm run build -- --env ci",
 }

When cloudbuild tries to run the step, it always fails with the following error

Step #4 - "client-built": (node:29) UnhandledPromiseRejectionWarning: Error: "version" is a required argument.
Step #4 - "client-built":     at Object.getArg (/workspace/v3/client/node_modules/webpack-sources/node_modules/source-map/lib/util.js:24:11)
Step #4 - "client-built":     at new BasicSourceMapConsumer (/workspace/v3/client/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:294:22)
Step #4 - "client-built":     at new SourceMapConsumer (/workspace/v3/client/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:22:7)
Step #4 - "client-built":     at SourceMapSource.node (/workspace/v3/client/node_modules/webpack-sources/lib/SourceMapSource.js:32:62)
Step #4 - "client-built":     at SourceMapSource.proto.sourceAndMap (/workspace/v3/client/node_modules/webpack-sources/lib/SourceAndMapMixin.js:29:18)
Step #4 - "client-built":     at getTaskForFile (/workspace/v3/client/node_modules/webpack/lib/SourceMapDevToolPlugin.js:65:30)
Step #4 - "client-built":     at /workspace/v3/client/node_modules/webpack/lib/SourceMapDevToolPlugin.js:215:20
Step #4 - "client-built":     at Array.forEach (<anonymous>)
Step #4 - "client-built":     at /workspace/v3/client/node_modules/webpack/lib/SourceMapDevToolPlugin.js:186:12
Step #4 - "client-built":     at SyncHook.eval (eval at create (/workspace/v3/client/node_modules/tapable/lib/HookCodeFactory.js:1:1), <anonymous>:12:1)
Step #4 - "client-built":     at SyncHook.lazyCompileHook (/workspace/v3/client/node_modules/tapable/lib/Hook.js:154:20)
Step #4 - "client-built":     at /workspace/v3/client/node_modules/webpack/lib/Compilation.js:1413:42
Step #4 - "client-built":     at eval (eval at create (/workspace/v3/client/node_modules/tapable/lib/HookCodeFactory.js:1:1), <anonymous>:19:1)
Step #4 - "client-built": (Use `node --trace-warnings ...` to show where the warning was created)
Step #4 - "client-built": (node:29) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
Step #4 - "client-built": (node:29) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

This error is very obscure to me, and only happens on cloudbuild, which is very difficult to debug (can't ssh in the environment and debug stuff by myself).

It seems to have something to do with source-map

Here are the parts of my config mentioning source maps

export default {
  mode: "production",
  devtool: "source-map",
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
          output: {
            comments: false,
          },
        },
      }),
    ]
  },
  module: { 
    rules: [{
      test: /\.css$/i,
      use: [
        {
          loader: "css-loader",
          options: {
            importLoaders: 1,
            modules: false,
            sourceMap: true,
          },
        },
      ],
    }, {
      // add source-map support
      enforce: "pre",
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "source-map-loader",
    }],
  }
};

Any idea what could I try to debug this ?

EDIT: after diffing the webpack config since the last succesfull cloudbuild build, I noticed this change:

   resolve: {
-    extensions: [".ts", ".tsx", ".js", ".jsx"],
+    // .mjs needed from @apollo/client v3.3.0
+    extensions: [".mjs", ".ts", ".tsx", ".js", ".jsx"],
   },

But webpack supports sourcemap for mjs since 2018/08, so I guess this is irrelevant.

The only other change is using the node:14 docker image instead of the master one, since node 15 causes errors on npm install since I added canvas to my list of dependencies for jest tests.

EDIT 2: disabling source maps for my production build works. But that'll be harder to debug production issues from now on :(

Answer 1

I faced w/ the same problem, but w/ webpack 5. And I also using Apollo client v3. One difference: it was on gitlab ci. The root cause was in using docker:dind. Move from dind to use Docker socket binding fix the problem for me