Help triaging: __webpack_require__ is not defined

[skrawcz]

Hi I'm tracking down the following error which seems to related to react-py (see https://www.tryhamilton.dev/ for the error live):

ReferenceError: __webpack_require__ is not defined
    at 616.4aff1fd8.js:2:20
    at 616.4aff1fd8.js:2:7388

Why? Because it's bundled in the same JS -- see below.

I could be wrong here, so would appreciate any pointers.

Otherwise this worked in April, and I just happened to rebuild the project and now it's breaking. So I'm guessing some dependencies somewhere changed and I'm in the process of tracking that down... I see react-py hasn't been updated in a while on npm so am trying to chase down hypotheses.

Thanks in advance!

For context here are my deps:

 "dependencies": {
    "@docusaurus/core": "^3.4.0",
    "@docusaurus/plugin-content-pages": "^3.4.0",
    "@docusaurus/plugin-google-gtag": "^3.4.0",
    "@docusaurus/preset-classic": "^3.4.0",
    "@mdx-js/react": "^3.0.0",
    "ace-builds": "^1.32.0",
    "autoprefixer": "^10.4.19",
    "clsx": "^2.0.0",
    "docusaurus-plugin-sass": "^0.2.5",
    "graphviz-react": "^1.2.5",
    "prism-react-renderer": "^2.3.0",
    "react": "^18.0.0",
    "react-ace": "^10.1.0",
    "react-dom": "^18.0.0",
    "react-icons": "^5.2.1",
    "react-modal": "^3.16.1",
    "react-py": "^1.10.6",
    "sass": "^1.69.5",
    "tailwindcss": "^3.4.6",
    "tailwindcss-question-mark": "^0.5.0"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "^3.4.0",
    "@docusaurus/tsconfig": "^3.4.0",
    "@docusaurus/types": "^3.4.0",
    "typescript": "^5.5.4"
  },

