Which R3F versions work without Node.js?

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:

First R3F example improved

(source)

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.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="./styles.css" />
        <title>R3F without nodejs</title>
    </head>
    <body>
        <div id="output"></div>

        <div id="root"></div>

        <script type="importmap">
            {
                "imports": {
                    "react": "https://esm.sh/react@18.2.0",
                    "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
                    "@react-three/fiber": "https://esm.sh/@react-three/fiber@8.15.16",
                    "@react-three/drei": "https://esm.sh/@react-three/drei@9.99.4"
                }
            }
        </script>

        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

        <script type="text/babel" data-type="module" src="r3f.js"></script>
    </body>
</html>

Why do the most recent versions of R3F do not work??

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.

2 Likes

I completely misunderstood the question.

Should the dependencies matter? If the OP is using rje build artifact this should work in theory?

Edit

Never mind me, i have no idea what import maps are. Is there a way to import the last two packages from it the same way r3f.js is?

Possibly, but not my idea of a fun time. :sweat_smile:

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.

2 Likes

The normal flow is:

  1. create a package.json somehow with all dependencies
  2. run "npm install’ and wait for 400 Mb of npm packages to be downloaded
  3. npm start
  4. 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.

Try out React 19 in ESM without build tools

I thought it would be possible for R3F to keep up, although not necessarily “easy”. But for what you are saying, it is very unlike this would happen…

I had never used Vite before, and it is faster indeed. Furthermore, Text does not work without using a building tool.

cubes + decal

It is interesting that when the two cubes overlap their decals are not hidden… kind of weird…

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 :tm:” 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:

tic-tac-toe

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:

React + Vite