qiankun 子项目为create-react-app，修改任意后,主项目报错

What happens?

官方例子，修改react16即create-react-app项目后，主项目报错You need to export the functional lifecycles in react16 entry

Mini Showcase Repository(REQUIRED)

https://github.com/umijs/qiankun/tree/master/examples

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

Context

qiankun Version:
Platform Version:
Browser Version:

Mar 26 '20 08:03 bestRenekton

改了什么提供一下啊..

Mar 26 '20 08:03 kuitos

改了什么提供一下啊..

比如我改了react16 app.js里面的文字

Mar 26 '20 09:03 bestRenekton

热加载应该是关掉了吧 @Deturium 看下

Mar 26 '20 11:03 kuitos

config-overrides.js 中 devServer 的 hot 确实标记为 false 了，但热重载还是生效了

可能是 react-app-rewired 的问题，换成 rescripts 应该能解决问题

Mar 26 '20 18:03 Deturium

config-overrides.js 中 devServer 的 hot 确实标记为 false 了，但热重载还是生效了

可能是 react-app-rewired 的问题，换成 rescripts 应该能解决问题

试了，把react-app-rewired 换成react-scripts，config-overrides.js的配置搬过去，还是不行，一样的错误

Mar 27 '20 08:03 bestRenekton

ping @Deturium

Apr 21 '20 02:04 kuitos

我没事使用react-scripts，直接把config文件eject出来，然后把配置改成和react-scripts一样，可还是不行

Apr 21 '20 06:04 Pingan2018

ping @Deturium

大佬能看下我的问题么？我没有使用react-scripts，而是直接把config文件eject出来，然后把配置改成和react-scripts一样，可还是不行

Apr 21 '20 08:04 Pingan2018

这个问题还确实比较头疼。。

主要 CRA 脚手架里面，除了 HMR 的热重载之外，自己还另起了一个 live reload，而这个在非 eject 下是没有办法禁止

大佬能看下我的问题么？我没有使用 react-scripts，而是直接把 config 文件 eject 出来，然后把配置改成和react-scripts一样，可还是不行

你这里既然 eject 了那想办法把 live reload 也关了就行

Apr 21 '20 10:04 Deturium

使用 rescripts 或者 react-scripts-rewired 或者 eject 后把所有 hot reload 相关配置消除就可以了，我这里用用的是 react-scripts-rewired，亲测可行：

