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

bestRenekton · 2020-03-26T08:20:39Z

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:

kuitos · 2020-03-26T08:54:12Z

改了什么提供一下啊..

bestRenekton · 2020-03-26T09:46:51Z

改了什么提供一下啊..

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

kuitos · 2020-03-26T11:26:03Z

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

Deturium · 2020-03-26T18:23:12Z

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

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

bestRenekton · 2020-03-27T08:03:33Z

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

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

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

kuitos · 2020-04-21T02:42:57Z

ping @Deturium

Pingan2018 · 2020-04-21T06:40:58Z

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

Pingan2018 · 2020-04-21T08:27:20Z

ping @Deturium

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

Deturium · 2020-04-21T10:42:01Z

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

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

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

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

haoliangwu · 2020-04-26T23:28:53Z

使用 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;
  },
};

kuitos · 2020-04-27T04:28:00Z

使用 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

weixiaoxi · 2020-11-20T06:32:40Z

使用 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

Elk-song · 2020-11-27T07:13:39Z

使用 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

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

rubenfranca · 2020-12-22T13:29:44Z

Has anyone figured out how to fix this?

jingping-ye · 2020-12-24T05:17:28Z

使用 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

ruoruoji · 2021-02-02T13:55:38Z

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

ruoruoji · 2021-02-11T15:20:17Z

Has anyone figured out how to fix this?

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

yulintianxia · 2021-03-05T06:36:10Z

把端口写进去也不行，感觉应该是版本的问题，我的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了

Bonnie8ni · 2023-11-01T06:43:32Z

@kuitos @Deturium

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

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

kuitos assigned Deturium Mar 26, 2020

Deturium mentioned this issue Mar 30, 2020

🐛 fix examples #367

Merged

4 tasks

kuitos closed this as completed in #367 Mar 31, 2020

kuitos reopened this Apr 21, 2020

kuitos mentioned this issue Apr 21, 2020

[Bug]使用qiankun时如果子项目是react项目本地开发联调时总是报错 #475

Closed

kuitos mentioned this issue Apr 28, 2020

子项目热加载问题 #395

Closed

kuitos mentioned this issue Jul 24, 2020

开发调试阶段的稳定性. #794

Closed

kuitos mentioned this issue Oct 9, 2020

使用 react-create-app 创建的项目，子应用只要修改了任何界面上的内容，都会报错 #971

Closed

kuitos added the help wanted Extra attention is needed label Oct 9, 2020

Elk-song mentioned this issue Dec 10, 2020

React+ts技术栈作为子应用，加载的时候主应用崩掉 #1101

Closed

gongshun mentioned this issue Mar 4, 2021

主项目使用vue3.0 ，子项目使用ts+react ，刷新报错 #1299

Closed

fxxjdedd mentioned this issue Jun 8, 2021

fix(qiankun): 尝试修复嵌入主应用的子应用的热更新问题 umijs/plugins#629

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

bestRenekton commented Mar 26, 2020

kuitos commented Mar 26, 2020

bestRenekton commented Mar 26, 2020

kuitos commented Mar 26, 2020

Deturium commented Mar 26, 2020

bestRenekton commented Mar 27, 2020

kuitos commented Apr 21, 2020

Pingan2018 commented Apr 21, 2020

Pingan2018 commented Apr 21, 2020

Deturium commented Apr 21, 2020 •

edited

Loading

haoliangwu commented Apr 26, 2020 •

edited

Loading

kuitos commented Apr 27, 2020

weixiaoxi commented Nov 20, 2020

Elk-song commented Nov 27, 2020

rubenfranca commented Dec 22, 2020

jingping-ye commented Dec 24, 2020

ruoruoji commented Feb 2, 2021

ruoruoji commented Feb 11, 2021 •

edited

Loading

yulintianxia commented Mar 5, 2021

Bonnie8ni commented Nov 1, 2023

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

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

Comments

bestRenekton commented Mar 26, 2020

What happens?

Mini Showcase Repository(REQUIRED)

How To Reproduce

Context

kuitos commented Mar 26, 2020

bestRenekton commented Mar 26, 2020

kuitos commented Mar 26, 2020

Deturium commented Mar 26, 2020

bestRenekton commented Mar 27, 2020

kuitos commented Apr 21, 2020

Pingan2018 commented Apr 21, 2020

Pingan2018 commented Apr 21, 2020

Deturium commented Apr 21, 2020 • edited Loading

haoliangwu commented Apr 26, 2020 • edited Loading

kuitos commented Apr 27, 2020

weixiaoxi commented Nov 20, 2020

Elk-song commented Nov 27, 2020

rubenfranca commented Dec 22, 2020

jingping-ye commented Dec 24, 2020

ruoruoji commented Feb 2, 2021

ruoruoji commented Feb 11, 2021 • edited Loading

yulintianxia commented Mar 5, 2021

Bonnie8ni commented Nov 1, 2023

Deturium commented Apr 21, 2020 •

edited

Loading

haoliangwu commented Apr 26, 2020 •

edited

Loading

ruoruoji commented Feb 11, 2021 •

edited

Loading