问题描述
我正在使用 React 应用程序（在 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,tsx}' --fix","lint-style": "stylelint 'src/**/*.style.{ts,tsx}' 'src/**/style.{ts,"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"
}
}
在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',};
};
},};
我正在尝试使用以下方法加载另一个 React 应用程序作为微前端： 我已经在一个简单的 React 应用程序（容器）中测试了导入的微前端，一切顺利
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,name]);
return <main id={`${name}-container`} />;
};
export default MicroFrontend;
当我导入应用程序时，当我转到加载它的链接时出现此错误（导入的应用程序被渲染但服务器关闭）：
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.
你知道这个错误吗？
谢谢
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）