module.exports = {
  webpack: (config) => {
    config.entry = config.entry.filter(
      (e) => !e.includes('webpackHotDevClient')
    );

    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    config.plugins = config.plugins.filter(
      (p) => !(p instanceof webpack.HotModuleReplacementPlugin)
    );

    return config;
  },

  devServer: (config) => {
    config.port = process.env.PORT || 7101;
    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };

    config.historyApiFallback = true;

    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

Apr 26 '20 23:04 haoliangwu

使用 rescripts 或者 react-scripts-rewired 或者 eject 后把所有 hot reload 相关配置消除就可以了，我这里用用的是 react-scripts-rewired，亲测可行：

module.exports = {
  webpack: (config) => {
    config.entry = config.entry.filter(
      (e) => !e.includes('webpackHotDevClient')
    );

    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    config.plugins = config.plugins.filter(
      (p) => !(p instanceof webpack.HotModuleReplacementPlugin)
    );

    return config;
  },

  devServer: (config) => {
    config.port = process.env.PORT || 7101;
    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };

    config.historyApiFallback = true;

    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

@Deturium

Apr 27 '20 04:04 kuitos

使用 rescripts 或者 react-scripts-rewired 或者 eject 后把所有 hot reload 相关配置消除就可以了，我这里用用的是 react-scripts-rewired，亲测可行：

module.exports = {
  webpack: (config) => {
    config.entry = config.entry.filter(
      (e) => !e.includes('webpackHotDevClient')
    );

    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    config.plugins = config.plugins.filter(
      (p) => !(p instanceof webpack.HotModuleReplacementPlugin)
    );

    return config;
  },

  devServer: (config) => {
    config.port = process.env.PORT || 7101;
    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };

    config.historyApiFallback = true;

    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

config.entry.filter is not a function

Nov 20 '20 06:11 weixiaoxi

使用 rescripts 或者 react-scripts-rewired 或者 eject 后把所有 hot reload 相关配置消除就可以了，我这里用用的是 react-scripts-rewired，亲测可行：

module.exports = {
  webpack: (config) => {
    config.entry = config.entry.filter(
      (e) => !e.includes('webpackHotDevClient')
    );

    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    config.plugins = config.plugins.filter(
      (p) => !(p instanceof webpack.HotModuleReplacementPlugin)
    );

    return config;
  },

  devServer: (config) => {
    config.port = process.env.PORT || 7101;
    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };

    config.historyApiFallback = true;

    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

config.entry.filter is not a function

我也遇到了这个问题，请问你解决了么？

Nov 27 '20 07:11 Elk-song

Has anyone figured out how to fix this?

Dec 22 '20 13:12 rubenfranca

使用 rescripts 或者 react-scripts-rewired 或者 eject 后把所有 hot reload 相关配置消除就可以了，我这里用用的是 react-scripts-rewired，亲测可行：

module.exports = {
  webpack: (config) => {
    config.entry = config.entry.filter(
      (e) => !e.includes('webpackHotDevClient')
    );

    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    config.plugins = config.plugins.filter(
      (p) => !(p instanceof webpack.HotModuleReplacementPlugin)
    );

    return config;
  },

  devServer: (config) => {
    config.port = process.env.PORT || 7101;
    config.headers = {
      'Access-Control-Allow-Origin': '*',
    };

    config.historyApiFallback = true;

    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

config.entry.filter is not a function

我也遇到了这个问题，请问你解决了么？

CRA 4.0.0.不能这样写，改一改，如下：

const { name } = require("./package.json");
const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  webpack: function override(config, env) {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = "umd";
    config.output.jsonpFunction = `webpackJsonp_${name}`;

    // Remove 'react-refresh' from the loaders.
    for (const rule of config.module.rules) {
      if (!rule.oneOf) continue;

      for (const one of rule.oneOf) {
        if (one.loader && one.loader.includes("babel-loader") && one.options && one.options.plugins) {
          one.options.plugins = one.options.plugins.filter(
            (plugin) => typeof plugin !== "string" || !plugin.includes("react-refresh")
          );
        }
      }
    }

    config.plugins = config.plugins.filter(
      (plugin) => !(plugin instanceof webpack.HotModuleReplacementPlugin) && !(plugin instanceof ReactRefreshPlugin)
    );

    return config;
  },
  devServer: (configFunction) => {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.open = false;
      config.hot = false;
      config.headers = {
        "Access-Control-Allow-Origin": "*",
      };
      return config;
    };
  },
};

参考：https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd#gistcomment-3516287

Dec 24 '20 05:12 jingping-ye

so, "start": "cross-env PORT=9090 WDS_SOCKET_PORT=9090 这样就不会了

Feb 02 '21 13:02 ruoruoji

Has anyone figured out how to fix this?

This article will help you https://juejin.cn/post/6927972972640600078/

Feb 11 '21 15:02 ruoruoji

把端口写进去也不行，感觉应该是版本的问题，我的vue 3.0+ts是最新的版本，react 项目使用的creat-react-app + ts官方脚手架，最新版本17，安装最新的react-app-rewired 可能最新版本改动，按照const { name } = require("./package.json"); const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); const webpack = require("webpack");

module.exports = { webpack: function override(config, env) { config.output.library = ${name}-[name]; config.output.libraryTarget = "umd"; config.output.jsonpFunction = webpackJsonp_${name};

// Remove 'react-refresh' from the loaders.
for (const rule of config.module.rules) {
  if (!rule.oneOf) continue;

  for (const one of rule.oneOf) {
    if (one.loader && one.loader.includes("babel-loader") && one.options && one.options.plugins) {
      one.options.plugins = one.options.plugins.filter(
        (plugin) => typeof plugin !== "string" || !plugin.includes("react-refresh")
      );
    }
  }
}

config.plugins = config.plugins.filter(
  (plugin) => !(plugin instanceof webpack.HotModuleReplacementPlugin) && !(plugin instanceof ReactRefreshPlugin)
);

return config;

}, devServer: (configFunction) => { return function (proxy, allowedHost) { const config = configFunction(proxy, allowedHost); config.open = false; config.hot = false; config.headers = { "Access-Control-Allow-Origin": "*", }; return config; }; }, }; 这个写法就Ok了

Mar 05 '21 06:03 yulintianxia

@kuitos @Deturium

你好，我遇到一個狀況是主應用隨意修改任何東西，儲存後，(主+子)頁面會整個黑掉，並且跳出以下這個錯誤訊息 iShot_2023-11-01_14 40 06

找了一年多的相關詞彙都找不到解決方式，每次一更新主應用就掛掉一次，要自己手動整理後來幾乎都不主子應用一起開啟了，想請求協助。

Nov 01 '23 06:11 Bonnie8ni

qiankun qiankun copied to clipboard

子项目为create-react-app，修改任意后,主项目报错

What happens?

Mini Showcase Repository(REQUIRED)

How To Reproduce

Context

qiankun
qiankun copied to clipboard