TSX 会出现 FLUSH CHUNKS 警告，而 JS 不会出现 FLUSH CHUNKS 警告答案

【问题标题】：FLUSH CHUNKS warning occurs with TSX, but not with JSTSX 会出现 FLUSH CHUNKS 警告，而 JS 不会出现 FLUSH CHUNKS 警告
【发布时间】：2020-04-16 12:39:29
【问题描述】：

我收到此警告：

[FLUSH CHUNKS]: Unable to find styles/localhost-theme-css in Webpack chunks. Please check usage of Babel plugin.

以下代码会导致警告（对于 react-universal-component 的设置，该组件使用代码拆分进行服务器端渲染，仅读取用户正在读取的页面和域的必要 CSS 文件）：

export default (props) => {
  if (props.site !== undefined) {
    import(`../styles/${props.site}/theme.css`);
  }

以上代码在Routes.tsx中，整个文件如下：

import React from "react"
import universal from "react-universal-component"
import { Switch } from "react-router"

const determineHowToLoad = ({ page }) => {
  if (typeof page !== 'string') {
    return page();
  } else {
    return import(`./${page}`);
  }
}

const UniversalComponent = universal(determineHowToLoad, {
  loadingTransition: false
})

export default (props) => {
  if (props.site !== undefined) {
    import(`../styles/${props.site}/theme.css`);
  }

  return (
    <div>
      Test
    </div>
  )
}

但是，只有当文件名是 Routes.tsx 时才会发生这种情况。 如果我更改为 Routes.js，则不会出现警告。即使警告和文件名是 Routes.tsx，所有事情看起来都运行良好，但控制台终端中只会出现警告。

我的 webpack 设置：

1. webpack.dev-client.js：

optimization: {
    splitChunks: {
      chunks: "initial",
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor"
        }
      }
    }
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader"
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        use: 'react-hot-loader/webpack',
        include: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          ExtractCssChunks.loader, "css-loader",
        ]
      },
....
resolve: {
    extensions: [".ts", ".tsx", ".js", ".css"]
  },

2。 webpack.dev-server.js：

devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          ExtractCssChunks.loader, "css-loader"
        ]
      },
....
 resolve: {
    extensions: [".ts", ".tsx", ".js", ".css"]
  },

我该如何解决它，以便我可以在没有 FLUSH CHUNKS 警告的情况下使用 tsx？

【问题讨论】：

标签： node.js typescript webpack babeljs webpack-4

【解决方案1】：

尝试在 tsconfig.json 中将模块设置为“EsNext”，我有类似的问题更改为“EsNext”为我解决了它。

【讨论】：