Cannot use 'import.meta' outside a module

[scottwalter-nice]

I am trying to access an Angular 13 remote with the new Angular 13 version of module-federation-plugin I get this:

Here is my webpack.config.js for my remote:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "angular13Mfe",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  plugins: [
    new ModuleFederationPlugin({

        // For remotes (please adjust)
        name: "angular13Mfe",
        filename: "remoteEntry.js",
        exposes: {
            './web-components': './src/bootstrap.ts',
        },

        shared: share({
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

          ...sharedMappings.getDescriptors()
        })

    }),
    sharedMappings.getPlugin()
  ],
};

[scottfwalter]

It looks the remoteEntry.js from Angular 12 is totally different and quit a bit smaller (34kb) than the Angular 13 version (232kb). The Angular 12 version is using require syntax, while the Anglar 13 is use import syntax it seems.

Is it a simple Webpack config setting we need to update for Angular 13?

[scottfwalter]

Ahh, it seems the culprit is publicPath: "auto". If I set to something like publicPath: "http://localhost:5005/" it will work.

[evanjenkins]

@scottfwalter did you have to change the publicPath of your host as well?

[scottfwalter]

@scottfwalter did you have to change the publicPath of your host as well?

I am attempting to use a Angular 13 child wrapped as a web component into an Angular 12 container. As of now I don't have an issue with the container. I found this issue with remoteEntry.js so perhaps its limited to the child apps.

I'm starting to think this "auto" issue is not related to module-federation-plugin. As I don't see anything in the source code which deals with publicPath. This is part of Webpack ModuleFederationPlugin.

With the error cannot use import.meta its almost like streams are being crossed. Webpack is generating the ESM module version of remoteEntry.js when we need the Common Module version.

[FredBlondel]

Hello, I have the same issue here.

It seems to be a build issue.

In Angular 12, module-federation-plugin 12, sample of working code from remoteEntry.js (built in dev mode)

 	/* webpack/runtime/publicPath */
 	(() => {
 		var scriptUrl;
 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
 		var document = __webpack_require__.g.document;
 		if (!scriptUrl && document) {
 			if (document.currentScript)
 				scriptUrl = document.currentScript.src
 			if (!scriptUrl) {
 				var scripts = document.getElementsByTagName("script");
 				if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
 			}
 		}
 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
 		// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
 		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
 		scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
 		__webpack_require__.p = scriptUrl;
 	})();

In Angular 13, module-federation-plugin 13

/* webpack/runtime/publicPath */
	(() => {
		var scriptUrl;
		if (typeof import.meta.url === "string") scriptUrl = import.meta.url
	// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
	// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
		scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
		__webpack_require__.p = scriptUrl;
	})();

[ShashankHegde16]

After setting the public path the browser for host keeps refreshing with a warning saying remoteEntry.js couldnot be loaded but in network tab it shows 200 status.

[CalecaW]

I have the same problem, if I change the publicPath field it goes loop

[yarushinSergey]

I have the same problem, if I change the publicPath field it goes loop

[scottfwalter]

I have the same problem, if I change the publicPath field it goes loop

What do you mean by "goes loop". Do you mean the error goes away?

[CalecaW]

if I specify the publicPath, when I load the module route it reloads the host

[parronator]

Same here after upgrading to Angular 13 (using Nx tool), I have to remove the route declaration from the routing module or it keeps reloading in an infinite loop, while the console says: Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.
(error: http://localhost:4201/remoteEntry.js)
I've tried several configurations, but none of them worked, while the actual one worked with angular 12.
I've found a way to work declaring the route, and it is to specify relative route to the module using the dynamic import instead of using the remote app name and the exposed module in the config, such as:
{ path: 'verification', loadChildren: () => import('./../../../verification/src/app/remote-entry/entry.module').then((m) => m.RemoteEntryModule), },
instead of
{ path: 'verification', loadChildren: () => import('verification/Module').then((m) => m.RemoteEntryModule), },

[tinnakorn-chotnog]

I have the same problem, the shell module do reloading again and again with message "Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.". Currently I use NX and @angular-architects/module-federation": "13.0.1" , angular 13.0.2

REMOTE MODULE webpack.config.js

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const mf = require('@angular-architects/module-federation/webpack');
const path = require('path');

/**
 * We use the NX_TSCONFIG_PATH environment variable when using the @nrwl/angular:webpack-browser
 * builder as it will generate a temporary tsconfig file which contains any required remappings of
 * shared libraries.
 * A remapping will occur when a library is buildable, as webpack needs to know the location of the
 * built files for the buildable library.
 * This NX_TSCONFIG_PATH environment variable is set by the @nrwl/angular:webpack-browser and it contains
 * the location of the generated temporary tsconfig file.
 */
const tsConfigPath =
  process.env.NX_TSCONFIG_PATH ??
  path.join(__dirname, '../../tsconfig.base.json');

const workspaceRootPath = path.join(__dirname, '../../');
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  tsConfigPath,
  [
    /* mapped paths to share */
    '@mfe01/shared/data-access-user'    
  ],
  workspaceRootPath
);

module.exports = {
  output: {
    uniqueName: 'login',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
    minimize: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'login',
      filename: 'remoteEntry.js',
      exposes: {
        './Module': 'apps/login/src/app/remote-entry/entry.module.ts',
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true },
        '@angular/common': { singleton: true, strictVersion: true },
        '@angular/common/http': { singleton: true, strictVersion: true },
        '@angular/router': { singleton: true, strictVersion: true },
        ...sharedMappings.getDescriptors(),
      },
    }),
    sharedMappings.getPlugin(),
  ],
};

SHELL MODULE webpack.config.js

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const mf = require('@angular-architects/module-federation/webpack');
const path = require('path');

/**
 * We use the NX_TSCONFIG_PATH environment variable when using the @nrwl/angular:webpack-browser
 * builder as it will generate a temporary tsconfig file which contains any required remappings of
 * shared libraries.
 * A remapping will occur when a library is buildable, as webpack needs to know the location of the
 * built files for the buildable library.
 * This NX_TSCONFIG_PATH environment variable is set by the @nrwl/angular:webpack-browser and it contains
 * the location of the generated temporary tsconfig file.
 */
const tsConfigPath =
  process.env.NX_TSCONFIG_PATH ??
  path.join(__dirname, '../../tsconfig.base.json');

const workspaceRootPath = path.join(__dirname, '../../');
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  tsConfigPath,
  [
    /* mapped paths to share */
    '@mfe01/shared/data-access-user'    
  ],
  workspaceRootPath
);

module.exports = {
  output: {
    uniqueName: 'dashboard',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
    minimize: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        login: 'login@http://localhost:4201/remoteEntry.js',
      },
      shared: {
        '@angular/core': { singleton: true, strictVersion: true },
        '@angular/common': { singleton: true, strictVersion: true },
        '@angular/common/http': { singleton: true, strictVersion: true },
        '@angular/router': { singleton: true, strictVersion: true },
        ...sharedMappings.getDescriptors(),
      },
    }),
    sharedMappings.getPlugin(),
  ],
};

waiting to see some solution.

[SandeepThomas]

Try this for a temporary workaround till issue is resolved:

1. Add scriptType: 'text/javascript' to output to fix import.meta error.

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

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

2. Start the server with --liveReload=false to prevent auto reload loop.

This seems to work for now.