SyntaxError with the Without Build Tools setup #2287
Replies: 4 comments 1 reply
-
|
Please provide your version of react-three-fiber & react. Also please provide a reproduction of the issue so we can accurately investigate. |
Beta Was this translation helpful? Give feedback.
-
|
I just copy and pasted the example from here https://docs.pmnd.rs/react-three-fiber/getting-started/installation#without-build-tools console says "Uncaught SyntaxError: The requested module '/-/[email protected]/dist=es2019,mode=imports/unoptimized/constants.js' does not provide an export named 'ConcurrentRoot' (at fiber.js:4:9)" |
Beta Was this translation helpful? Give feedback.
-
|
this import throws the error import { Canvas, useFrame } from 'https://cdn.skypack.dev/@react-three/fiber' |
Beta Was this translation helpful? Give feedback.
-
|
Skypack seems unable to handle import such as I'd recommend another service like https://esm.sh that can properly link these: import ReactDOM from 'https://esm.sh/react-dom'
import React, { useRef, useState } from 'https://esm.sh/react'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber'
import htm from 'https://esm.sh/htm'
const html = htm.bind(React.createElement)
ReactDOM.render(
html`
<${Canvas} camera=${{ position: [0, 1.3, 3] }}>
<gridHelper args=${[4, 4]} />
<//>
`,
document.getElementById('root')
) |
Beta Was this translation helpful? Give feedback.
-
|
Hello guys Recently all of my R3F apps stopped working. I'm using the "without build tools" approach like so: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Three Fiber with HTM</title>
<style>
body {
margin: 0;
overflow: hidden;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAHUwAAB1MAHdM3LNAAABC0lEQVRIicXXMWoCQRiG4cfpIkRQrITcIHiLiLmBncdInVOIR/AEEXILyQUkYiMINkmZFJnBsCAZjbvzwlft7rz7bbHzT0seN3jEA+5xh168tsc73vCKF3xmrnuSLp6xxldm1vGZ7qXSKTZnCKvZxDXOYvYPYTWzXOniitKURZNNs5tPapSmTKrSWxwaEB+iS4jiJ3ROfYor0oku0MbuwgaXZId2wAj9OmtW6GMUMG5QmhgHDAuIhwGDAuJBcNxlmqQX/r6nHoKf/bRp9gHbAuJtwKqAeBWwLCBeUvCX+YF57R2PzKMTBbbF3xQZBBJFRp9EkWGvjubZ421iqsBAn6jtCNPKfIGrH9q+AR1lbyolkfH7AAAAAElFTkSuQmCC"),
auto;
}
div#root {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script type="module">
import htm from "https://esm.sh/htm";
import React, { useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { Canvas, useFrame } from "https://esm.sh/@react-three/fiber";
const html = htm.bind(React.createElement)
function App() {
console.log("App is rendering!");
return html`
<${Canvas} camera=${{ position: [0, 1.3, 3] }}>
<gridHelper args=${[4, 4]} />
<//>`;
}
createRoot(document.getElementById("root")).render(html`<${App} />`);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>Unfortunately, this is not working anymore. Do you have any idea what the issue could be? Thanks a lot in advance! |
Beta Was this translation helpful? Give feedback.
-
Uncaught SyntaxError: The requested module '/-/[email protected]/dist=es2019,mode=imports/unoptimized/constants.js' does not provide an export named 'ConcurrentRoot' (at fiber.js:4:9)
Beta Was this translation helpful? Give feedback.
All reactions