1

サーバー側のレンダリングを利用する create-react-app アプリケーションでコード分割を試みています。

コード分​​割を行うために「react-loadable」を利用しています：https://github.com/thejameskyle/react-loadable

今のHome.jsところ、コンポーネントをアプリの残りの部分から切り離して、それが機能するかどうかを確認するだけです。開発モード (読み取り: SSR ではない) では、チャンクオフされ、正常に動作します。

ただし、サーバー上で動作させることはできません。Github ページのガイドに従っていますが、webpack の変更が必要なため行き詰まっています。アプリケーションではcreate-react-app、webpack は隠されているためアクセスできません。

サーバーの起動時に受け取るエラーは次のとおりです。

return (0, _importInspector.report)(import('../components/home/Home'), {
                                                ^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10) ...

ガイドに記載されているようにwebpackが正しく構成されていないためだと確信しています。

ガイドでは、SSR について明確に述べています。

まず、各モジュールがどのバンドルに含まれているかを伝える Webpack が必要です。このために、React Loadable Webpack プラグインがあります。

react-loadable/webpack から ReactLoadablePlugin をインポートし、webpack 構成に含めます。バンドルに関する JSON データを保存する場所のファイル名を渡します。

// webpack.config.js
import { ReactLoadablePlugin } from 'react-loadable/webpack';

export default {
    plugins: [
        new ReactLoadablePlugin({
            filename: './dist/react-loadable.json',
        }),
    ],
};

排出しないと無理だと思います。サーバー側でレンダリングされるアプリケーションreact-loadableで使用できるかどうかは誰にも分かりますか?create-react-app

4

1 に答える 1