Module Federation in Nx and Angular generates an error loading styles.js

Question

I am following the article describing setting up module federation: https://nx.dev/l/a/guides/setup-mfe-with-angular

Starting with generating the workspace, adding the angular plugin, and adding the dashboard application.

When serving the dashboard application I get an error from styles.js:

 Uncaught SyntaxError: Cannot use 'import.meta' outside a module

It is being loaded as:

<script src="styles.js" defer></script>

Doing some quick searches seems to indicate that this thing should have type="module" on it.

However there doesn't seem to be any kind of configuration I can find to modify the line being added to the index.html.

I have checked the regular template generated by angular, it uses the defer style to everything, so the other js file entries are being changed to type="module" some place. The normal styles.js also does not contain any "import.meta" string.

Any solution would be helpful.

Answer 1

TL;DR: thats fine. You should not see this error in the production

There is a note on the https://nx.dev/guides/setup-mfe-with-angular you mentioned saying:

NOTE: When serving MFEs in dev mode locally, there'll be an error output to the console, import.meta cannot be used outside of a module, and the script that is coming from is styles.js. It's a known error output, but it doesn't actually cause any breakages from as far as our testing has shown. It's because the Angular compiler attaches the styles.js file to the index.html in a tag with defer. It needs to be attached with type=module, but doing so breaks HMR. There is no way of hooking into that process for us to patch it ourselves. The good news is that the error doesn't propagate to production, because styles are compiled to a CSS file, so there's no erroneous JS to log an error. It's worth reiterating that there's been no actual errors or breakages noted from our tests.

Answer 2

Check the scriptType

This issue has to do with how the imports are set up in the compiled app. You can update the scriptType in your webpack.config.js by adding the scriptType:

module.exports = {
  output: {
    uniqueName: "YourUniqueAppName",
    publicPath: "auto",
    scriptType: "text/javascript"
  },