faceyspacey / faceyspacey/react-universal-component
[FLUSH CHUNKS] warning with TSX, but not with JS
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 80
- PR merge metrics
- No merged PRs in 30d
Description
Hello, **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 setup of react-universal-component):**
```
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 (
Test
)
}
```
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 without using js?
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.