javascript - Create react app Error: Cannot find module './locale'

Question

I bootstrapped my application with create-react-app and when I run my app it compiles with warnings and it throws errors on the browser.

Error while compiling

./node_modules/rc-picker/node_modules/moment/src/lib/locale/locales.js
Module not found: Can't resolve './locale' in '/Users/macbook/Desktop/projects/pizza/Yummi-fend/node_modules/rc-picker/node_modules/moment/src/lib/locale'

Error on browser

Error: Cannot find module './locale'
? 2 stack frames were collapsed.
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../node_modules/moment/src/lib/moment/moment.js
node_modules/moment/src/lib/moment/moment.js:1
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../node_modules/moment/src/moment.js
node_modules/moment/src/moment.js:1
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../node_modules/rc-picker/es/generate/moment.js
node_modules/rc-picker/es/generate/moment.js:1
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../node_modules/antd/es/calendar/index.js
node_modules/antd/es/calendar/index.js:1
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../node_modules/antd/es/index.js
node_modules/antd/es/index.js:3
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../src/components/AuthPage/loginPage.js
http://localhost:3000/static/js/main.chunk.js:313:62
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../src/App.js
http://localhost:3000/static/js/main.chunk.js:127:88
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:1595:62
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:1737:18
__webpack_require__
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
checkDeferredModules
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
/Users/macbook/Desktop/projects/pizza/Yummi-fend/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:65

Package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.2.0",
    "axios": "^0.19.2",
    "formik": "^2.1.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "yup": "^0.28.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I have tried researching and its an error originating from moment-js yet I'm not using that module and it is also not installed.

What could be the problem?

Answer 1

The reason this happens is because moment has released the new version from 2.24.0 to 2.25.0

Perform the following Steps to solve this issue :

Step 1: change the versions (In your case just add the "moment":"2.24.0" to your dependencies in your package.json since I don't see it present in your package.json)

"moment": "2.24.0",
"moment-timezone": "^0.5.28",

Step 2: If you are using yarn please add resolutions in your package.json file like this

"dependencies" {
"moment": "2.24.0",
"moment-timezone": "^0.5.28"
},
"resolutions": {
"moment": "2.24.0"
},

For more information about this issue go to https://github.com/moment/moment/issues/4505