Comments (6)
@ivanburlakov
Finally I was able to fix it.
The problem was.... my node version was v12 π
I changed it to v17 and everything runs smooth like butter.
I figured it out, because I used your repo and tried yarn as well, but I got the exact same error. So I knew it had to be on my system π
Thank you so much for your help π
from react-spline.
Hello! Spline works in my Next.js app. Do not replace the whole index.js file. Insert the import line and add <Spline>
tag to tone of your page files or in _app.js
file.
from react-spline.
Did you set it up with the most recent next.js setup?
I think it has to do something with the dependencies of react 16 and 17, but Next.js is on react 18.
I actually didn't replace the whole index.js file. That was just to demonstrate the problem π
I doesn't work either way, however: When I start my app with spline commented out and then after the app is running, comment it back in, it does work. But as soon as I make a page reload the error is back.
from react-spline.
@SilasNiewierra yes, I am using it in newly created create-next-app
with React
version 18.1.0
. Strange error however.. Maybe try it on absolutely new empty app? It needs to be said, that this module is quite raw currently and I ran in some bugs too. Hopefully it will continue to develop π
from react-spline.
Hi @ivanburlakov.
I just created a completely new next app with npx create-next-app
.
Afterwards I installed spline npm install @splinetool/react-spline @splinetool/runtime
and created a new component Spline.jsx
with the default code:
import Spline from '@splinetool/react-spline';
export default function App() {
return (
<div>
<Spline scene="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode" />
</div>
);
}
Then I used my Spline component in the default index.js.
Still, the same exact error occurs.
With this warning coming right before the error:
Warning: data for page "/_error" is 430 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
You said it worked on your end. Could you tell me what you did and maybe provide a little repo or describe your process?
from react-spline.
@SilasNiewierra I created a working blank project and uploaded it to this repo - https://github.com/ivanburlakov/spline-nextjs-example . Next.js App code structure is a bit different from React.
from react-spline.
Related Issues (20)
- Background and camera problem when updating my scene HOT 1
- Pass down mouse events from divs with higher z-index
- Old Safari and onError message
- Next.js 13 / React - @splinetools don't handle onLoad event correctly. HOT 2
- Remix is not supported HOT 4
- onMouseDown is not working HOT 2
- Lighthouse performance issues | βFinding Best Practices HOT 4
- Components in Android mobile not showing only up for black canvas
- EmitEvent not working React HOT 1
- how to change material while rendering for animation HOT 3
- How to get Camera Rotation or Game Controls Event in JS HOT 1
- Nesting within a Flexbox sometimes causes infinite growth of the spline canvas HOT 3
- Attempted import error: 'mergeBufferGeometries' is not exported from 'three/examples/jsm/utils/BufferGeometryUtils.js' (imported as 'yI') in useSpline HOT 1
- Expression control HOT 2
- no network how to show?
- DoF effect changes the way canvas is created in the DOM HOT 1
- Can't build Spline on Fly.io - Causes 'Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory' HOT 1
- Import Spline in typescript project has error after upgrade to version 3.0.0 HOT 4
- TypeError: Cannot read properties of undefined (reading 'A') HOT 3
- Version 3.0.3 does not work with React versions prior to 19 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spline.