ReferenceError: require is not defined on production mode

[Daggle24]

When I upload my builded files to an s3 bucket, I get this error, I noticed the error comes from this line:

main.ts

import { loadRemoteEntry } from '@angular-architects/module-federation';

Promise.all([
    loadRemoteEntry({ type: 'module', remoteEntry: 'http://react-mf-bucket.s3-website-us-east-1.amazonaws.com/remoteEntry.js'})
])
.then(() => import('./bootstrap'))
.catch(err => console.error('error', err));

any load method from '@angular-architects/module-federation' gives me this error on my production bucket.

But on my localhost environment it works without any problem.

(Im guessing that is because im running my shell app with node instead of a static site.)

package.json

{
  "name": "motusMF",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts"{
  "name": "motusMF",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "run:all": "node node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.2.2",
    "@angular/elements": "^15.1.1",
    "@angular/forms": "^15.2.2",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor/app": "4.1.1",
    "@capacitor/core": "4.6.2",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/keyboard": "4.1.1",
    "@capacitor/status-bar": "4.1.1",
    "@ionic/angular": "^6.1.9",
    "ionicons": "^6.0.3",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-architects/module-federation": "^15.0.3",
    "@angular-architects/module-federation-tools": "^15.0.3",
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^14.0.0",
    "@angular-eslint/eslint-plugin": "^14.0.0",
    "@angular-eslint/eslint-plugin-template": "^14.0.0",
    "@angular-eslint/template-parser": "^14.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^15.0.0",
    "@capacitor/cli": "4.6.2",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ngx-build-plus": "^15.0.0",
    "rxjs": "^7.8.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  },
  "description": "An Ionic project"
}

: {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "run:all": "node node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.2.2",
    "@angular/elements": "^15.1.1",
    "@angular/forms": "^15.2.2",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor/app": "4.1.1",
    "@capacitor/core": "4.6.2",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/keyboard": "4.1.1",
    "@capacitor/status-bar": "4.1.1",
    "@ionic/angular": "^6.1.9",
    "ionicons": "^6.0.3",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-architects/module-federation": "^15.0.3",
    "@angular-architects/module-federation-tools": "^15.0.3",
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^14.0.0",
    "@angular-eslint/eslint-plugin": "^14.0.0",
    "@angular-eslint/eslint-plugin-template": "^14.0.0",
    "@angular-eslint/template-parser": "^14.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^15.0.0",
    "@capacitor/cli": "4.6.2",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~4.3.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ngx-build-plus": "^15.0.0",
    "rxjs": "^7.8.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  },
  "description": "An Ionic project"
}

webpack.config.js:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

    name: "motusMF",
    filename: "remoteEntry.js",
    exposes: {
        './motusApp': './src/home/home.page.ts',
    }, 

    shared: {
        ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
    },

});

module.exports= {
    mode: 'production',
    output: { 
        uniqueName: "motusMF",
        publicPath: "",
        scriptType: 'text/javascript'
    },
  }

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2020",
    "module": "ES2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

[dzurrahman]

Same here, i got solution, but it's not good solution for production mode, u can set optimization: false in angular.json config for production,

example :

"production": {
  "optimization: false",
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "500kb",
      "maximumError": "1mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "2kb",
      "maximumError": "4kb"
    }
  ],
  "fileReplacements": [
    {
      "replace": "apps/greatdayhr-apps/src/environments/environment.ts",
      "with": "apps/greatdayhr-apps/src/environments/environment.prod.ts"
    }
  ],
  "outputHashing": "none",
  "customWebpackConfig": {
    "path": "apps/greatdayhr-apps/webpack.prod.config.js"
  }
},

[Daggle24]

Setting optimization:false fixed the issue. however, I'll leave the issue open until we get a more targeted solution for this!

[dzurrahman]

agree, and there is information regarding the 'optimization' flag.

https://stackoverflow.com/questions/61630773/angular-difference-between-optimization-and-buildoptimizer-in-the-build-co

[dzurrahman]

update, try to change file .browserlist

# Firefox ESR
# not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

Chrome >=79
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14

[ArioShaman]

agree, and there is information regarding the 'optimization' flag.

https://stackoverflow.com/questions/61630773/angular-difference-between-optimization-and-buildoptimizer-in-the-build-co

Thx your solution really helps me.

In my case "optimization: false" doesn't work