Missing error overlay

[KutnerUri]

When an error occurs during development, Webpack should show an error overlay, similar to Create React App:

There is an important destination between build (compile) errors, and runtime errors.

Related issues:

• Missing Error Overlay facebook/create-react-app#12014 - react error overlay failing to catch runtime error
  • React errors UI appears differently facebook/create-react-app#11804
• Implement error overlay webpack/webpack-dev-server#764 - WDS implementing CRA style error overlay
• improve our overlay webpack/webpack-dev-server#3689 - user asking to integrate react-error-overlay into WDS

Build errors:

Build errors should show just fine, with the built in overlay:

However, Webpack doesn't read the source files directly. Instead, it is reading the dists, which bit will not output when there is a compilation error. It will show these in the terminal:

So, we need:

• Create a Bit Webpack plugin to report build errors.

It should be something like this:

const WdsConfig = {
  onBeforeSetupMiddleware(wds) {
    const { app } = wds;
    app.use(bitErrorReporter());
  },
}

Runtime errors:

The default WDS error overlay does NOT handle runtime errors!
Confirmed here - webpack/webpack-dev-server#4308

What's more, since CRA v2 and support for Webpack 5, they seem to rely on this builtin overlay.
We should follow CRA's response to it here - facebook/create-react-app#12014

Possible solutions:

react-refresh-webpack-plugin's overlay

react-refresh-webpack-plugin comes with its own overlay, though it doesn't come with the source file, and objectively looks less good.

turning it on is as simple as:

new ReactRefreshWebpackPlugin({
  overlay: {
    sockPath: `_hmr/${envId}`,
    // entry: require.resolve('./react-hot-dev-client'),
    // module: require.resolve('./refresh'),
  },
}### react-error-overlay

The previously official react-error-overlay package displayed errors just fine.
This is what we have used, and it's currently not working anymore. (needs investigation)

Using WDS built-in overlay

The built in overlay does not handle runtime errors, though very easy to use:

const wdsConfig = {
  client: {
    overlay: true,
};

Steps to Reproduce

Create any sort of an error, for example:

throw new Error('global runtime error!');

function Cat() {
  throw new Error('runtime error!');

  return <div>Cat component</div>
}

function EmptyComponent() {
  return undefined
}

Build time error are a little more tricky with Bit.

func MalformedComponent() {
  return <div \>hello world</div>
}

Because of bit compilation, it won't make it to the dists.
We'd have to edit it manually:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Malfromed = void 0;
const react_1 = __importDefault(require("react"));
func Malfromed() { // <---- here
    return react_1.default.createElement("div", null, "hello world");
}
exports.Malfromed = Malfromed;
//# sourceMappingURL=index.js.map