react-py
react-py copied to clipboard
elilambnz
Help triaging: __webpack_require__ is not defined
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)
}
})
}
)();
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 ...
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.
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...
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: https://github.com/facebook/docusaurus/issues/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
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) {
@skrawcz thanks for the workaround, unfortunately manually editing the complied code isn't a viable workaround for many.
However, I'm happy to let you know that a patch was added to the Usage with Docusaurus section of the docs to address this. Hopefully this also helps fix the issue in your project.