/*! For license information please see 616.4aff1fd8.js.LICENSE.txt */
(()=>{
    "use strict";
    __webpack_require__.gca = function(e) { // <---- this is what is breaking
        return e = {}[e] || e,
        __webpack_require__.p + __webpack_require__.u(e)
    }
    ;
    const e = Symbol("Comlink.proxy")
      , t = Symbol("Comlink.endpoint")
      , n = Symbol("Comlink.releaseProxy")
      , r = Symbol("Comlink.finalizer")
      , o = Symbol("Comlink.thrown")
      , i = e=>"object" == typeof e && null !== e || "function" == typeof e
      , a = new Map([["proxy", {
        canHandle: t=>i(t) && t[e],
        serialize(e) {
            const {port1: t, port2: n} = new MessageChannel;
            return s(e, t),
            [n, [n]]
        },
        deserialize(e) {
            return e.start(),
            f(e, [], t);
            var t
        }
    }], ["throw", {
        canHandle: e=>i(e) && o in e,
        serialize({value: e}) {
            let t;
            return t = e instanceof Error ? {
                isError: !0,
                value: {
                    message: e.message,
                    name: e.name,
                    stack: e.stack
                }
            } : {
                isError: !1,
                value: e
            },
            [t, []]
        },
        deserialize(e) {
            if (e.isError)
                throw Object.assign(new Error(e.value.message), e.value);
            throw e.value
        }
    }]]);
    function s(t, n=globalThis, i=["*"]) {
        n.addEventListener("message", (function a(u) {
            if (!u || !u.data)
                return;
            if (!function(e, t) {
                for (const n of e) {
                    if (t === n || "*" === n)
                        return !0;
                    if (n instanceof RegExp && n.test(t))
                        return !0
                }
                return !1
            }(i, u.origin))
                return void console.warn(`Invalid origin '${u.origin}' for comlink proxy`);
            const {id: l, type: p, path: d} = Object.assign({
                path: []
            }, u.data)
              , f = (u.data.argumentList || []).map(g);
            let y;
            try {
                const n = d.slice(0, -1).reduce(((e,t)=>e[t]), t)
                  , r = d.reduce(((e,t)=>e[t]), t);
                switch (p) {
                case "GET":
                    y = r;
                    break;
                case "SET":
                    n[d.slice(-1)[0]] = g(u.data.value),
                    y = !0;
                    break;
                case "APPLY":
                    y = r.apply(n, f);
                    break;
                case "CONSTRUCT":
                    y = function(t) {
                        return Object.assign(t, {
                            [e]: !0
                        })
                    }(new r(...f));
                    break;
                case "ENDPOINT":
                    {
                        const {port1: e, port2: n} = new MessageChannel;
                        s(t, n),
                        y = function(e, t) {
                            return h.set(e, t),
                            e
                        }(e, [e])
                    }
                    break;
                case "RELEASE":
                    y = void 0;
                    break;
                default:
                    return
                }
            } catch (b) {
                y = {
                    value: b,
                    [o]: 0
                }
            }
            Promise.resolve(y).catch((e=>({
                value: e,
                [o]: 0
            }))).then((e=>{
                const [o,i] = m(e);
                n.postMessage(Object.assign(Object.assign({}, o), {
                    id: l
                }), i),
                "RELEASE" === p && (n.removeEventListener("message", a),
                c(n),
                r in t && "function" == typeof t[r] && t[r]())
            }
            )).catch((e=>{
                const [t,r] = m({
                    value: new TypeError("Unserializable return value"),
                    [o]: 0
                });
                n.postMessage(Object.assign(Object.assign({}, t), {
                    id: l
                }), r)
            }
            ))
        }
        )),
        n.start && n.start()
    }
    function c(e) {
        (function(e) {
            return "MessagePort" === e.constructor.name
        }
        )(e) && e.close()
    }
    function u(e) {
        if (e)
            throw new Error("Proxy has been released and is not useable")
    }
    function l(e) {
        return b(e, {
            type: "RELEASE"
        }).then((()=>{
            c(e)
        }
        ))
    }
    const p = new WeakMap
      , d = "FinalizationRegistry"in globalThis && new FinalizationRegistry((e=>{
        const t = (p.get(e) || 0) - 1;
        p.set(e, t),
        0 === t && l(e)
    }
    ));
    function f(e, r=[], o=function() {}
    ) {
        let i = !1;
        const a = new Proxy(o,{
            get(t, o) {
                if (u(i),
                o === n)
                    return ()=>{
                        !function(e) {
                            d && d.unregister(e)
                        }(a),
                        l(e),
                        i = !0
                    }
                    ;
                if ("then" === o) {
                    if (0 === r.length)
                        return {
                            then: ()=>a
                        };
                    const t = b(e, {
                        type: "GET",
                        path: r.map((e=>e.toString()))
                    }).then(g);
                    return t.then.bind(t)
                }
                return f(e, [...r, o])
            },
            set(t, n, o) {
                u(i);
                const [a,s] = m(o);
                return b(e, {
                    type: "SET",
                    path: [...r, n].map((e=>e.toString())),
                    value: a
                }, s).then(g)
            },
            apply(n, o, a) {
                u(i);
                const s = r[r.length - 1];
                if (s === t)
                    return b(e, {
                        type: "ENDPOINT"
                    }).then(g);
                if ("bind" === s)
                    return f(e, r.slice(0, -1));
                const [c,l] = y(a);
                return b(e, {
                    type: "APPLY",
                    path: r.map((e=>e.toString())),
                    argumentList: c
                }, l).then(g)
            },
            construct(t, n) {
                u(i);
                const [o,a] = y(n);
                return b(e, {
                    type: "CONSTRUCT",
                    path: r.map((e=>e.toString())),
                    argumentList: o
                }, a).then(g)
            }
        });
        return function(e, t) {
            const n = (p.get(t) || 0) + 1;
            p.set(t, n),
            d && d.register(e, t, e)
        }(a, e),
        a
    }
    function y(e) {
        const t = e.map(m);
        return [t.map((e=>e[0])), (n = t.map((e=>e[1])),
        Array.prototype.concat.apply([], n))];
        var n
    }
    const h = new WeakMap;
    function m(e) {
        for (const [t,n] of a)
            if (n.canHandle(e)) {
                const [r,o] = n.serialize(e);
                return [{
                    type: "HANDLER",
                    name: t,
                    value: r
                }, o]
            }
        return [{
            type: "RAW",
            value: e
        }, h.get(e) || []]
    }
    function g(e) {
        switch (e.type) {
        case "HANDLER":
            return a.get(e.name).deserialize(e.value);
        case "RAW":
            return e.value
        }
    }
    function b(e, t, n) {
        return new Promise((r=>{
            const o = new Array(4).fill(0).map((()=>Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16))).join("-");
            e.addEventListener("message", (function t(n) {
                n.data && n.data.id && n.data.id === o && (e.removeEventListener("message", t),
                r(n.data))
            }
            )),
            e.start && e.start(),
            e.postMessage(Object.assign({
                id: o
            }, t), n)
        }
        ))
    }
    var v = function(e, t, n, r) {
        return new (n || (n = Promise))((function(o, i) {
            function a(e) {
                try {
                    c(r.next(e))
                } catch (t) {
                    i(t)
                }
            }
            function s(e) {
                try {
                    c(r.throw(e))
                } catch (t) {
                    i(t)
                }
            }
            function c(e) {
                var t;
                e.done ? o(e.value) : (t = e.value,
                t instanceof n ? t : new n((function(e) {
                    e(t)
                }
                ))).then(a, s)
            }
            c((r = r.apply(e, t || [])).next())
        }
        ))
    }
      , _ = function(e, t) {
        var n, r, o, i, a = {
            label: 0,
            sent: function() {
                if (1 & o[0])
                    throw o[1];
                return o[1]
            },
            trys: [],
            ops: []
        };
        return i = {
            next: s(0),
            throw: s(1),
            return: s(2)
        },
        "function" == typeof Symbol && (i[Symbol.iterator] = function() {
            return this
        }
        ),
        i;
        function s(s) {
            return function(c) {
                return function(s) {
                    if (n)
                        throw new TypeError("Generator is already executing.");
                    for (; i && (i = 0,
                    s[0] && (a = 0)),
                    a; )
                        try {
                            if (n = 1,
                            r && (o = 2 & s[0] ? r.return : s[0] ? r.throw || ((o = r.return) && o.call(r),
                            0) : r.next) && !(o = o.call(r, s[1])).done)
                                return o;
                            switch (r = 0,
                            o && (s = [2 & s[0], o.value]),
                            s[0]) {
                            case 0:
                            case 1:
                                o = s;
                                break;
                            case 4:
                                return a.label++,
                                {
                                    value: s[1],
                                    done: !1
                                };
                            case 5:
                                a.label++,
                                r = s[1],
                                s = [0];
                                continue;
                            case 7:
                                s = a.ops.pop(),
                                a.trys.pop();
                                continue;
                            default:
                                if (!(o = a.trys,
                                (o = o.length > 0 && o[o.length - 1]) || 6 !== s[0] && 2 !== s[0])) {
                                    a = 0;
                                    continue
                                }
                                if (3 === s[0] && (!o || s[1] > o[0] && s[1] < o[3])) {
                                    a.label = s[1];
                                    break
                                }
                                if (6 === s[0] && a.label < o[1]) {
                                    a.label = o[1],
                                    o = s;
                                    break
                                }
                                if (o && a.label < o[2]) {
                                    a.label = o[2],
                                    a.ops.push(s);
                                    break
                                }
                                o[2] && a.ops.pop(),
                                a.trys.pop();
                                continue
                            }
                            s = t.call(e, a)
                        } catch (c) {
                            s = [6, c],
                            r = 0
                        } finally {
                            n = o = 0
                        }
                    if (5 & s[0])
                        throw s[1];
                    return {
                        value: s[0] ? s[1] : void 0,
                        done: !0
                    }
                }([s, c])
            }
        }
    };
    importScripts("https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"),
    "localhost" !== self.location.hostname && (console.log = function() {}
    ,
    console.error = function() {}
    );
    var w = {
        getInput: function(e, t) {
            var n = new XMLHttpRequest;
            return n.open("GET", "/react-py-get-input/?id=".concat(e, "&prompt=").concat(t), !1),
            n.send(null),
            n.responseText
        }
    };
    s({
        init: function(e, t, n) {
            return v(this, void 0, void 0, (function() {
                var r, o, i, a;
                return _(this, (function(s) {
                    switch (s.label) {
                    case 0:
                        return r = self,
                        [4, self.loadPyodide({
                            stdout: e
                        })];
                    case 1:
                        return r.pyodide = s.sent(),
                        [4, self.pyodide.loadPackage(["pyodide-http"])];
                    case 2:
                        return s.sent(),
                        n[0].length > 0 ? [4, self.pyodide.loadPackage(n[0])] : [3, 4];
                    case 3:
                        s.sent(),
                        s.label = 4;
                    case 4:
                        return n[1].length > 0 ? [4, self.pyodide.loadPackage(["micropip"])] : [3, 7];
                    case 5:
                        return s.sent(),
                        [4, self.pyodide.pyimport("micropip").install(n[1])];
                    case 6:
                        s.sent(),
                        s.label = 7;
                    case 7:
                        return o = self.crypto.randomUUID(),
                        i = self.pyodide.version,
                        self.pyodide.registerJsModule("react_py", w),
                        [4, self.pyodide.runPythonAsync("\nimport pyodide_http\npyodide_http.patch_all()\n")];
                    case 8:
                        return s.sent(),
                        a = '\nimport sys, builtins\nimport react_py\n__prompt_str__ = ""\ndef get_input(prompt=""):\n    global __prompt_str__\n    __prompt_str__ = prompt\n    print(prompt, end="")\n    s = react_py.getInput("'.concat(o, '", prompt)\n    print(s)\n    return s\nbuiltins.input = get_input\nsys.stdin.readline = lambda: react_py.getInput("').concat(o, '", __prompt_str__)\n'),
                        [4, self.pyodide.runPythonAsync(a)];
                    case 9:
                        return s.sent(),
                        t({
                            id: o,
                            version: i
                        }),
                        [2]
                    }
                }
                ))
            }
            ))
        },
        run: function(e) {
            return v(this, void 0, void 0, (function() {
                return _(this, (function(t) {
                    switch (t.label) {
                    case 0:
                        return [4, self.pyodide.runPythonAsync(e)];
                    case 1:
                        return t.sent(),
                        [2]
                    }
                }
                ))
            }
            ))
        },
        readFile: function(e) {
            return self.pyodide.FS.readFile(e, {
                encoding: "utf8"
            })
        },
        writeFile: function(e, t) {
            return self.pyodide.FS.writeFile(e, t, {
                encoding: "utf8"
            })
        },
        mkdir: function(e) {
            self.pyodide.FS.mkdir(e)
        },
        rmdir: function(e) {
            self.pyodide.FS.rmdir(e)
        }
    })
}
)();

