Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#203 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, react, typescript, webpack
Ambito
build-system, frontend

Direzione di ricerca

Inizia da Routes.tsx e confronta il suo comportamento di importazione dinamica del CSS con il caso equivalente di Routes.js. Esamina webpack.dev-client.js e webpack.dev-server.js, incluse le impostazioni di ts-loader, babel-loader, del caricatore CSS e di resolve; il lavoro è completo quando la configurazione TSX funziona senza l'avviso [FLUSH CHUNKS], mantenendo al contempo il comportamento funzionante descritto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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?

Lingua principale
JavaScript
Stelle
1.7k
Fork
80
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di faceyspacey/react-universal-component

Tutte le issue di faceyspacey/react-universal-component

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.