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

Question

我使用 create-react-app 引导我的应用程序，当我运行我的应用程序编译时出现警告并在浏览器上抛出错误。

编译时出错

./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: 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"
    ]
  }
}

我已经尝试研究，它是一个源自 moment-js 的错误，但我没有使用那个模块，它也没有安装。

可能是什么问题？

Answer 1

之所以会出现这种情况是因为moment发布了新版本2.24.0到2.25.0

执行以下步骤解决此问题：

第 1 步：更改版本（在您的情况下，只需添加 "moment"：" 2.24.0" 到您的 package.json 中的依赖项，因为我在您的 package.json)

中看不到它

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

第 2 步： 如果您使用的是 yarn，请像这样在 package.json 文件中添加分辨率

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

有关此问题的更多信息，请转至 https://github.com/moment/moment/issues/4505

Answer 2

package.json 的变化：

"moment": "2.25.1",

到

"moment": "2.24.0",

然后运行在终端上：npm install

Answer 3

Moment 发布了破坏应用程序的新版本，

对于你的情况，package.json 中没有时间，如果你只是将它添加到你的包中

moment: "2.24.0"

和运行 npm install 它将添加这个时刻包并解决你的问题，

否则你可以试试这个命令

npm install --save --save-exact moment@2.24.0

它会使用此特定版本

自动将此软件包添加到您的 package.json

我希望这对你有用

Answer 4

新时刻2.25.x版本已经发布，最新版本应该可以解决这个问题。

2.25.2 版本似乎解决了这个问题。因此不再需要降级到 2.24.0。

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

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

javascript

reactjs

react-redux

create-react-app