FLUSH CHUNKS 警告出现在 TSX 上，但不会出现在 JS 上

Question

我收到这个警告:

[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？

Answer 1

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

FLUSH CHUNKS 警告出现在 TSX 上，但不会出现在 JS 上

FLUSH CHUNKS warning occurs with TSX, but not with JS

node.js

typescript

webpack

babeljs

webpack-4