This repository has been archived by the owner on Aug 5, 2020. It is now read-only.
在create-react-app中使用：react-dom.development.js:12000 Uncaught TypeError: Cannot read property '_federation_website2' of undefined #3
Comments
|
Thanks for reporting issue, could you provide a repo to reproduce this problem? |
|
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 |
|
I have the same problem , maybe it does not work well in 'create-react-app'。Or it can't handle remote modules |
|
Cra uses runtimeChunk:single. Requiring additional steps to be take |
|
|
You may also want to investigate sidecar builds in webpack 5 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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 = () => (
The text was updated successfully, but these errors were encountered: