Live Reload for Angular Frontend (configuration.entry['main'] should not contain the item '[...]sockjs-node' twice)

[Laurianti]

Hi, I've created an Angular frontend, if I run:

npm run serve:single-spa:example

This script uses:

--live-reload false

Instead If I set:

--live-reload true

I get this error:

An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry['main'] should not contain the item 'C:\Workspace\example\project-example\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' twice.
   -> A non-empty array of non-empty strings
See "C:\Users\user\AppData\Local\Temp\ng-pDaMMT\angular-errors.log" for further details.

Why? I can serve the Angular frontend with "live reload"? Thank you

[joeldenning]

I transferred this issue to single-spa-angular. I was the one who originally implemented this, but it was maybe 3 years ago so I don't remember the details. My basic understanding of why live-reload is set to false is that Angular CLI's wepback config is very rigid in its assumptions and live reloading maybe changed the webpack entry in such a way that the main.ts exports were lost. However, I might be remembering it wrong since this was probably 2016 when I first added --live-reload false

I won't have time to look into this myself but welcome others who want to help with it.

[joeldenning]

Here's a discussion where someone else was facing the same issue:

https://single-spa.slack.com/archives/C8R6U7MT7/p1608216112406100

Slack Join Link

[ThielChristoph]

@joeldenning the slack invitation link is not working anymore. Could you setup a new one?

[filoxo]

You can use this link instead: Slack join link (Slack now expires links after 30 days so we have to manually re-generate them)

[exaucae]

Sorry to reopen this, I am facing the exact same one. No matter how the live reload is set ( true or false).

The last slack link is no longer active. I can't see how y'all did to fix the issue. Would you mind giving the solution for the rest of us?

Here's the stack trace:

An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API s
chema.
 - configuration.entry['main'] should not contain the item 'C:\Users\xxxx\seeker-service\node_
modules\@angular-builders\custom-webpack\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' twice.
   -> A non-empty array of non-empty strings
See "C:\Users\UTILIS~1\AppData\Local\Temp\ng-aL6xDk\angular-errors.log" for further details.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ghost]

I met the same issue when I used "@angular-builders/custom-webpack": "11.1.1", with details: An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.entry['main'] should not contain the item 'D:\doan\category\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' twice. -> A non-empty array of non-empty strings See "C:\Users\Admin\AppData\Local\Temp\ng-SYb74g\angular-errors.log" for further details.

I change from"@angular-builders/custom-webpack": "11.1.1" to "@angular-builders/custom-webpack": "10.0.1" it work but in the console throw a lot error about webpack-dev-server.

Could you give me a solution? @joeldenning

[exaucae]

@joeldenning , @filoxo,

We're sorry to bother. The issue prevents us from moving on. Would you mind giving us a clue?

[khoapham-prive]

@joeldenning , @filoxo,

We're sorry to bother. The issue prevents us from moving on. Would you mind giving us a clue?

I fixed it by add "--live-reload false" to the start script "scripts": { "ng": "ng", "start": "ng serve --port 4201 --live-reload false", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build:single-spa:category": "ng build category --prod --deploy-url http://localhost:4200/", "serve:single-spa:category": "ng s --project category --disable-host-check --port 4200 --deploy-url http://localhost:4200/ --live-reload false" },

[exaucae]

Thanks, @khoapham-prive , I'm going to try that. Did not add it to the start srcipt.

Update: works fine now. Thanks!

I need dev live reload , but I'll cope with it by the time the issue get adressed properly.

[swaheed2]

Add this to extra-webpack.config.js to fix for now:

  // temp fix for
  // An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 // - configuration.entry['main'] should not contain the item '\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' twice.
 let removeDup = {};
 singleSpaWebpackConfig.entry.main = singleSpaWebpackConfig.entry.main.filter((item) => {
  if(!removeDup[item]) {
    removeDup[item] = true;
    return true;
  }
  return false;
 });

[tchopra91]

I am facing similar issue after I upgraded my micro-apps to angular v12. Please provide a permanent fix.

[joeldenning]

The single-spa-angular project does not have many active maintainers and we welcome community contributions to help fix this.

[tscislo]

Unfortunately same here. With live-reload true it works fine with v10, however v12 works only with live-reload false

[tscislo]

Finally was able to fix that doing this change in extra-webpack.config.js With this I was able to run ng12 app with live-reload true

module.exports = (config, options) => {
  const defaultConfig = singleSpaAngularWebpack(config, options);
  defaultConfig.entry.main = [...new Set(defaultConfig.entry.main)];
  return defaultConfig
};

[cjosue15]

Finally was able to fix that doing this change in extra-webpack.config.js With this I was able to run ng12 app with live-reload true

module.exports = (config, options) => {
  const defaultConfig = singleSpaAngularWebpack(config, options);
  defaultConfig.entry.main = [...new Set(defaultConfig.entry.main)];
  return defaultConfig
};

hi when i add this i have those problems, am i doing something wrong? :(

package.json

{
  "name": "todo-form",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "build:single-spa:todo-form": "ng build todo-form --prod",
    "serve:single-spa:todo-form": "ng s --project todo-form --disable-host-check --port 4000 --live-reload true"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "rxjs": "~6.6.0",
    "single-spa": ">=4.0.0",
    "single-spa-angular": "^5.0.2",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "12.1.3",
    "@angular-devkit/build-angular": "~12.2.10",
    "@angular/cli": "~12.2.10",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }
}

[tscislo]

@cjosue15 I think your code is ok, do you have a stackblitz or repo to reproduce that?

[cjosue15]

@cjosue15 I think your code is ok, do you have a stackblitz or repo to reproduce that?

Hello @tscislo , sorry for the late reply, this is my github repo, please if you have any question, let me know.

[tscislo]

@cjosue15 I cannot see modifications in your webpack config: https://github.com/cjosue15/microfrontend-example/blob/main/todo-list-react/webpack.config.js

[cjosue15]

@tscislo I think you looked in the worng file. This is the correct url: Angular repo

by the way, i created a new branch for you test-angular with your config in webpack and the option in true for the live reload in the package.json.

Thanks for your help!

[arturovt]

This seems to be resolved with the latest published version. I've just checked it with our integration apps that we have, I've run them with live-reload enabled and I didn't encounter any error.