[bug] Error overlay is missing

[retlehs]

Expected Behavior

Errors to display on the front-end

Actual Behavior

Errors are shown in the terminal, browser console shows errors related to Invalid HMR message

Steps To Reproduce

1. Edit a file and add something to produce an error, such as invalid syntax
2. View dev session in the browser

version

@roots/bud/5.8.7

Logs

bridge.js:137 Invalid HMR message: {"name":"bud","action":"built","time":374,"hash":"80273c057b13c4ad76ef","warnings":[],"errors":[{"moduleIdentifier":"/app/themes/roots/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!/app/themes/roots/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[2]!/app/themes/roots/resources/styles/app.css","moduleName":"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[2]!./resources/styles/app.css","message":"Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):\nSyntaxError\n\n(33:21) /app/themes/roots/resources/styles/app.css Unknown word\n\n \u001b[90m 31 | \u001b[39m\n \u001b[90m 32 | \u001b[39mtest t\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 33 | \u001b[39m  /testing\u001b[33m:\u001b[39m\u001b[33m:\u001b[39mafter \u001b[33m{\u001b[39m wat \u001b[33m}\u001b[39m\n \u001b[90m    | \u001b[39m                    \u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 34 | \u001b[39m\n"},{"message":"\n\u001b]8;;file:///app/themes/roots/resources/styles/app.css\u0007resources/styles/app.css\u001b]8;;\u0007\n \u001b[2m33:21\u001b[22m  \u001b[31m\u001b[31m✖\u001b[39m  Unknown word  \u001b[2mCssSyntaxError\u001b[22m\n\n"}],"modules":{"undefined":"./node_modules/@roots/bud-server/lib/cjs/client/indicator/indicator.pulse.js"}}
TypeError: strip is not a function

[thiervoj]

I could add that in the working version (5.7.7), we needed to add a line in our css to bump the z-index of the .bud-overlay element. By default, it seems that the div is showing below other divs in the DOM.

[kellymears]

i fixed the issue with the strip-ansi import in #1472.

@thiervoj i really want to render the overlay using the shadow DOM api but it's turned out to be more of a pain in the ass than i assumed. we'll get there.

until then i also bumped the z-index of the .bud-overlay__visible class to 9999.

[kellymears]

This should be resolved in v6.0.0.