5

ソースに react-lazy を採用しようとしています。でも何がいけないのかわからない..

2つのことを確認しました。

  1. homeContainer コンポーネントのエクスポート方法を確認してください。デフォルトのエクスポートなので、遅延コンポーネントの使用には影響しません(デフォルトのHomeContainerをエクスポート)
  2. Home Component のコンソールをやった.. $$typeof: Symbol(react.lazy), _init, payload だ..いいのかわからない.. 大丈夫?

アプリを実行すると、3 つのエラーが発生しました...しかし、何が問題なのかわかりません...

  1. キャッチされていない未定義の readLazyComponentType
  2. (インデックス):22 Uncaught TypeError: index.22 で未定義のプロパティ 'includes' を読み取ることができません
  3. 上記のエラーは、React コンポーネントの 1 つで発生しました: in Unknown (Context.Consumer によって作成された)

App.tsx で Route ベースのコンポーネントを宣言しました。私のモジュールのバージョンは、react: 16.9.16、react-dom: 16.9.4 です。


import React, {lazy, Suspense} from "react";
import {BrowserRouter,  Switch,  Route} from "react-router-dom";

const Home = lazy(() => import("./routes/Home/HomeContainer"));
console.log(Home)

.....

return (
<BaseLayout>
<Suspense fallback={<SpinContainer />}/>
 <Switch>
  <Route exact path={PATH.ROOT} component={Home}/>
   ... Other Routes ...
 </Switch>
</Suspense>
</BaseLayout>

...
...
)

const App: React.FC = () => {
  return (
    <ErrorBoundary>
      <BrowserRouter>
        <RoutedComponent />
      </BrowserRouter>
    </ErrorBoundary>
  );
};

export default App;

4

0 に答える 0