webpack-contrib / url-loader

A loader for webpack which transforms files into base64 URIs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

url-loader 3.0.0 creates an erroneous export

jaimegarza opened this issue · comments

In version 2.3.0 the generated code read:

/***/ "./css/images/Number.svg":
/*!*******************************!*\
  !*** ./css/images/Number.svg ***!
  \*******************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = "data:image/svg+xml;base64,etcetcetc"

/***/ })

In 3.0.0, there is a call like this:

/***/ "./css/images/Number.svg":
/*!*******************************!*\
  !*** ./css/images/Number.svg ***!
  \*******************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("data:image/svg+xml;base64,etcetcetc");

/***/ }),

The additional call to webpack_require.r adds elements to webpack_exports, so when the code in the html does:

"<img src=\"" + __webpack_require__(/*! ../../css/images/Number.svg */ "./css/images/Number.svg") + "\">\n"

Now that webpack require will return an object and you get "[object Module]" instead of the svg

webpack config:

                {
                    test: /\.(svg|png|jpeg|jpg|gif)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 8192,
                                name: '[path][name].[ext]'
                            }
                        }
                    ]
                }

html-loader is 0.5.5

Yes, html-loader broken, I am working on him (release will be in near future), right now you can setup esModule: false for url-loader/file-loader