We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using route-based code splitting causes css duplicate in chunks.
Steps to reproduce:
// /components/CommonPageHeader/CommonPageHeader.module.scss .header { color: black; }
// /components/CommonPageHeader/CommonPageHeader.tsx import styles from "./CommonPageHeader.module.scss"; import { ReactNode } from "react"; export const CommonPageHeader = (props: { className: string; children: ReactNode;`your text` }) => { const { className = "", children } = props; return <h1 className={`${styles.header} ${className}`}>{children}</h1>; };
// /pages/Home/Home.module.scss .greenHeader { color: green; }
// /pages/Home/Home.tsx import React from "react"; import { Link } from "react-router-dom"; import { CommonPageHeader } from "../../components/CommonPageHeader/CommonPageHeader"; import styles from "./Home.module.scss"; const Home = () => ( <> <CommonPageHeader className={styles.greenHeader}> I'm a green header </CommonPageHeader> <Link to={"some-page"}>Some page</Link> </> ); export default Home;
// /pages/SomePage/SomePage.module.scss .redHeader { color: red; }
// /pages/SomePage/SomePage.tsx import React from "react"; import { Link } from "react-router-dom"; import { CommonPageHeader } from "../../components/CommonPageHeader/CommonPageHeader"; import styles from "./SomePage.module.scss"; const SomePage = () => { return ( <> <CommonPageHeader className={styles.redHeader}> I'm a red header </CommonPageHeader> <Link to={"/"}>Home</Link> </> ); }; export default SomePage;
// index.tsx import React, { Suspense } from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; const Home = React.lazy(() => import("./pages/Home/Home")); const SomePage = React.lazy(() => import("./pages/SomePage/SomePage")); const router = createBrowserRouter([ { path: "/", element: ( <Suspense> <Home /> </Suspense> ), }, { path: "/some-page", element: ( <Suspense> <SomePage /> </Suspense> ), }, ]); const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> );
You get css chunks with duplicates and unexpected styles overwrites in production:
// /build/static/css/499.408c3ff0.chunk.css .CommonPageHeader_header__eTauC { color: #000 } .Home_greenHeader__YwF4H { color: green }
// /build/static/css/136.855973ab.chunk.css .CommonPageHeader_header__eTauC { color: #000 } .SomePage_redHeader__a-I8c { color: red }
Demo page
Repo
Add splitChunks optimization to webpack.config.js. For example:
module.exports = function (webpackEnv) { // ... return { // ... optimization: { // ... splitChunks: { cacheGroups: { commons: { name: "common", type: "css/mini-extract", chunks: "all", minChunks: 2, enforce: true, usedExports: true, }, }, }, }, }; };
The text was updated successfully, but these errors were encountered:
I have the same issue. =( @petrovmiroslav do you have some work around?
Sorry, something went wrong.
Same issue! pls fix ASAP
No branches or pull requests
Is your proposal related to a problem?
Using route-based code splitting causes css duplicate in chunks.
Steps to reproduce:
You get css chunks with duplicates and unexpected styles overwrites in production:
2022-10-28.17.19.47.mov
Demo page
Repo
Describe the solution you'd like
Add splitChunks optimization to webpack.config.js.
For example:
The text was updated successfully, but these errors were encountered: