faceyspacey / faceyspacey/react-universal-component

[FLUSH CHUNKS] warning with TSX, but not with JS

Open
#203 0 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.