Examples aren't complete

[fregante]

I'm trying to ad HMR to my extension but webpack serve appears to run this code (on css files 🤔) and fail:

ERROR in ./src/vendors/theme/app/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: No chrome or browser runtime found
    at tryRunOrWebpackError (./node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (./node_modules/webpack/lib/Compilation.js:4979:12)
    at ./node_modules/webpack/lib/Compilation.js:5003:11
    at symbolIterator (./node_modules/neo-async/async.js:3485:9)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
-- inner error --
Error: No chrome or browser runtime found
    at Object.get runtime [as runtime] (webpack/runtime/publicPath:3:81)
    at webpack/runtime/publicPath:13:37
    at ./node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:460:11
    at Hook.eval [as call] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:9:1)
    at ./node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (./node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (./node_modules/webpack/lib/Compilation.js:4979:12)
    at ./node_modules/webpack/lib/Compilation.js:5003:11
    at symbolIterator (./node_modules/neo-async/async.js:3485:9)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)

Generated code for webpack/runtime/publicPath
 1 | var isBrowser = !!(() => { try { if (typeof browser.runtime.getURL === "function") return true } catch(e) {} })()
 2 | var isChrome = !!(() => { try { if (typeof chrome.runtime.getURL === "function") return true } catch(e) {} })()
 3 | var runtime = isBrowser ? browser : isChrome ? chrome : { get runtime() { throw new Error("No chrome or browser runtime found") } }
 4 | var scriptUrl;
 5 | if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
 6 | var document = __webpack_require__.g.document;
 7 | if (!scriptUrl && document) {
 8 |    if (document.currentScript)
 9 |            scriptUrl = document.currentScript.src
10 | }
11 | // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
12 | // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
13 | if (!scriptUrl) scriptUrl = runtime.runtime.getURL("/");
14 | scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
15 | __webpack_require__.p = scriptUrl;

So I wanted to test it out using the examples linked in the readme but everything is missing, all the dependencies and the linked files. Could you include them all to ensure they can be run as-is?

[fregante]

It'd be great to have more documentation around HMR, if really possible, because the rest of the resources I found just gave up on webpack HMR with the exception of a Vue repository. Others are severely outdated (webpack 2) and/or use a lot of glue code to make it work.

Is HMR possible in a web extension? In which contexts? I'm looking to add it to a React extension.

[Jack-Works]

Hmm Sorry for the problem you've encountered. I'm not using this mini-css-extract-plugin (I'm using CSS-in-JS) and it seems like this plugin is executing the code for Web Extension inside the Node. I don't know why it is going to do this.

I'll look and configure a React HMR example maybe next week.

[Jack-Works]

@fregante hi I have added a React extension HMR example.

[fregante]

Thank you, that helped get a bit further! Unfortunately I'm still seeing that strange error, I opened a demo PR for that