Mfe Shell fail to load remote module with "fn is not a function" error

yoan-asdrubal commented 2 years ago

I am creating an nx-workspace and installing libraries in it preparing it for an application migration. I am installing one library at a time and I am testing to detect version errors, after each check I make a commit and move on to the next one. While installing ngx-clipboard I had compatibility problems with the versions of angular, I looked on the internet and somehow I had to force it to install version 15 although I couldn't find it in npmjs, but when I ran npm install ngx-clipboard @ 15 the I install. During this process of version problems I tried to install with yarn and use resolutions in the json package to resolve the conflicts but it did not work for me, and more than once I switched between npm and yarn to install dependencies. After solving with version 15 of the library, I run the application and it turns out that it gives me problems to load the modules of the remote applications.

After those changes and I found ngx-clipboard version 15, I clean up my changes after last commit, and install it again , configure module imports on diferent modules and apps, and however i get the same error. This has happened to me twice more before but I did not keep track of what I was doing, I installed several libraries at the same time and I did not know where it was broken that it reached that error, so I created a new repo each time and tried another procedure, until that on this third occasion I did it one bookstore at a time, and suddenly it gave me that problem for no apparent reason that I can identify.Even If I revert all changes on my workspaces, I keep getting the same error.

The applications work separately without problems, even if I try to load from the browser http: // localhost: 4201 / remoteEntry.js of the microfrontend application, it loads a js file without any problems.

Current Behavior

I get this error when I try to load remote mfe core.mjs:6484 ERROR Error: Uncaught (in promise): TypeError: fn is not a function while loading "./Module" from 4033 TypeError: fn is not a function while loading "./Module" from 4033 at handleFunction (remotes loading:33) at onInitialized (remotes loading:45) at handleFunction (remotes loading:38) at onExternal (remotes loading:44) at handleFunction (remotes loading:38) at remotes loading:52 at Array.forEach () at Object.__webpack_require__.f.remotes (remotes loading:15) at ensure chunk:6 at Array.reduce () at resolvePromise (zone.js:1213) at resolvePromise (zone.js:1167) at zone.js:1279 at ZoneDelegate.invokeTask (zone.js:406) at Object.onInvokeTask (core.mjs:25463) at ZoneDelegate.invokeTask (zone.js:405) at Zone.runTask (zone.js:178) at drainMicroTaskQueue (zone.js:582) at ZoneTask.invokeTask [as invoke] (zone.js:491) at invokeTask (zone.js:1600)

Expected Behavior

load remote apps successfully

Steps to Reproduce

I cant reproduce with steps, however, here a share my current codes and workpsace configurations https://github.com/yoan-asdrubal/nx-workspace

Environment

Node : 14.17.5 OS : win32 x64 npm : 6.14.14

nx : undefined @nrwl/angular : 13.3.6 @nrwl/cli : 13.2.1 @nrwl/cypress : 13.3.5 @nrwl/devkit : 13.3.6 @nrwl/eslint-plugin-nx : 13.3.5 @nrwl/express : undefined @nrwl/jest : 13.3.5 @nrwl/linter : 13.3.5 @nrwl/nest : undefined @nrwl/next : undefined @nrwl/node : undefined @nrwl/nx-cloud : undefined @nrwl/react : undefined @nrwl/react-native : undefined @nrwl/schematics : undefined @nrwl/tao : 13.2.1 @nrwl/web : undefined @angular/forms: 13.1.0 @angular/material: 13.1.0 @angular/platform-browser: 13.1.0 @angular/platform-browser-dynamic: 13.1.0 @angular/router: 13.1.0 @angular-devkit/build-angular: 13.0.4 @angular/cli: 13.0.4 @angular/compiler-cli: 13.1.0 @angular/language-service: 13.1.0

yoan-asdrubal commented 2 years ago

Fixed with @nrwl/cli": "13.3.9" released .

monkeycatdog commented 2 years ago

I have the same issue

