Haxe + Webpack exporting empty object

Question

I'm trying to run the webpack-dev-server on a JS exported by Haxe compiler. I'm using hxgenjs library to split the haxe output into separate modules and I'm trying to merge them by webpack (to use the hot module replacement functionality). Everything seems to be ok, but the output is empty object. This is my webpack.config.js:

module.exports = {
  entry: './build/Game-hxgenjs.js',
  mode: 'development',
  devtool: "inline-source-map",
  output: {
    filename: 'Game-webpack.js',
    path: path.resolve(__dirname, 'bin/js'),
    publicPath: '/bin/js/',
    libraryTarget: "umd",
    library: "MyLib"
  },
  devServer: {
    publicPath: '/bin/js/',
    compress: false,
    port: 8080,
    hot: true,
    inline: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': '*'
    },
    proxy: {
       // some proxy settings
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

And the entry js file has something like this:

if (module.hot) module.hot.accept();
require("./Std")
var $import = require("./import_stub").default;
function base_navigation_elements_NavigationDotsContainer() {return require("./base/navigation/elements/NavigationDotsContainer");}
function base_navigation_elements_NavigationScore() {return require("./base/navigation/elements/NavigationScore");}
function custom_game_Manager() {return require("./custom/game/Manager");}
function base_navigation_elements_NavigationDot() {return require("./base/navigation/elements/NavigationDot");}
function library_Library() {return require("./library/Library");}
function platform_topbar_TopbarProxy() {return require("./platform/topbar/TopbarProxy");}
function base_navigation_Navigation() {return require("./base/navigation/Navigation");}
function base_navigation_elements_NavigationAnimation() {return require("./base/navigation/elements/NavigationAnimation");}
function base_navigation_elements_NavigationButton() {return require("./base/navigation/elements/NavigationButton");}
function base_navigation_elements_NavigationPreloader() {return require("./base/navigation/elements/NavigationPreloader");}
function base_navigation_elements_NavigationButtonSpaceBar() {return require("./base/navigation/elements/NavigationButtonSpaceBar");}
(custom_game_Manager().default).main();
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationDotsContainer"] = (base_navigation_elements_NavigationDotsContainer().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationScore"] = (base_navigation_elements_NavigationScore().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationDot"] = (base_navigation_elements_NavigationDot().default)
exports["library"] = exports["library"] || {}
exports["library"]["Library"] = (library_Library().default)
exports["platform"] = exports["platform"] || {}
exports["platform"]["topbar"] = exports["platform"]["topbar"] || {}
exports["platform"]["topbar"]["TopbarProxy"] = (platform_topbar_TopbarProxy().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["Navigation"] = (base_navigation_Navigation().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationAnimation"] = (base_navigation_elements_NavigationAnimation().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationButton"] = (base_navigation_elements_NavigationButton().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationPreloader"] = (base_navigation_elements_NavigationPreloader().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationButtonSpaceBar"] = (base_navigation_elements_NavigationButtonSpaceBar().default)

this is automatically generated file. The problem is, when I run the webpack-dev-server, it generates it's things.. and at the end there's this chunk of code:

/***/ 0:
/*!********************************************************************************************************************!*\
  !*** multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./build/Game-hxgenjs.js  ***!
  \********************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(/*! C:\path\to\project\node_modules\webpack-dev-server\client\index.js?http://localhost:8080 */"./node_modules/webpack-dev-server/client/index.js?http://localhost:8080");
__webpack_require__(/*! C:\path\to\project\node_modules\webpack\hot\dev-server.js */"./node_modules/webpack/hot/dev-server.js");
__webpack_require__(/*! ./build/Game-hxgenjs.js */"./build/Game-hxgenjs.js");
module.exports = __webpack_require__(0);


/***/ })

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

where

__webpack_require__(0) 

returns an empty object, so window.MyLib is an empty object. When I put breakpoint at this place, I can see that the previous line:

__webpack_require__(/*! ./build/Game-hxgenjs.js */"./build/Game-hxgenjs.js"); 

actually returns what I need (all exported stuff from the entry js file). Can somebody help me to figure out what's going on and what exactly is the module "0"?

Answer 1

Most likely you are using webpack5, it has a known bug: webpack5.x.x + webpack-dev-server 3.x.x exports module as an empty object in devserver mode, when plain webpack build and watch works ok.

To fix install "webpack-dev-server": "^4.0.0-beta.0":

npm i webpack-dev-server@next -D

Please not that in webpack-dev-server 4.x.x you need to change devServer.publicPath option to static:

  devServer: {
        static: path.join(__dirname, 'build'),
        hot: true,
    },