Posted in Uncategorized

{pathinfo: true} can break JS syntax in built files when the loader query contains */

   February 23, 2021  2 Comments on {pathinfo: true} can break JS syntax in built files when the loader query contains */

Here’s a piece of JS that was emitted by webpack:

/* WEBPACK VAR INJECTION */(function(global) {module.exports = global["MobileRouter"] = __webpack_require__(/*! -!/Users/mikolajdadela/code/lb-react-frontend/~/babel-loader?{"plugins":["transform-react-jsx"],"ignore":["node_modules/**/*"]}!./mobilePages/MobileRouter.jsx */ 1);

A shortened version so you can see what happened:

... __webpack_require__(/* ... ["node_modules/**/*"] ...  */ 1);
                                                ^

When I run this code in browser, I get

Uncaught SyntaxError: Unexpected token *

Author: Fantashit

2 thoughts on “{pathinfo: true} can break JS syntax in built files when the loader query contains */”

  1. @bebraw Minimal test case:

    webpack.config.js

    module.exports = {
  entry: {
    app: ['./main.js?*/']
  },
  output: {
    path: __dirname,
    filename: 'bundle.js',
    pathinfo: true
  }
};

    main.js

    console.log('howdy');

    steps to reproduce

    npm install webpack
node_modules/.bin/webpack

    bundle.js (after the initial webpack stuff)

    /* 0 */
/*!*****************!*\
  !*** multi app ***!
  \*****************/
/***/ function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__(/*! ./main.js?*/ */1);


/***/ },
/* 1 */
/*!********************!*\
  !*** ./main.js?*_/ ***!
  \********************/
/***/ function(module, exports) {

    console.log('howdy');


/***/ }
/******/ ]);

    Note the syntax error in chunk 0‘s module.exports line because the query string prematurely closes the comment. Also note that this construct is correctly escaped in the header comment for chunk 1 as ./main.js?*_/

Comments are closed.