React可加載以與兩個repos / create-react-app一起使用

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文件夾中的代碼（我認為這是您無法更改的，這是設計node_modules ，至少是上次使用它）。

因此：如果您也想繼續使用與npm鏈接的模塊，則必須在使用它之前先構建該模塊（令人討厭的部分是，您應該在孩子每次更改時重新構建它）。

您不應該導入child-app/src （因為它是源代碼，而不是被編譯），而只是“ child-app”。

最后：遷移到monorepo或使用紗線工作區可能會簡化您的生活。