SourceMap option does not work on GitLab CI

[ofhouse]

• Operating System: GitLab CI - Docker/Ubuntu
• Node Version: 14.15.3
• NPM Version: 6.14.9
• webpack Version: 5.11.1
• css-minimizer-webpack-plugin Version: 1.1.5

Expected Behavior

Should produce a sourcemap on GitLab CI in the same way as on my local machine.

Actual Behavior

Fails with the following error message:

(node:47) UnhandledPromiseRejectionWarning: Error: "version" is a required argument.
    at Object.getArg (/builds/ofhouse/stackoverflow-65355772/node_modules/source-map/lib/util.js:24:11)
    at new BasicSourceMapConsumer (/builds/ofhouse/stackoverflow-65355772/node_modules/source-map/lib/source-map-consumer.js:294:22)
    at new SourceMapConsumer (/builds/ofhouse/stackoverflow-65355772/node_modules/source-map/lib/source-map-consumer.js:22:7)
    at SourceMapSource.node (/builds/ofhouse/stackoverflow-65355772/node_modules/webpack-sources/lib/SourceMapSource.js:193:4)
    at exports.getSourceAndMap (/builds/ofhouse/stackoverflow-65355772/node_modules/webpack-sources/lib/helpers.js:20:27)
    at SourceMapSource.sourceAndMap (/builds/ofhouse/stackoverflow-65355772/node_modules/webpack-sources/lib/SourceMapSource.js:184:10)
    at getTaskForFile (/builds/ofhouse/stackoverflow-65355772/node_modules/webpack/lib/SourceMapDevToolPlugin.js:78:30)
    at /builds/ofhouse/stackoverflow-65355772/node_modules/webpack/lib/SourceMapDevToolPlugin.js:266:22
    at /builds/ofhouse/stackoverflow-65355772/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/builds/ofhouse/stackoverflow-65355772/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

Code

Reproduction repository: https://gitlab.com/ofhouse/stackoverflow-65355772

How Do We Reproduce?

1. Checkout the repository locally and run npm run build (success)
2. Upload it to GitLab.com and let GitLab CI run (fails)
   Example output from the current HEAD of the repository: https://gitlab.com/ofhouse/stackoverflow-65355772/-/jobs/945541367

I've tried out many different setups but I always fail to reproduce the issue locally.
Even running inside the same docker image with

docker run --rm -v $(pwd):/tmp node:14-alpine sh -c "cd /tmp && npm ci && npm run build"

does not let me reproduce the issue.

I have no idea how I could abstract this issue further, so my hope is that somebody here has an idea what's happening 🙏.

Edit:
What it makes it even stranger is that it also runs successfully on GitHub actions: https://github.com/ofhouse/stackoverflow-65355772/runs/1652026529

[alexander-akait]

You have broken source maps, please open an issue in GitLab CI, it was from source-map package, and it is right message

[alexander-akait]

Anyway the main problem here:

