FLUSH CHUNKS warning occurs with TSX, but not with JS - node.js

Question

I get this warning:
[FLUSH CHUNKS]: Unable to find styles/localhost-theme-css in Webpack chunks. Please check usage of Babel plugin.
Following code causes the warning (for the setup of react-universal-component, which does server side rendering with code-splitting which reads only necessary CSS file for the page and domain being read by the user):
export default (props) => {
if (props.site !== undefined) {
import(`../styles/${props.site}/theme.css`);
}
Above code is in Routes.tsx, whole file looks like:
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>
)
}
However, this happens only if when the filename is Routes.tsx. If I change to Routes.js, no warning occurs. Even with the warning and filename being Routes.tsx, all the things looks working well but only warning occurs in console terminal.
My webpack setting:
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"]
},
How can I solve it so that I can use tsx without FLUSH CHUNKS warning?

Answer 1

Try setting the module to "EsNext" in tsconfig.json, I had the similar issue changing to "EsNext" solved it for me.