7

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

Stefan
  • 1,122
  • 3
  • 14
  • 38

5 Answers5

7

This has been asked already, and the answer is here

You just need to adjust your

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

to include scriptType: 'text/javascript'

grenobnik
  • 161
  • 1
  • 9
2

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.

alphapilgrim
  • 3,761
  • 8
  • 29
  • 58
1

Apparently, this is because Angular loads css like this:

<script src="something.css">

whereas this should actually be

<script src="something.css" type="module">

They apparently do this on purpose to bypass some issues. But we don't have to worry about the issue.

Stefan
  • 1,122
  • 3
  • 14
  • 38
0

you can use this;

// Replace "styles.js" with your own javascript file.

const importMetaUrl = "undefined" == typeof document ? require("url").pathToFileURL(__filename).href : document.currentScript && document.currentScript.src || new URL("styles.js", document.baseURI).href;

console.log(importMetaUrl);
İbrahim Ödev
  • 11
  • 3
0

I was recently dealing with this issue and experienced a few things:

adding output: { publicPath:"auto", scriptType:"text/javascript" }

did in fact make the import.meta error go away but then I started facing another issue relating to chunk loading:

"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html""

changing scriptType: 'module' resolved it as well. If anyone faces the same issues after fixing the import.meta issue.

https://webpack.js.org/configuration/output/#outputscripttype

bbfresh
  • 1