Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#203 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript, react, typescript, webpack
領域
build-system, frontend

調査の方向性

Routes.tsx から始め、動的な CSS インポートの動作を、対応する Routes.js のケースと比較します。ts-loader、babel-loader、CSS loader、resolve の設定を含め、webpack.dev-client.js と webpack.dev-server.js を確認します。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
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

faceyspacey/react-universal-component のほかの issue

faceyspacey/react-universal-component の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。