react-leaflet 库使用时，webpack 编译报【HookWebpackError: Cannot find module ‘images/layers.png‘】-CSDN博客

本文链接：https://blog.csdn.net/xcrn75416/article/details/141221108

报错日志如下：

ERROR in ./node_modules/leaflet/dist/leaflet.css (./node_modules/leaflet/dist/leaflet.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/leaflet/dist/leaflet.css) 5:36-81
Module not found: Error: Can't resolve 'images/layers.png' in 'C:\leaflet-demo\node_modules\leaflet\dist'
ERROR in ./node_modules/leaflet/dist/leaflet.css (./node_modules/leaflet/dist/leaflet.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/leaflet/dist/leaflet.css) 6:36-84
Module not found: Error: Can't resolve 'images/layers-2x.png' in 'C:\leaflet-demo\node_modules\leaflet\dist'
ERROR in ./node_modules/leaflet/dist/leaflet.css (./node_modules/leaflet/dist/leaflet.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/leaflet/dist/leaflet.css) 7:36-86
Module not found: Error: Can't resolve 'images/marker-icon.png' in 'C:\leaflet-demo\node_modules\leaflet\dist'
ERROR in ./node_modules/leaflet/dist/leaflet.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Cannot find module 'images/layers.png'
    at tryRunOrWebpackError (C:\leaflet-demo\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\leaflet-demo\node_modules\webpack\lib\Compilation.js:5246:12)
    ...
    at processQueue (C:\leaflet-demo\node_modules\webpack\lib\util\processAsyncTree.js:61:4)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
-- inner error --
Error: Cannot find module 'images/layers.png'
    at webpackMissingModule (C:\leaflet-demo\node_modules\css-loader\dist\cjs.js!C:\leaflet-demo\node_modules\leaflet\dist\leaflet.css:15:113)
    at Module.<anonymous> (C:\leaflet-demo\node_modules\css-loader\dist\cjs.js!C:\leaflet-demo\node_modules\leaflet\dist\leaflet.css:15:205)
    ...
    at processTicksAndRejections (node:internal/process/task_queues:78:11)

Generated code for C:\leaflet-demo\node_modules\css-loader\dist\cjs.js!C:\leaflet-demo\node_modules\leaflet\dist\leaflet.css
  1 | __webpack_require__.r(__webpack_exports__);
  2 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
  3 | /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
  4 | /* harmony export */ });
  5 | /* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../css-loader/dist/runtime/noSourceMaps.js */ "C:\\leaflet-demo\\node_modules\\css-loader\\dist\\runtime\\noSourceMaps.js");
  6 | /* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
  7 | /* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../css-loader/dist/runtime/api.js */ "C:\\leaflet-demo\\node_modules\\css-loader\\dist\\runtime\\api.js");
  8 | /* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
  9 | /* harmony import */ var _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../css-loader/dist/runtime/getUrl.js */ "C:\\leaflet-demo\\node_modules\\css-loader\\dist\\runtime\\getUrl.js");
 10 | /* harmony import */ var _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);
 11 | // Imports
 12 | 
 13 | 
 14 | 
 15 | var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ Object(function webpackMissingModule() { var e = new Error("Cannot find module 'images/layers.png'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()), __webpack_require__.b);
 16 | var ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ Object(function webpackMissingModule() { var e = new Error("Cannot find module 'images/layers-2x.png'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()), __webpack_require__.b);
 17 | var ___CSS_LOADER_URL_IMPORT_2___ = new URL(/* asset import */ Object(function webpackMissingModule() { var e = new Error("Cannot find module 'images/marker-icon.png'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()), __webpack_require__.b);
 18 | var ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 19 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);
 20 | var ___CSS_LOADER_URL_REPLACEMENT_1___ = _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_1___);
 21 | var ___CSS_LOADER_URL_REPLACEMENT_2___ = _css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_2___);
 22 | // Module
 23 | ___CSS_LOADER_EXPORT___.push([module.id, `/* required styles */
 24 | 
 25 | .leaflet-pane,
// 这里主要是一些 css 代码
680 | 		-webkit-print-color-adjust: exact;
681 | 		print-color-adjust: exact;
682 | 		}
683 | 	}
684 | `, ""]);
685 | // Exports
686 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
687 |

猜测可能是我搭建的前端工程中使用的一些库版本太低，不兼容 leaflet 库导致的，从这方面入手解决问题对我而言比较困难，所以办法只能是修改库文件中的css文件，但是我又不想修改 node_modules 中的文件。

好在 css 是单独引入的，我可以将css和图片资源从react-leaflet的dist目录中拷贝到工程的源代码目录，然后就可以放心修改了。

步骤如下：

1、从 node_modules\leaflet\dist\ 目录中，将 leaflet.css 文件和 images 目录拷贝出来，复制到 src 下的一个目录；

2、修改 leaflet.css，将：

/*...*/
	background-image: url(images/layers.png);
/*...*/
	background-image: url(images/layers-2x.png);
/*...*/
   	background-image: url(images/marker-icon.png);
/*...*/

（假设 leaflet.css 和 images 目录同级）修改成：

/*...*/
	background-image: url(./images/layers.png); // 假设 leaflet.css 和 images 目录同级
/*...*/
	background-image: url(./images/layers-2x.png);
/*...*/
   	background-image: url(./images/marker-icon.png);
/*...*/

主要修改的是url里面的路径，前面加了【./】。

3、修改引入css的代码，指向拷贝后的 leaflet.css 路径：

// -- import 'leaflet/dist/leaflet.css';
import '../leaflet/leaflet.css';

4、重新编译，问题得到了解决！