Error: Module name "react" has not been loaded yet for context try to reproduce included threejs-fiber example #59
Comments
|
Hi Charl, sharing how I debugged this: This tell me that this is a dead end. if esbuild includes a commonjs module (which calls require(...)), it will not try to rewrite/transpile that code. (Althought I might be possible looking at evanw/esbuild#946 (comment) ) This is when I switched to rollup, going over several error iterations like: Which led me to pmndrs/react-three-fiber#221 I eventually got the following script: // rollup.config.mjs
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
export default {
input: './threejs-fiber.js',
output: [
{
file: 'threejs-fiber.bundle.js',
inlineDynamicImports: true,
format: 'es'
}
],
external: ["react", "react-dom", "react-reconciler", "react-reconciler/constant"],
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
nodeResolve({
browser: true,
}),
commonjs({
namedExports: {
scheduler: [
'unstable_runWithPriority',
'unstable_IdlePriority',
'unstable_now',
'unstable_scheduleCallback',
'unstable_cancelCallback',
],
}
})
],
};running it like Which made it work for me. Could you check if this works for you? Maybe if it does, you could update the docs on this? Or possibly add a section in the notebook at the end to describe this. |
Btw, when you do this, you have a new react for your ESM, while ipyreact already ships react. Two reacts in the same react tree do not work together. |
Totally get this (and it's documented), but had to try something because the documented method was failing with a react-related issue. :) |
|
Thank you very much for looking into this Maarten!
Do you mean that I should replace the esbuild invocation on https://github.com/widgetti/ipyreact/blob/master/examples/threejs-fiber/threejs-fiber.ipynb with your suggested rollup invocation? Do you have any idea why it always used to work with esbuild, and now suddenly not? Looking at the rollup/rollup#487 you found, they say that "This happens because React uses process.env to determine whether you're in a development or production environment." ... but why does this break the build? -- urk, now I see that the I'm asking all these questions, because as someone with a fair bit of frontend experience, having to fine-tune rollup.config.mjs would be a bit of a trip. P.S. https://esbuild.github.io/api/#platform has the following to say about NODE_ENV and React:
|
I can successfully run the
threejs-fiber.ipynbwith the includedthreejs-fiber.bundle.jswithout any issues.Let's try and build the bundle by ourselves:
With fixed drei and fiber versions, this gives us the error below.
Let's try with unset versions, i.e. latest:
This builds successfully, with one warning, see below.
However, now when I run the threejs-fiber.ipynb notebook cell with
ipyreact.define_module(), I see the following error:threejs-fiber status: Error loading module: Error: Module name "react" has not been loaded yet for context: _. Use require([]) https://requirejs.org/docs/errors.html#notloadedIf I run esbuild without the
--external:...params to exclude react (just to check!), thedefine_module()is successful, but the cell that's supposed to show the BoxWidget gives the following eror: "Cannot read properties of null (reading 'useMemo')"I would be super grateful for any help with this. These symptoms are the similar to what I'm seeing trying to wrap a reactflow example with ipyreact.
Based on the fact that esbuild fails with versions that were known to be good, I am suspecting that some change in esbuild is causing these issues. (although I have now also tried out esbuild 0.19.12 and it yields exactly the same behaviour)
error with first esbuild attempt with fixed drei and fiber versions
warning with second esbuild attempt
The text was updated successfully, but these errors were encountered: