Angular webpack inserting styles.js without type module causes error '"Uncaught SyntaxError: Cannot use 'import.meta' outside a module

Question

Angular webpack generates the tag for style.js without type=module. I started to use webpack-module federation and now I get the error: styles.js:3277 Uncaught SyntaxError: Cannot use 'import.meta' outside a module. In one scss stylesheet I use @import. Is there a way in de angular.json to get angular webpack to inject the style.js with the module type? I can remove library: { type: 'module' } and set scriptType: 'text/javascript' in webpack.config and reset back to angular 12 version but that is not what I want.

Answer 1

You can set the "scriptType" attribute in the "configuration" object of the "fileReplacements" array in your angular.json file:

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts",
    "configuration": {
      "scriptType": "module"
    }
  }
]

This will ensure that the generated style.js file includes the "module" type attribute.