刷新块警告在 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 时，才会发生这种情况。如果我更改为"路由.js，则不会发出警告。即使警告和文件名为 Routes.tsx，所有事情看起来都运行良好，但控制台终端中只发生警告。

我的网络包设置：

1. webpack.dev 客户.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 服务器.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"]
},

如何解决它，以便我可以在没有刷新块警告的情况下使用 tsx？

Answer 1

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