[FLUSH CHUNKS] warning with TSX, but not with JS
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 35/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- javascript, react, typescript, webpack
- 领域
- build-system, frontend
调研方向
从 Routes.tsx 开始，将其动态 CSS 导入行为与对应的 Routes.js 情况进行比较。检查 webpack.dev-client.js 和 webpack.dev-server.js，包括 ts-loader、babel-loader、CSS loader 和 resolve 的设置；完成的标准是 TSX 设置能够在没有 [FLUSH CHUNKS] 警告的情况下运行，同时保留所描述的正常行为。
由索引模型根据 Issue 内容生成。
描述
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 (
<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 without using js?
- 主要语言
- JavaScript
- 星标
- 1.7k
- 派生
- 80
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
faceyspacey/react-universal-component 的其他 Issue
-
难度 4/5 3-5 天 新手友好度 15/100
-
难度 5/5 一周以上 新手友好度 15/100
faceyspacey/react-universal-component#222 · 1 条评论 ·
-
难度 4/5 3-5 天 新手友好度 25/100
faceyspacey/react-universal-component#219 · 6 条评论 ·
-
难度 4/5 3-5 天 新手友好度 20/100
faceyspacey/react-universal-component#218 · 7 条评论 ·
-
难度 4/5 3-5 天 新手友好度 25/100
faceyspacey/react-universal-component#217 · 3 个 reaction ·
查看 faceyspacey/react-universal-component 的全部 Issue
相似的 Issue
-
难度 1/5 1 小时以内 新手友好度 88/100
-
tech-debt
难度 2/5 1-3 小时 新手友好度 72/100
srikanth235/centraid#1155 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 73/100
microsoft/monaco-editor#5563 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复