React项目执行npm run build时出现ERR_FS_FILE_TOO_LARGE错误的原因分析与解决方法咨询

Hey there, let's dig into this build error you're hitting with your React app. I’ve seen similar issues before, so let’s break down what’s happening and how to fix it.

First, let’s recap the error you’re seeing:

$ npm run build

my-app1@0.1.0 build
react-scripts build
Creating an optimized production build...
Failed to compile.
static/css/main.74543541.css from Css Minimizer plugin
RangeError [ERR_FS_FILE_TOO_LARGE]: File size (9509257216) is greater than 2 GB

What’s Causing This? #

That error boils down to a Node.js file system (fs) limitation: it can’t handle single files larger than 2GB out of the box. But the real problem here is that your CSS file is ballooning to nearly 10GB—way beyond what any normal React app should produce.

This almost always happens because of an infinite loop in your style imports:

• A CSS file might be accidentally importing itself (e.g., @import "./main.css" inside main.css), which makes the build tool keep appending the same styles over and over until the file gets massive.
• You might have a circular import chain between component styles (e.g., Component A’s CSS imports Component B’s CSS, which imports Component A’s CSS again). This creates the same infinite duplication issue.

How to Fix It #

Let’s tackle this step by step:

1. Find and Fix the Circular Style Import

This is the root cause—you need to stop the infinite duplication first:

• Check your global CSS files (like src/index.css or the file that compiles to main.74543541.css) for self-referential @import statements. That’s the most common culprit.
• Scan component style files for circular imports. If ComponentA.css imports ComponentB.css, make sure ComponentB.css doesn’t import ComponentA.css back.
• A quick way to spot this in dev mode: open your browser’s DevTools, go to the Elements tab, and look for hundreds or thousands of identical style rules. That’s a dead giveaway that styles are being duplicated infinitely.

2. Temporarily Skip CSS Minification (For Urgent Builds)

If you need a working build right away while you fix the root issue, you can disable the CSS minimizer temporarily:

• Update your package.json build script to add the DISABLE_CSS_MINIMIZER environment variable:

  "scripts": {
    "build": "DISABLE_CSS_MINIMIZER=true react-scripts build"
  }
  

• Run npm run build again. This will skip compressing the CSS (so your final CSS file will still be large), but it’ll bypass the 2GB file size error. Note: this is a band-aid, not a permanent fix.

3. Update Your Build Dependencies

Occasionally, older versions of react-scripts or css-minimizer-webpack-plugin have bugs that can exacerbate this issue. Updating them might help:

• Update react-scripts to the latest version:

  npm install react-scripts@latest
  

• If you’re using a custom Webpack config, update the CSS minimizer plugin:

  npm install css-minimizer-webpack-plugin@latest --save-dev
  

内容的提问来源于stack exchange，提问作者Muhammad Asif