"@angular-builders/custom-webpack": "^13.1.0", "@angular-devkit/build-angular": "13.2.2", "@angular-devkit/core": "^13.2.3", "@angular-eslint/eslint-plugin": "13.0.1", "@angular-eslint/eslint-plugin-template": "13.0.1", "@angular-eslint/template-parser": "13.0.1", "@angular/cli": "13.2.2", "@angular/compiler-cli": "13.2.2", "@angular/language-service": "13.2.2", "@compodoc/compodoc": "^1.1.15", "@faker-js/faker": "^5.5.3", "@ngrx/store-devtools": "13.0.2", "@nrwl/cli": "13.8.2", "@nrwl/cypress": "13.8.1", "@nrwl/eslint-plugin-nx": "13.8.1", "@nrwl/jest": "13.8.1", "@nrwl/linter": "13.8.1", "@nrwl/nx-cloud": "13.1.4", "@nrwl/storybook": "13.8.1", "@nrwl/tao": "13.8.1", "@nrwl/workspace": "13.8.1", "@sentry/types": "^6.15.0", "@storybook/addon-a11y": "^6.3.0", "@storybook/addon-essentials": "6.4.18", "@storybook/addon-links": "^6.4.12", "@storybook/addon-storysource": "^6.4.12", "@storybook/addon-viewport": "^6.4.12", "@storybook/angular": "6.4.18", "@storybook/builder-webpack5": "6.4.18", "@storybook/manager-webpack5": "6.4.18", "@types/faker": "^5.5.8", "@types/howler": "^2.2.4", "@types/jasmine": "~3.3.9", "@types/jasminewd2": "~2.0.6", "@types/jest": "27.0.2", "@types/jquery": "^3.4.1", "@types/lodash": "^4.14.121", "@types/mixpanel-browser": "^2.35.7", "@types/node": "^12.11.1", "@types/qs": "^6.9.7", "@types/ramda": "^0.27.64", "chromatic": "^6.3.4", "codelyzer": "^6.0.2", "creevey": "^0.7.39", "cypress": "^8.3.0", "eslint-plugin-cypress": "^2.10.3", "gts": "^3.1.0", "jasmine-core": "~3.8.0", "jasmine-spec-reporter": "~5.0.0", "jest": "27.2.3", "jest-html-reporter": "^3.4.2", "jest-preset-angular": "11.0.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-html-reporter": "^0.2.7", "karma-htmlfile-reporter": "^0.3.8", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "ng-mocks": "^13.0.2", "ng-packagr": "13.2.1", "postcss": "^8.3.9", "postcss-import": "^14.0.2", "postcss-preset-env": "^6.7.0", "postcss-url": "^10.1.1", "protractor": "~7.0.0", "raw-loader": "^4.0.1", "rimraf": "^3.0.2", "storybook-addon-designs": "^6.2.1", "storybook-addon-themes": "^6.1.0", "stylelint": "^13.13.1", "stylelint-config-prettier": "^9.0.3", "stylelint-config-rational-order": "^0.1.2", "stylelint-config-standard": "^22.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.4.0", "stylelint-high-performance-animation": "^1.5.2", "stylelint-no-unsupported-browser-features": "^5.0.2", "stylelint-order": "^4.1.0", "stylelint-prettier": "^1.2.0", "stylelint-scss": "^3.21.0", "ts-jest": "^27.1.3", "ts-node": "~8.0.2", "typescript": "4.5.5", "webpack": "^5.64.0", "webpack-bundle-analyzer": "^4.5.0"

indumathyj commented 2 years ago

When I Implement "https://github.com/Coly010/ng-mfe-example" in my new ng-mfe Nx Project it is working fine. When I try to Integrate the same in our Existing Project . I got error import.meta But after adding "scriptType: 'text/javascript " the error fixed. module.exports = { output: { uniqueName: 'dashboard', publicPath: 'auto', scriptType: 'text/javascript

I fixed looping issue (Start the server with --liveReload=false to prevent auto reload loop.) and import.meta "https://github.com/angular-architects/module-federation-plugin/issues/96#issuecomment-977872267" but while browsing dashboard the UserName, Password is not loaded. Please guide me.

angular.json

"dashboard": { "projectType": "application", "root": "apps/dashboard", "sourceRoot": "apps/dashboard/src", "prefix": "sample", "architect": { "build": { "builder": "@nrwl/angular:webpack-browser", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/apps/dashboard", "index": "apps/dashboard/src/index.html", "main": "apps/dashboard/src/main.ts", "polyfills": "apps/dashboard/src/polyfills.ts", "tsConfig": "apps/dashboard/tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "apps/dashboard/src/favicon.ico", "apps/dashboard/src/assets" ], "styles": ["apps/dashboard/src/styles.scss"], "scripts": [], "customWebpackConfig": { "path": "apps/dashboard/webpack.config.js" } }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "apps/dashboard/src/environments/environment.ts", "with": "apps/dashboard/src/environments/environment.prod.ts" } ], "outputHashing": "all", "customWebpackConfig": { "path": "apps/dashboard/webpack.prod.config.js" } }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@nrwl/angular:webpack-server", "configurations": { "production": { "browserTarget": "dashboard:build:production" }, "development": { "browserTarget": "dashboard:build:development" } }, "defaultConfiguration": "development", "options": { "publicHost": "http://localhost:4200" } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "dashboard:build" } }, "lint": { "builder": "@nrwl/linter:eslint", "options": { "lintFilePatterns": [ "apps/dashboard/src/*/.ts", "apps/dashboard/src/*/.html" ] } }, "test": { "builder": "@nrwl/jest:jest", "outputs": ["coverage/apps/dashboard"], "options": { "jestConfig": "apps/dashboard/jest.config.js", "passWithNoTests": true } }, "serve-mfe": { "builder": "@nrwl/workspace:run-commands", "options": { "commands": ["nx serve login", "nx serve dashboard"] } } }, "tags": [] },

"login": { "projectType": "application", "root": "apps/login", "sourceRoot": "apps/login/src", "prefix": "sample", "architect": { "build": { "builder": "@nrwl/angular:webpack-browser", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/apps/login", "index": "apps/login/src/index.html", "main": "apps/login/src/main.ts", "polyfills": "apps/login/src/polyfills.ts", "tsConfig": "apps/login/tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": ["apps/login/src/favicon.ico", "apps/login/src/assets"], "styles": ["apps/login/src/styles.scss"], "scripts": [], "customWebpackConfig": { "path": "apps/login/webpack.config.js" } }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "apps/login/src/environments/environment.ts", "with": "apps/login/src/environments/environment.prod.ts" } ], "outputHashing": "all", "customWebpackConfig": { "path": "apps/login/webpack.prod.config.js" } }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@nrwl/angular:webpack-server", "configurations": { "production": { "browserTarget": "login:build:production" }, "development": { "browserTarget": "login:build:development" } }, "defaultConfiguration": "development", "options": { "port": 4201 } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "login:build" } }, "lint": { "builder": "@nrwl/linter:eslint", "options": { "lintFilePatterns": [ "apps/login/src/*/.ts", "apps/login/src/*/.html" ] } }, "test": { "builder": "@nrwl/jest:jest", "outputs": ["coverage/apps/login"], "options": { "jestConfig": "apps/login/jest.config.js", "passWithNoTests": true } } }, "tags": [] },

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx