I'm using multi-compiler build with express and webpack-dev-middleware + webpack-hot-m

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Does it work with webpack-hot-middleware? about error-overlay-webpack-plugin HOT 3 CLOSED

gregberge commented on May 23, 2024 5

Does it work with webpack-hot-middleware?

from error-overlay-webpack-plugin.

Comments (3)

KevinGruber commented on May 23, 2024

I have the same problem. I only see the hot-middleware-overlay

from error-overlay-webpack-plugin.

vjpr commented on May 23, 2024

If you are using WHM, you need to manually add the react-dev-utils/errorOverlayMiddleware

E.g.

  app.use(errorOverlayMiddleware())
  app.use(webpackDevMiddleware(compiler, devServerConfig))
  app.use(webpackHotMiddleware(compiler, hotMiddlewareConfig))

The plugin will only add it automatically when using webpack-dev-SERVER as seen in the code below:

var devServerEnabled = !!compiler.options.devServer;

 if (devServerEnabled) {
          var originalBefore = options.devServer.before;

          options.devServer.before = function (app, server) {
            if (originalBefore) {
              originalBefore(app, server, compiler);
            }

            app.use((0, _errorOverlayMiddleware["default"])());
          };
        }

This should be added to the readme.

I had to do something like this because my paths were prefixed with webpack:// and it didn't like it.

import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware'
import launchEditorEndpoint from 'react-dev-utils/launchEditorEndpoint'
import dotenv from 'dotenv'
// Loads REACT_EDITOR for example.
dotenv.config()


  app.use((req, res, next) => {
    // We get: 'webpack:///packages/app/src/pages/home/Home.tsx'
    if (!req.url.startsWith(launchEditorEndpoint)) return
    const fileName = req.query.fileName.replace('webpack:///', './')
    req.query.fileName = fileName
    console.log('Opening in editor:', fileName)
    errorOverlayMiddleware()(req, res, next)
  })