Webpack生成错误的路径。一些空的路径，因此它仅加载在客户端react-loadable.json

Question

如果我将所有样式都捆绑到一个文件中，然后仅分割javascript，就可以正常工作。仅在我也尝试拆分CSS时才发生此问题。

我为路线和一些需要大量库（例如图表库）的组件设置了延迟加载。

这就是我正在使用的

css module
webpack ^4.26
MiniCssExtractPlugin ^0.4.4
Loadable.ReactLoadablePlugin ^5.5.0

MiniCssExtractPlugin加载程序选项

module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /react-flexbox-grid/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            query: {
              modules: true,
              minimize: true,
              localIdentName: '[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: (loader) => [
                require('postcss-modules-values')(),
                require('postcss-nested')(),
                require('autoprefixer')(),
              ]
            }
          },

        ]
      }
      //
    ]
  },

当我运行webpack时，它会生成

"undefined": [
    {
      "id": "",
      "name": null,
      "file": "Building~Search.css?v=05a4504a93bc",
      "publicPath": "/dist/Building~Search.css?v=05a4504a93bc"
    },
    {
      "id": "",
      "name": null,
      "file": "Building~Search.css?v=05a4504a93bc",
      "publicPath": "/dist/Building~Search.css?v=05a4504a93bc"
    },

SplitChunks选项 正如我之前提到的，如果我捆绑所有样式都可以正常工作，则react-loadable.json中不会存在null或undefined

 optimization: {
    splitChunks: {
      maxAsyncRequests: 20,
      maxInitialRequests: 20,
      minChunks: 2,
      chunks: 'all',
 // cacheGroups: {
      //   styles: {
      //     name: 'styles',
      //     test: /\.css$/,
      //     chunks: 'all',
      //     enforce: true
      //   },
      // }

    },
  },

ssr渲染

let modules = []
      const context = {}
      const htmlRoot = (
        <Provider store={store}>
          <StaticRouter location={urlPath} context={context}>
            <AppRoot />
          </StaticRouter>
        </Provider>
      )

      store
        .runSaga(rootSaga)
        .done.then(() => {
          const storeState = store.getState()

          const sagaLookups = storeState.lookups

            const RTS = renderToString(
              <Provider store={store}>
                <StaticRouter location={urlPath} context={context}>
                  <Loadable.Capture report={moduleName => {modules.push(moduleName)}}>
                    <AppRoot />
                  </Loadable.Capture>
                </StaticRouter>
              </Provider>,
            )
            const head = Helmet.renderStatic() 

            res.status(code).send(renderDom(RTS, port, host, storeState, head, getBundles(stats, modules)))
          }
        })
        .catch(e => {
          console.log(e.message)
          res.status(500).send(e.message)
        })

      renderToString(htmlRoot)
      store.close()