xcodebuild
commented
4 years ago Thanks for reporting issue, could you provide a repo to reproduce this problem?
Open flyyuan opened 4 years ago
xcodebuild
commented
4 years ago Thanks for reporting issue, could you provide a repo to reproduce this problem?
flyyuan
commented
4 years ago https://github.com/flyyuan/cra-module-federation4
1.Add config-overrides.js in the root directory
const { override,addWebpackPlugin, } = require('customize-cra');
const ModuleFederationPlugin = require('webpack-plugin-module-federation')
module.exports = {
webpack: override(
addWebpackPlugin(
new ModuleFederationPlugin({
remotes: {
website2: '_federation_website2',
},
}),
),
)
};2.Override optimization for cra-federation4/node_modules/react-scripts/config/webpack.config.js
optimization: {
minimize: false,
},3.cra-federation4/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="http://localhost:3002/remoteEntry.js"></script>
</body>
</html>cra-federation4/src/App.tsx
import React, { lazy, Suspense } from "react";
import logo from "./logo.svg";
import "./App.css";
const Title = lazy(() => import("website2/Title").then((mod) => mod.default));
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Suspense fallback={<div>loading</div>}>
<Title />
</Suspense>
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
cra-federation4\src\website2.d.ts
declare module "website2/Title"{
const Title: React.ComponentType<{},any>;
export default Title;
}4.start cra-federation4 and module-federation4\examples\website2
wuweikd
commented
4 years ago I have the same problem , maybe it does not work well in 'create-react-app'。Or it can't handle remote modules
ScriptedAlchemy
commented
4 years ago Cra uses runtimeChunk:single. Requiring additional steps to be take
dmitrykuznetsovdev
commented
4 years ago // change react-scripts settings
function patchConfig(conf) {
const config = {...conf};
config.output.publicPath = packagejson.homepage;
// It is very important
config.output.globalObject = 'window';
delete config.optimization.runtimeChunk;
return config;
}You may also want to investigate sidecar builds in webpack 5
Uncaught TypeError: Cannot read property '_federation_website2' of undefined at remote "Title":3 at Object.website2/Title (remote "Title":5) at __webpack_require__ (bootstrap:790) at fn (bootstrap:150) at fn.t (bootstrap:194)
addWebpackPlugin( new ModuleFederationPlugin({ remotes: { website2: '_federation_website2', }, }), ),`const Title = lazy(() => import('website2/Title').then(mod => mod.default))const HomeComp = () => (
)`