React模块联合-未捕获的错误：共享模块不可用于即时使用：webpack/共享/使用/默认/React/React

wkftcu5l 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(149)

我正在尝试React模块联合。我已经使用create-react-app命令创建了两个React应用程序（modulefederation 1、modulefederation 2）。我收到“未捕获的错误：共享模块不可用于即时使用：webpack/共享/消费/默认/React/React'错误时，我运行的应用程序。

**节点版本：**v16.14.2

下面是我的代码。

模块联合1：
包.json：

{
  "name": "modulefederation1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "html-webpack-plugin": "^5.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "serve": "^13.0.2",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "web-vitals": "^2.1.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --config webpack.prod.js",
    "serve": "serve dist -p 3002",
    "clean": "rm -rf dist"
},
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

网络包配置.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // only add this if you don't have yet
const { ModuleFederationPlugin } = webpack.container;
const deps = require('./package.json').dependencies;

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  console.log({ isProduction });
  return {
    entry: './src/index.tsx',
    mode: process.env.NODE_ENV || 'development',
    devServer: {
      port: 3000,
      open: true,
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js'],
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx|tsx|ts)$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },

    plugins: [
      new ModuleFederationPlugin({
        name: 'container',
        remotes: {
          app1: 'app1@http://localhost:3001/remoteEntry.js'
        },
        shared: {
          ...deps,
          react: { singleton: true, eager: true, requiredVersion: deps.react },
          'react-dom': {
            singleton: true,
            eager: true,
            requiredVersion: deps['react-dom'],
          },
        },
      }),
      new HtmlWebpackPlugin({
        template: './public/index.html',
      }),
    ],
  };
};

公共/索引.html：

<html>
  <head>
    <title>CONTAINER</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

源代码/索引.tsx：

import './bootstrap';

源代码/引导程序.tsx：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

源/应用程序.tsx：

import React from 'react';

const ModuleFederationTwo = React.lazy(() => import('app1/ModuleFederationTwo'));

function App() {
  return (
    <div >
     Container application
    </div>
  );
}

export default App;

模块联合2：
Package.json文件与模块联邦1相同，除了**“名称”：“模块联合2”**
网络包配置.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');
const deps = require('./package.json').dependencies;

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  devServer: {
    port: 3001,
    open: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        // expose each component
        './ModuleFederationTwo': './src/App',
      },
      shared: {
        ...deps,
        react: { singleton: true, eager: true, requiredVersion: deps.react },
        'react-dom': {
          singleton: true,
          eager: true,
          requiredVersion: deps['react-dom'],
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

源代码/索引.tsx和源代码/引导程序.tsx文件与模块联邦1相同
源/应用程序.tsx：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      MFE application One
    </div>
  );
}

export default App;

我使用Yarn开始运行两个模块联邦1和模块联邦2。
我得到main.js：1312未捕获的错误：共享模块不可用于即时使用：webpack/共享/使用/默认/React/React当我运行modulefederation 1应用程序时出错。
当我浏览每个人都说，索引代码应该被移动到引导程序，我已经这样做了。我有任何其他的解决方案？

网络：

webpack

来源：https://stackoverflow.com/questions/72273886/react-module-federation-uncaught-error-shared-module-is-not-available-for-eag

2条答案

按热度按时间

wvt8vs2t1#

导入引导后，在src/index.tsx内添加export {}

赞(0）回复(0）举报 2022-11-13

8ehkhllq2#

我能够通过更改下面的代码使上面的代码工作。

模块联合1：
**public/index.html：-**添加脚本标记<script src="http://localhost:3001/remoteEntry.js"></script>

<html>
  <head>
    <script src="http://localhost:3001/remoteEntry.js"></script>
    <title>CONTAINER</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

**webpack.config.js：**更改远程应用程序1的值

remotes: {
          app1: 'app1'
        },

赞(0）回复(0）举报 2022-11-13

我来回答

React模块联合-未捕获的错误：共享模块不可用于即时使用：webpack/共享/使用/默认/React/React

2条答案

相关问题

热门标签

最新问答