Question

我正在尝试将react-loadable与两个repos / create-react-app制作的两个不同的应用程序

我已使用npm链接连接两个应用程序，并且在父应用程序中，我使用了以下代码的子应用程序

//parent application

import Loadable from 'react-loadable';

export default Loadable({
  loader: () => import("child-app/src"),
  loading() {
    return <div>Loading...</div>
  }
})

我已经使子组件可以导出，并且代码是

//child application

import React from 'react';

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

export default App;

我一直低于错误

SyntaxError: /Users/ssinha/Documents/microfrontend2/first-app/src/App.js: Unexpected token (5:4)

  3 | function App() {
  4 |   return (
> 5 |     <div>Child App</div>
    |     ^
  6 |   );
  7 | }

看起来好像没有被翻译，我尝试使用某些插件，例如“ @ loadable / babel-plugin”，但没有帮助。：-（

Answer 1

首先，我建议您减少调试时的复杂度，因此，在解决问题之前，请不要使用react-loadable。我认为这里不是react-loadable的问题。

create-react-app不会转储位于node_modules文件夹中的代码（我认为这是您无法更改的，这是设计使然，至少是上次使用它）。

因此：如果您也想继续使用与npm链接的模块，则必须在使用该模块之前 build （令人讨厌的部分是，您应该在每次更改孩子时重新构建它）。

您不应导入child-app/src（因为它是源文件，而不是被移植的文件），而只能导入“ child-app”。

最后：迁移到monorepo或使用纱线工作区可能会简化您的生活。

React可加载以与两个repos / create-react-app一起使用

1 个答案: