angularmonoreponrwl

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


I created an angular nx monorepo and created two applications. When I start either of them I get the following error:

error-message

I already saw some stackoverflow posts were the answers suggested to just add "type": "module" to package.json. But since it is a monorepo only one package.json is used for all the apps.

microfrontend:

enter image description here


Solution

  • For posterity on the newer versions of NX:

    When serving module federation apps 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 Angular compiler attaches the styles.js file to the index.html in a script tag with defer.

    It needs to be attached with type=module, but Angular can't make that change because it breaks HMR. They also provide 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 stressing that there's been no actual errors or breakages noted from our tests.