[skrawcz]

If I add:

    var __webpack_require__ = {};
    /******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	

to the top of that file, things work -- I took this from the old build file ...

[skrawcz]

but don't have any idea which dependency this is :/

[elilambnz]

Hi @skrawcz, we've noticed issues with webpack imports when using Docusaurus, have you followed the Usage with Docusaurus section for your project?

Adding this plugin may solve your issue.

[skrawcz]

Hi @skrawcz, we've noticed issues with webpack imports when using Docusaurus, have you followed the Usage with Docusaurus section for your project?

Adding this plugin may solve your issue.

yeah unfortunately we are doing all those things from what I can tell:

At least my workaround makes things usable...

[elilambnz]

This is injected by Docusaurus. Adding the plugin to disable the used exports optimization used to be enough, but it appears that this solution no longer works. An issue was opened for this over in the Docusaurus repo: facebook/docusaurus#8389

I haven't been able to resolve this, but any insight into either a code change that can be added to the react-py project, or an updated Docusaurus plugin to get this working would be greatly appreciated

[skrawcz]

Here's my manual workaround:

• build the project
• find the file with the error
• edit the file with the following:

To make this work you need to add this:

/******/ 	var __webpack_require__ = {};
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();

to the top of the file that is complaining:
i.e. in between

(() => {
    "use strict";

and

 __webpack_require__.gca = function (e) {