Create-React-App项目报错：找不到'./globals.json'模块，求调试指引

Hey Michael, sorry to hear your CRA app's acting up after a month of smooth development. Let's tackle this issue step by step—first enabling detailed debug info to pinpoint exactly what's failing, then tracking down that missing globals.json file.

1. Enable Detailed Debug Mode #

To get granular logs about the compilation process (including which file is trying to import the missing module), use environment variables with your npm run start command. Here's how to do it for different operating systems:

On Mac/Linux: #

DEBUG=react-scripts:* npm start

On Windows (Command Prompt): #

set DEBUG=react-scripts:* && npm start

On Windows (PowerShell): #

$env:DEBUG="react-scripts:*"; npm start

This will output verbose logs that show the full stack trace of the import error, making it easy to find which file is referencing globals.json.

2. Track Down the Missing globals.json #

Looking at your provided index.js, you don't directly import globals.json there—so it's being referenced indirectly by another file in your project (like a reducer, component, utility, or even a third-party dependency, though that's less likely since the app worked before).

Here's how to locate the source:

• Global Search: Use your IDE's global search (e.g., Ctrl+Shift+F in VS Code) to look for "globals.json" across all files in your src directory. This will surface every import/require statement that references this file.
• Check Recent Changes: Think about what modifications you've made since the app last worked—did you add a new component/reducer that imports this file? Or did you accidentally delete globals.json from your project?
• Verify File Existence: Double-check if globals.json exists in the path the error mentions. If it's missing, restore it from a backup or recreate it if it's a custom config file you set up earlier.

3. Additional Troubleshooting Steps #

If the above doesn't resolve the issue, try these common CRA fixes:

• Clear Cache & Reinstall Dependencies:

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• Check Git History: If you're using Git, run git log --oneline to review recent commits, and check if any changes removed or modified files related to globals.json.
• Verify .gitignore: Make sure globals.json isn't listed in your .gitignore file (if it's a file your app needs), which might have caused it to be excluded from your working directory.

Your Provided Code (For Reference) #

package.json #

{
  "name": "hbi.contractor",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://www.mysitecom.au/app",
  "proxy": {
    "/api/*": {
      "target": "https://api.mysite.com.au",
      "changeOrigin": true
    }
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "axios": "^0.17.1",
    "immutability-helper": "^2.7.0",
    "inputmask": "^3.3.11",
    "jquery": "^3.3.1",
    "materialize-css": "^0.100.2",
    "nodemon": "^1.17.4",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-dropzone": "^4.2.9",
    "react-format-number": "^1.3.1",
    "react-html-parser": "^2.0.2",
    "react-ionicons": "^2.1.6",
    "react-live-clock": "^2.0.3",
    "react-load-script": "0.0.6",
    "react-maskedinput": "^4.0.1",
    "react-moment": "^0.7.0",
    "react-owl-carousel": "^2.2.0",
    "react-redirect": "^1.0.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-rxinput": "^1.0.4",
    "react-scripts": "1.0.17",
    "react-sticky": "^6.0.2",
    "react-sticky-el": "^1.0.17",
    "react-text-mask": "^5.4.1",
    "redux": "^3.7.2",
    "redux-form": "^6.8.0",
    "redux-thunk": "^2.2.0",
    "universal-cookie": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-input-mask": "^1.2.2",
    "react-materialize": "^1.1.2",
    "react-native-masked-text": "^1.6.5",
    "react-number-format": "^3.3.4"
  }
}

index.js #

import "jquery/dist/jquery.min.js";
import "materialize-css/dist/js/materialize.js";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reduxThunk from "redux-thunk";
import App from "./components/App";
import reducers from "./reducers";
import "./index.css";
import queryString from "./utilities/querystring";
import "materialize-css/dist/css/materialize.min.css";

const electionId = queryString.getParameterByName("electionId");
const store = createStore(reducers, {election: electionId}, applyMiddleware(reduxThunk));

if (electionId){
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.querySelector("#root")
  );
} else{
  ReactDOM.render(
    <div> Missing Vote Id </div>,
    document.querySelector("#root")
  );
}

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