[SOLVED] Debugging a 'too much recursion' error when trying to apply an update to a Vue component using hot module replacement via webpack

Debugging a 'too much recursion' error when trying to apply an update to a Vue component using hot module replacement via webpack

I'm trying to enable hot module replacement in a project and I'm running into an error when webpack is trying to push an update.

It builds without errors, but when it tries to asynchronously push the update, a too much recursion error is thrown. When looking at the source code, it's webpack's auto-injected code that's throwing the error. This is the function which triggers the loop:

function webpackHotUpdateCallback(chunkId, moreModules) {
  hotAddUpdateChunk(chunkId, moreModules);
  if (parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
};

I've gutted as much of the code as possible in this Github repository to debug the setup.

Thank you for the help!

Solution

I figured out the issue.

The flags in package.json were conflicting with the webpack settings. To fix this, I changed the hmr command to `"hmr": "webpack-dev-server --config webpack.local.js".