When I wanted to use React in the browser without Node.js, I loaded it using UMD modules. This is not an option with R3F and one should go to using ESM modules. However, I had to dig a lot to find a set of working versions:
It seems to be working fine but it is just the first example from the R3F site with a few improvements to show that “useState” hook in React is asynchronous.
I dont know R3F but i dont think it relies on node.js. Sure, you can do server side rendering with react, but my understanding is that you cannot expect some arbitrary machine to be able to render webgl out of the box. I think it would be quite complex to render some 3d with r3f and node.
There’s a long chain of dependencies (60+ including transient) underneath libraries like @react-three/drei. I won’t say this can’t work without a bundler, but I’d be very pessimistic about the approach. Most dependencies published to npm are meant just for that — to be installed through npm, and you need all 60+ of them to work from a CDN here.
tl;dr — I would use Node.js to install Vite, and then run the local development server with Vite. The application of course still runs in a browser, there’s no Node.js in your final application. You’re just using Node.js to run a local development server, which you would need anyway.
three.js really does a fair bit of care and work to maintain this no-bundler-required workflow with import maps and CDNs, many (most?) npm packages do not, there would be no guarantees about the 60+ dependencies under drei. IMHO, the import maps work well enough at first, but once you can no longer count the full dependency graph on one hand, it’s a lot of hassle.
create a package.json somehow with all dependencies
run "npm install’ and wait for 400 Mb of npm packages to be downloaded
npm start
point the browser to localhost on port 3000 (macOS) or port 8091 (ubuntu)
I posted a very silly script that can be executed on the browser (I have an Apache server running) without doing anything. It just works. Why I did this way? Because I wanted to explain the code to someone else without even mentioning the existence of npm packages.
I was very surprised when I included drei using those old versions and it did work. It was amazing. Unfortunately, it does not run with newer versions. I always get a “l.current is null” in React.
The use of esm modules is going to be supported in React 19 out of the box.
I think thid is analogous to explaining code but without compiling it? You dont need the dependencies technically to explain stuff, you do to run stuff.
I wonder if r3f is the library thats behind in this case, i thought that its actually really well integrated into the whole JS ecosystem. In the past, my understanding was that three.js actually needed to jump through special hoops in order to be able to “just work ” in a web page.
But also, now that i think of it, why do you even have to explain what npm does? Did you explain what apache does? Why not just install the 400mb of dependencies, run yarn start and then invite your friend over and explain just whats happening on the HTML page?
I think this may be the crux of the issue, if you are not talking to them about apache, just dont talk to them about npm.
I agree with you. I just said that it has been always possible to use React on the browser without any building tool. I used this material extracted from the official howto from Facebook for a long time:
It was based on UMD modules and even with the new ES6 modules, React 19 seems to have found a way to adapt itself. I thought R3F could follow the same course, but if it is not possible or too too hard, fine. I am using Vite now: