Error: Module parse failed for @angular-architects/native-federation (@softarc/native-federation-runtime) 17.08.

[Patrick Stäbler]

Issue Overview:

I encountered an error while building an angular application for my cypress component testings. While building a webpack compilation error is thrown that prevents the component to start successfully. I am using native federation with programmatic loading the remotes. The error seems to be triggered by @softarc/native-federation-runtime

Error message:

ERROR in ./node_modules/@angular-architects/native-federation/src/index.js 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export * from '@softarc/native-federation-runtime';

Versions:

Angular version: 17.3.1
Cypress version: 13.8.1
Node.js version: 18
Operating System: windows

"@angular-architects/module-federation": "17.0.8",
"@angular-architects/native-federation": "17.1.8",

tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "dom", "dom.iterable"],
    "paths": {
      "@shared": ["./lib/shared/src/api.ts"],
      "@shared-dummy-data": ["./lib/shared/src/dummy-data-api.ts"],
      "@shared-testing": ["./lib/shared/src/testing-api.ts"]
    },
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["node_modules/@types"],
    "emitDecoratorMetadata": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictPropertyInitialization": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

[Emyr]

Have you tried using @softarc/native-federation-runtime ?

For a related discussion, you can refer to this comment.

[Patrick Stäbler]

@3myr I just tried it and it works like a charm. Thanks you!