Invalid source maps when building with optimization

Current Behavior

When building a React App with

"optimization": true,
"sourceMap": true

Most files output the following warning :

WARNING in polyfills.873be10ff174602d11b7.esm.js contains invalid source map

It does NOT happen if optimization is false.

I don’t know if it’s a problem with webpack, angular-cli, or anything else so I open the issue here.

Expected Behavior

All files must generate sourceMap when optimization is true.

Steps to Reproduce

Setup a new workspace with npx create-nx-workspace --preset=react

In workspace.json, set sourceMap to true in projects > myApp > targets > build > configuration > production

run nx build --prod

Failure Logs

WARNING in runtime.28c323bf8ee123f67bad.esm.js contains invalid source map

WARNING in polyfills.873be10ff174602d11b7.esm.js contains invalid source map

WARNING in styles.24784bf22071adf4d6c3.esm.js contains invalid source map

Environment

Node : 14.17.6
  OS   : darwin x64
  npm  : 6.14.15
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.9.0
  @nrwl/cypress : 12.9.0
  @nrwl/devkit : 12.9.0
  @nrwl/eslint-plugin-nx : 12.9.0
  @nrwl/express : Not Found
  @nrwl/jest : 12.9.0
  @nrwl/linter : 12.9.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : 12.9.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.9.0
  @nrwl/web : 12.9.0
  @nrwl/workspace : 12.9.0
  @nrwl/storybook : 12.9.0
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[chrismcleod]

if you extend nx webpack and manually add sourceMap=true to all TerserPlugin entries, you get valid sourcemaps but it takes way too long (like 14 minutes as opposed to 45 seconds without)

[zhilinstas]

+1 reproduced this on my react project with nx 12.6 and 12.9 cannot generate sourcemaps with optimization: true

`

nx run cmf:build:production Hash: 188c87288daa63520ea6 Built at: 09/17/2021 5:34:06 PM Entrypoint main [big] = runtime.28c323bf8ee123f67bad.esm.js vendor.45cb2d09853af6b0267a.esm.js main.32f12df25920d591dc11.esm.js Entrypoint polyfills = runtime.28c323bf8ee123f67bad.esm.js polyfills.8aff3952157e2c8fb9f6.esm.js Entrypoint styles = runtime.28c323bf8ee123f67bad.esm.js styles.40e3a1b07721780c6928.css styles.40e3a1b07721780c6928.css.map chunk {0} runtime.28c323bf8ee123f67bad.esm.js (runtime) 0 bytes ={1}= ={2}= ={3}= ={4}= [entry] [rendered] chunk {1} main.32f12df25920d591dc11.esm.js (main) 152 KiB ={0}= ={4}= [initial] [rendered] chunk {2} polyfills.8aff3952157e2c8fb9f6.esm.js (polyfills) 237 KiB ={0}= [initial] [rendered] chunk {3} styles.40e3a1b07721780c6928.css, styles.40e3a1b07721780c6928.css.map (styles) 4.28 KiB ={0}= [initial] [rendered] chunk {4} vendor.45cb2d09853af6b0267a.esm.js (vendor) 2.86 MiB ={0}= ={1}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)

WARNING in runtime.28c323bf8ee123f67bad.esm.js contains invalid source map

WARNING in main.32f12df25920d591dc11.esm.js contains invalid source map

WARNING in polyfills.8aff3952157e2c8fb9f6.esm.js contains invalid source map

WARNING in styles.f42fd7f76b98fe273020.esm.js contains invalid source map

`