使用create-react-app出现Uncaught ReferenceError: process is not defined及代码修改后iframe阻塞应用问题求助

Hey there, sorry to hear you're stuck with this frustrating issue—nothing kills productivity faster than your app locking up with random iframes and cryptic console errors! Let’s walk through potential fixes step by step:

1. Rule Out Browser Extensions or External Injection #

That fixed-position iframe screams "external interference" first. Try these quick checks:

• Disable all browser extensions (especially ad blockers, developer tools add-ons, or VPN-related extensions) and reload your app.
• Open your app in incognito/private browsing mode—this automatically disables most extensions, so if the issue disappears, you know an extension is the culprit.

2. Resolve the process is not defined Error #

This error is likely the root cause of your app blocking, and it’s common with newer React Scripts versions (Webpack 5 removed automatic injection of process variables). Here’s how to fix it without ejecting:

Option A: Use Environment Variables File #

Create a .env file in your project root directory and add this line:

NODE_ENV=development

Restart your dev server afterward—this should expose the basic process env variables your app needs.

Option B: Override Webpack Config with react-app-rewired #

If the .env fix doesn’t work, use react-app-rewired to tweak the Webpack config safely:

1. Install the package:

   npm install react-app-rewired --save-dev
   

2. Create a config-overrides.js file in your project root with this code:

   const webpack = require('webpack');
   
   module.exports = function override(config) {
     config.plugins.push(
       new webpack.DefinePlugin({
         'process.env': JSON.stringify(process.env)
       })
     );
     return config;
   };
   

3. Update your package.json scripts to use react-app-rewired instead of react-scripts:

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

4. Restart your dev server.

3. Clean Caches and Reinstall Dependencies #

Corrupted cache or dependency files can cause weird behavior. Run these commands:

• Clear npm cache:

  npm cache clean --force
  

• Delete node_modules, package-lock.json (or yarn.lock), then reinstall:

  rm -rf node_modules package-lock.json
  npm install
  

• Start the dev server with no cache:

  npm start -- --no-cache
  

4. Audit Your Code and Dependencies #

• Search your codebase for any direct use of process—if you’re using it in your own code, replace it with the appropriate React environment variable (e.g., process.env.REACT_APP_YOUR_VAR for custom variables).
• Check your dependency tree for packages that might rely on process without handling Webpack 5 changes. Use npm ls to list all dependencies, and look for outdated packages that might need updates.

5. Investigate the Persistent iframe #

If the iframe still appears after fixing the process error:

• Check your public/index.html file to ensure no unauthorized code was added there.
• Use npm ls or yarn why to look for any suspicious dependencies that might inject iframes (rare, but possible with malicious or poorly maintained packages).

内容的提问来源于stack exchange，提问作者Youssef B