WebSocket connection to 'wss://localhost:3000/sockjs-node' failed: - reactjs

Question

I am working in a react application (Below Package.json)
{
"name": "seed",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8080",
"dependencies": {
"#ckeditor/ckeditor5-adapter-ckfinder": "23.1.0",
"#ckeditor/ckeditor5-alignment": "23.1.0",
"#ckeditor/ckeditor5-autoformat": "23.1.0",
"#ckeditor/ckeditor5-basic-styles": "23.1.0",
"#ckeditor/ckeditor5-block-quote": "23.1.0",
"#ckeditor/ckeditor5-build-classic": "23.1.0",
"#ckeditor/ckeditor5-ckfinder": "23.1.0",
"#ckeditor/ckeditor5-dev-utils": "^23.5.1",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^23.5.1",
"#ckeditor/ckeditor5-easy-image": "23.1.0",
"#ckeditor/ckeditor5-editor-classic": "23.1.0",
"#ckeditor/ckeditor5-editor-decoupled": "23.1.0",
"#ckeditor/ckeditor5-font": "23.1.0",
"#ckeditor/ckeditor5-heading": "23.1.0",
"#ckeditor/ckeditor5-highlight": "23.1.0",
"#ckeditor/ckeditor5-image": "23.1.0",
"#ckeditor/ckeditor5-link": "23.1.0",
"#ckeditor/ckeditor5-list": "23.1.0",
"#ckeditor/ckeditor5-media-embed": "23.1.0",
"#ckeditor/ckeditor5-paste-from-office": "23.1.0",
"#ckeditor/ckeditor5-react": "3.0.0",
"#ckeditor/ckeditor5-real-time-collaboration": "23.1.0",
"#ckeditor/ckeditor5-remove-format": "23.1.0",
"#ckeditor/ckeditor5-table": "23.1.0",
"#ckeditor/ckeditor5-theme-lark": "23.1.0",
"#date-io/date-fns": "1.3.13",
"#material-ui/core": "4.9.10",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^3.2.10",
"#types/pdfjs-dist": "^2.1.5",
"aws-amplify": "^3.0.22",
"babel-polyfill": "6.26.0",
"connected-react-router": "^6.3.2",
"date-fns": "^2.14.0",
"env-cmd": "8.0.2",
"formik": "2.1.5",
"history": "4.7.2",
"juice": "^7.0.0",
"lodash": "^4.17.11",
"pdf-viewer-reactjs": "^2.0.7",
"pdfjs-dist": "2.4.456",
"raw-loader": "^4.0.1",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-hot-toast": "^1.0.2",
"react-intl": "2.7.2",
"react-redux": "^6.0.1",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-scripts": "^2.1.5",
"redux": "4.0.1",
"redux-persist": "5.10.0",
"redux-persist-transform-filter": "^0.0.20",
"redux-saga": "^1.0.2",
"styled-components": "4.1.1",
"superagent": "4.0.0",
"typesafe-actions": "^3.0.0",
"yup": "^0.28.3"
},
"scripts": {
"start": "HTTPS=true REACT_APP_ENV=local react-app-rewired start",
"start:windows": "set HTTPS=true&&set REACT_APP_ENV=local&&react-app-rewired start",
"build": "env-cmd .env.${REACT_APP_ENV} react-app-rewired build",
"build:staging": "REACT_APP_ENV=staging env-cmd .env.staging react-app-rewired build ",
"build:qa": "REACT_APP_ENV=qa env-cmd .env.qa react-app-rewired build ",
"build:qaint": "REACT_APP_ENV=qaint env-cmd .env.qaint react-app-rewired build ",
"build:euat": "REACT_APP_ENV=euat env-cmd .env.euat react-app-rewired build ",
"test": "react-app-rewired test --maxWorkers=4",
"test:ci": "react-app-rewired test --maxWorkers=4 --all --coverage",
"eject": "react-app-rewired eject",
"analyze": "env-cmd .env.${REACT_APP_ENV} react-app-rewired build --analyze-bundle",
"test:coverage": "npm run test -- --coverage",
"generate": "plop --plopfile scripts/generators/index.js",
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
"lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
"lint-style": "stylelint 'src/**/*.style.{ts,tsx}' 'src/**/style.{ts,tsx}'",
"cypress:run": "sudo docker-compose -f docker-compose-cypress.yml run e2e-chrome"
},
"browserslist": [
">0.2%",
"not dead",
"not ie < 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"!src/**/*.test.js",
"!src/**/actions.js",
"!src/**/index.js",
"!src/**/serviceWorker.js",
"!src/**/*.wrap.js",
"!src/index.js",
"!src/tempPolyfills.js",
"!src/setupTests.js",
"!src/redux/reducers.js",
"!src/redux/sagas.js",
"!src/redux/store.js",
"!src/**/mocks/**",
"!src/redux/reducers.ts",
"!src/redux/sagas.ts"
],
"coverageThreshold": {
"global": {
"statements": 0,
"branches": 0,
"functions": 0,
"lines": 0
}
},
"snapshotSerializers": [
"<rootDir>/node_modules/enzyme-to-json/serializer"
],
"setupFiles": [
"core-js"
]
},
"bundlesize": [
{
"path": "./build/static/js/*.js",
"maxSize": "200 kB"
}
],
"devDependencies": {
"#types/cheerio": "^0.22.10",
"#types/enzyme": "^3.1.15",
"#types/enzyme-react-intl": "^2.0.0",
"#types/history": "^4.7.2",
"#types/jest": "^23.3.12",
"#types/lodash": "^4.14.119",
"#types/node": "^10.12.18",
"#types/pdf-viewer-reactjs": "^2.0.0",
"#types/react": "^16.8.3",
"#types/react-dom": "^16.0.11",
"#types/react-intl": "^2.3.15",
"#types/react-redux": "^6.0.12",
"#types/react-router": "^4.4.3",
"#types/react-router-dom": "^4.3.1",
"#types/react-test-renderer": "^16.0.3",
"#types/redux-mock-store": "^1.0.2",
"#types/styled-components": "^4.1.5",
"#types/superagent": "^3.8.6",
"#types/webpack-env": "^1.13.6",
"#types/yup": "^0.26.34",
"#typescript-eslint/eslint-plugin": "^1.6.0",
"#typescript-eslint/parser": "^1.6.0",
"babel-plugin-styled-components": "1.8.0",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.15",
"enzyme-react-intl": "^2.0.6",
"enzyme-to-json": "3.3.4",
"eslint-config-prettier": "4.1.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jest": "22.0.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-mysticatea": "4.2.4",
"eslint-plugin-prefer-object-spread": "1.2.1",
"eslint-plugin-prettier": "3.0.0",
"eslint-plugin-react": "7.11.1",
"husky": "^4.2.5",
"mockdate": "^3.0.2",
"plop": "2.1.0",
"prettier": "1.15.1",
"react-app-rewire-webpack-bundle-analyzer": "1.0.1",
"react-app-rewired": "2.1.0",
"react-test-renderer": "16.10",
"redux-mock-store": "^1.5.4",
"redux-saga-test-plan": "^4.0.0-beta.2",
"stylelint": "^9.10.1",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-declaration-strict-value": "^1.1.2",
"stylelint-processor-styled-components": "^1.5.2",
"typescript": "^3.2.2",
"wait-on": "^3.2.0",
"webpack-manifest-plugin": "^2.0.4"
}
}
Below config-overrides.js
const { styles } = require( '#ckeditor/ckeditor5-dev-utils' );
module.exports = {
webpack: function override(config, env) {
const analyzeBundle = process.argv.indexOf('--analyze-bundle') !== -1;
if (analyzeBundle) {
const rewireWebpackBundleAnalyzer = require('react-app-rewire-webpack-bundle-analyzer');
config = rewireWebpackBundleAnalyzer(config, env, {
analyzerMode: 'static',
reportFilename: 'report.html',
});
}
// Fix strange issue with webpack build
// details here: https://stackoverflow.com/questions/60407393/create-react-app-production-build-runtime-error-cannot-read-property-call-of
// TODO: maybe update webpack to fix while keeping import optimization
config.optimization.sideEffects = false;
// Customize webpack config here
console.log("Loading Custom config for Webpack, rebuilding ckeditor");
const oneOfIndex = config.module.rules.findIndex(item => {
return item.hasOwnProperty("oneOf");
});
oneOf = config.module.rules[oneOfIndex].oneOf;
// Add the SVG and CSS loaders to the oneOf array
const additions = [
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: ["raw-loader"]
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "postcss-loader",
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve("#ckeditor/ckeditor5-theme-lark")
},
minify: true
})
}
]
}
];
additions.forEach((item) => {
oneOf.push(item);
});
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
// Modify cssRegex
let loader;
loader = oneOf.find(item => {
if (item.test !== undefined)
return item.test.toString() === cssRegex.toString();
});
loader.exclude = [cssModuleRegex, /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/];
// Modify cssModuleRegex
loader = oneOf.find(item => {
if (item.test !== undefined)
return item.test.toString() === cssModuleRegex.toString();
});
loader.exclude = [/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/];
// Modify file-loader
loader = oneOf.find(item => {
if (item.loader !== undefined)
return (
item.loader.toString() === require.resolve("file-loader").toString()
);
});
loader.exclude = [
/\.(js|mjs|jsx|ts|tsx)$/,
/\.html$/,
/\.json$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/
];
config.module.rules[oneOfIndex].oneOf = oneOf;
return config;
},
devServer: function(configFunction) {
// Return the replacement function for create-react-app to use to generate the Webpack
// Development Server config. "configFunction" is the function that would normally have
// been used to generate the Webpack Development server config - you can use it to create
// a starting configuration to then modify instead of having to create a config from scratch.
return function(proxy, allowedHost) {
// Create the default config by calling configFunction with the proxy/allowedHost parameters
const defaultConfig = configFunction(proxy, allowedHost);
return {
...defaultConfig,
hot: true,
historyApiFallback: true,
// Allow mounting react apps from a page served by the backend.
headers: {
'Access-Control-Allow-Origin': 'http://localhost:8080',
},
};
};
},
};
I am trying to load another react application as a microfront end using :
I ve tested the imported microfront end in a simple react app (container) and everything went well
import React, {useCallback, useEffect} from 'react';
import {History} from 'history';
interface MicroFrontendProps {
history?: History;
name: string;
host: string | undefined;
}
const MicroFrontend: React.FC<MicroFrontendProps> = ({history, name, host,}) => {
const renderMicroFrontend = useCallback(() => {
(window as any)[`render${name}`](`${name}-container`, history);
}, [name, history]);
useEffect(() => {
const scriptId = `micro-frontend-script-${name}`;
if (document.getElementById(scriptId)) {
renderMicroFrontend();
} else {
fetch(`${host}/asset-manifest.json`)
.then(res => res.json())
.then(manifest => {
const promises = Object.keys(manifest.files)
.filter(key => key.endsWith('.js'))
.reduce((sum, key) => {
sum.push(
new Promise(resolve => {
const path = `${host}${manifest.files[key]}`;
const script = document.createElement('script');
if (key === 'main.js') {
script.id = scriptId;
}
script.onload = () => {
resolve();
};
script.crossOrigin = '';
script.src = path;
document.body.after(script);
}),
);
return sum;
}, [] as any);
Promise.allSettled(promises).then(() => {
renderMicroFrontend();
});
});
}
return () => {
(window as any)[`unmount${name}`](`${name}-container`);
};
}, [renderMicroFrontend, host, name]);
return <main id={`${name}-container`} />;
};
export default MicroFrontend;
When I am importing the app, when I go to a link which loads it I am getting this error (the imported app is rendred but server shuts down) :
webpackHotDevClient.js:60 WebSocket connection to 'wss://localhost:3000/sockjs-node' failed:
./node_modules/react-dev-utils/webpackHotDevClient.js # webpackHotDevClient.js:60
webpackHotDevClient.js:76 The development server has disconnected.
Refresh the page if necessary.
Do you have any idea about this error ?
Thanks