Wrong order of braces generation

[CaptainOfFlyingDutchman]

Do you want to request a feature, report a bug or ask a question? Question

What is the current behavior? Not producing correct braces order. What is the expected behavior? Should produce correct braces order.

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code. I have same code base at two different locations. One is working fine, but the second one is not. Even I copied first project's node_modues to the second location project. It's still outputting incorrect braces.

My loaders config is following;

       {
          test: /\.svg?$/,
          use: [
            {
              loader: 'svg-sprite-loader',
              options: {
                extract: true,
                spriteFilename: `${appConfig.assets.svgPrefix}[hash].svg`
              }
            },
            {
              loader: 'svgo-loader',
              options: {
                plugins: [{ removeStyleElement: true }],
                floatPrecision: 2
              }
            }
          ]
        }

It's producing following code:

/***/ }),
/* 322 */
/*!***********************************************!*\
  !*** ./app/components/Icon/svg/Adventure.svg ***!
  \***********************************************/
/*! exports provided: default */
/*! all exports used */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = ({
      id: "Adventure-usage",
      viewBox: "0 0 29.1 25",
      url: __webpack_require__.p + "icons-svg-098c3f118fc706080aa274b4b59f7237.svg#Adventure-usage",
      toString: function () {
        return this.url;
     ); }
    }

/***/ }),

Instead of following

/***/ }),
/* 322 */
/*!***********************************************!*\
  !*** ./app/components/Icon/svg/Adventure.svg ***!
  \***********************************************/
/*! exports provided: default */
/*! all exports used */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = ({
      id: "Adventure-usage",
      viewBox: "0 0 29.1 25",
      url: __webpack_require__.p + "icons-svg-098c3f118fc706080aa274b4b59f7237.svg#Adventure-usage",
      toString: function () {
        return this.url;
      }
    });

/***/ }),

Please note the toString function and following braces.

Please tell us about your environment:

• Node.js version: 8.9.2?
• webpack version: 3.10.0?
• svg-sprite-loader version: 3.7.3?
• OS type & version: Linux Mint 18?

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[kisenka]

Could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[rchesnokov]

Same problem, but i've got it in slightly diffrent place:

/***/ "./assets/www/images/icons/sprite/checked.svg":
/*!****************************************************!*\
  !*** ./assets/www/images/icons/sprite/checked.svg ***!
  \****************************************************/
/*! exports provided: default */
/*! all exports used */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = ({
      id: "checked-usage",
      viewBox: "0 0 12.85 10",
      url: __webpack_require__.p + "www/images/icons/icons-sprite.f42ed1dd6a5b8d10ac6cc72d1138978c.svg#checked",
      toString: function () {
        return this.u);rl;
      }
    }

/***/ }),

this.u);rl; It brakes js on the page.

[svirschevskiy]

You can use esModule: false in loader config as temporary workaround

[ugrupp]

I just ran into the exact same problem, getting return thi);s.url;

node v11.13.0 npm 6.7.0 svg-sprite-loader 4.1.3 webpack 4.30.0

[stsiarzhanau]

I've got return );this.url; .

node v10.16.3 npm 6.9.0 svg-sprite-loader 4.1.6 webpack 4.41.0

And what's more interesting it occures only when build is running in Docker container. At the same time there are no errors during compilation when building locally both on Windows and Linux workstations.

When loader is not used (icons are not imported) compilation is successfull

[ophite]

the same problem in docker

[kisenka]

@ManvendraSK could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[CaptainOfFlyingDutchman]

I don't have the code access now. I left the organization for which I was working.