node:47) 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)
(node:47) [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.

Try to set this flag (--unhandled-rejections=strict) and say what is the error

[ofhouse]

Thanks for the quick response,
setting --unhandled-rejections=strict does not really give more information:

/builds/ofhouse/stackoverflow-65355772/node_modules/source-map/lib/util.js:24
    throw new Error('"' + aName + '" is a required argument.');
          ^
Error: "version" is a required argument.
    at Object.getArg (/builds/ofhouse/stackoverflow-65355772/node_modules/source-map/lib/util.js:24:11)
    at new BasicSourceMapConsumer (/builds/ofhouse/stackoverflow-65355772/node_modules/source-map/lib/source-map-consumer.js:294:22)
    at new SourceMapConsumer (/builds/ofhouse/stackoverflow-65355772/node_modules/source-map/lib/source-map-consumer.js:22:7)
    at SourceMapSource.node (/builds/ofhouse/stackoverflow-65355772/node_modules/webpack-sources/lib/SourceMapSource.js:193:4)
    at exports.getSourceAndMap (/builds/ofhouse/stackoverflow-65355772/node_modules/webpack-sources/lib/helpers.js:20:27)
    at SourceMapSource.sourceAndMap (/builds/ofhouse/stackoverflow-65355772/node_modules/webpack-sources/lib/SourceMapSource.js:184:10)
    at getTaskForFile (/builds/ofhouse/stackoverflow-65355772/node_modules/webpack/lib/SourceMapDevToolPlugin.js:78:30)
    at /builds/ofhouse/stackoverflow-65355772/node_modules/webpack/lib/SourceMapDevToolPlugin.js:266:22
    at /builds/ofhouse/stackoverflow-65355772/node_modules/webpack/lib/Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (/builds/ofhouse/stackoverflow-65355772/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

(Original log: https://gitlab.com/ofhouse/stackoverflow-65355772/-/jobs/947104530)

I agree that the Error message comes from a broken sourcemap but I don't understand who has generated the sourcemap. The source-map package here only tries to parse the broken sourcemap and throws the error but the package was not responsible for creating the broken sourcemap, or am I wrong?

[alexander-akait]

If you remove the sourceMap option, do all work fine? By default we respect the devtool option, so it should work without this option

[ofhouse]

No, still got the same message: https://gitlab.com/ofhouse/stackoverflow-65355772/-/jobs/947141852

[alexander-akait]

Can you monkey patching your code of plugin for CI here https://github.com/webpack-contrib/css-minimizer-webpack-plugin/blob/master/src/index.js#L266 (just put console.log(map)) and here https://github.com/webpack-contrib/css-minimizer-webpack-plugin/blob/master/src/index.js#L349 (console.log(map))?

[alexander-akait]

What is you use for tests? Jest? What is environment? jsdom or node?

[ofhouse]

The output from L266:

{
  version: 3,
  sources: [ 'webpack://./src/style.css' ],
  names: [],
  mappings: 'AAAA,oBAAoB;AACpB;EACE,4BAA4B;AAC9B',
  file: 'x',
  sourcesContent: [
    '/* Sample CSS file */\nbody {\n  background-color: blueviolet;\n}\n'
  ]
}

Output from L349:

SourceMapGenerator {
  _file: 'main.css',
  _sourceRoot: null,
  _skipValidation: false,
  _sources: ArraySet {
    _array: [ 'webpack://./src/style.css' ],
    _set: Map(1) { 'webpack://./src/style.css' => 0 }
  },
  _names: ArraySet { _array: [], _set: Map(0) {} },
  _mappings: MappingList {
    _array: [ [Object], [Object], [Object] ],
    _sorted: true,
    _last: {
      generatedLine: 1,
      generatedColumn: 29,
      originalLine: 4,
      originalColumn: 0,
      source: 'webpack://./src/style.css',
      name: null
    }
  },
  _sourcesContents: [Object: null prototype] {
    'main.css': '/* Sample CSS file */\nbody {\n  background-color: blueviolet;\n}\n\n',
    'webpack://./src/style.css': '/* Sample CSS file */\nbody {\n  background-color: blueviolet;\n}\n'
  }
}

Original log: https://gitlab.com/ofhouse/stackoverflow-65355772/-/jobs/947196486

I am familiar with jest but for this project I just use webpack cli to trigger the build: https://gitlab.com/ofhouse/stackoverflow-65355772/-/blob/main/package.json#L8

[alexander-akait]

hm, very weird, can you try to run console.log(map.toString()) for https://github.com/webpack-contrib/css-minimizer-webpack-plugin/blob/master/src/index.js#L349, just ensure, without plugin all is fine?

[ofhouse]

Oh yes, of course.
L349:

{
  "version": 3,
  "sources": [
    "webpack://./src/style.css"
  ],
  "names": [],
  "mappings": "AACA,KACE,wBACF",
  "file": "main.css",
  "sourcesContent": [
    "/* Sample CSS file */\nbody {\n  background-color: blueviolet;\n}\n"
  ]
}

Logged it also from node_modules/source-map/lib/source-map-consumer.js:294 (where the sourcemap is parsed), and it also has the same output there:

{
  "version": 3,
  "sources": [
    "webpack://./src/style.css"
  ],
  "names": [],
  "mappings": "AACA,KACE,wBACF",
  "file": "main.css",
  "sourcesContent": [
    "/* Sample CSS file */\nbody {\n  background-color: blueviolet;\n}\n"
  ]
}

Original log: https://gitlab.com/ofhouse/stackoverflow-65355772/-/jobs/947320884

So it seems like you're right and the failure comes from the source-map package.

[alexander-akait]

Okay, let's do monkey patching this line /builds/ofhouse/stackoverflow-65355772/node_modules/source-map/lib/util.js:24:11, because I don't have ideas what is wrong, feeling that something wrong with Node.js on Github CI

[ofhouse]

Yeah, tested it manually and it returned undefined for aSourceMap['version'] while serializing aSourceMap with JSON.stringify(aSourceMap) gives me the result from above.

[alexander-akait]

Let try https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor on version

[ofhouse]

Using this code

console.log('aSourceMap (toString)', aSourceMap)
console.log('aSourceMap: ', JSON.stringify(aSourceMap, null, 2));
console.log('RAW Version', aSourceMap['version'])
console.log('Object.getOwnPropertyDescriptor', Object.getOwnPropertyDescriptor(aSourceMap, 'version'))

Gives me the following output:

aSourceMap (toString) SourceMapGenerator {
  _file: 'main.css',
  _sourceRoot: null,
  _skipValidation: false,
  _sources: ArraySet {
    _array: [ 'webpack://./src/style.css' ],
    _set: Map(1) { 'webpack://./src/style.css' => 0 }
  },
  _names: ArraySet { _array: [], _set: Map(0) {} },
  _mappings: MappingList {
    _array: [ [Object], [Object], [Object] ],
    _sorted: true,
    _last: {
      generatedLine: 1,
      generatedColumn: 29,
      originalLine: 4,
      originalColumn: 0,
      source: 'webpack://./src/style.css',
      name: null
    }
  },
  _sourcesContents: [Object: null prototype] {
    'main.css': '/* Sample CSS file */\nbody {\n  background-color: blueviolet;\n}\n\n',
    'webpack://./src/style.css': '/* Sample CSS file */\nbody {\n  background-color: blueviolet;\n}\n'
  }
}
aSourceMap:  {
  "version": 3,
  "sources": [
    "webpack://./src/style.css"
  ],
  "names": [],
  "mappings": "AACA,KACE,wBACF",
  "file": "main.css",
  "sourcesContent": [
    "/* Sample CSS file */\nbody {\n  background-color: blueviolet;\n}\n"
  ]
}
RAW Version undefined
Object.getOwnPropertyDescriptor undefined

I don't get it 🙈 Since it is running on an official Node.js docker image (node:14-alpine) it should not be a problem of Node configuration at this point.

[alexander-akait]

Okay, we found a problem ⭐ now we need to search who create it, can you put

console.log('aSourceMap (toString)', aSourceMap)
console.log('aSourceMap: ', JSON.stringify(aSourceMap, null, 2));
console.log('RAW Version', aSourceMap['version'])
console.log('Object.getOwnPropertyDescriptor', Object.getOwnPropertyDescriptor(aSourceMap, 'version'))

Here https://github.com/webpack-contrib/css-minimizer-webpack-plugin/blob/master/src/index.js#L349