asiniy asiniy - 4 months ago 34
React JSX Question

Webpack - how can I identify and exclude some package from rendering?

I'm using react-stdio server to render react.js on the server side.

Webpack rendered javascript file has these lines:

/***/
/* 49 */
/***/ function(module, exports, __webpack_require__)
»·/* WEBPACK VAR INJECTION */(function(global) {/* global window */
»·'use strict';

»·module.exports = __webpack_require__(50)(global || window || this);

»·/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))

/***/ },
/* 50 */
/***/ function(module, exports) {


The problem is that
react-stdio
dislikes the
window
variable:
react-stdio
returns to me
ReferenceError: window is not defined
. So, questions:


  1. How can I understand which dependency is marked as #49?

  2. How can I eliminate this
    window
    variable from the build?


Answer

Try to add target: 'node' to your webpack.config. According to the webpack docs:

Target: "node" Compile for usage in a node.js-like environment (use require to load chunks)

module.exports = {
  entry: './src/main.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js'
  }
}

If this doesn't work, try this tutorial - Backend Apps with Webpack (the example was taken from it).