splinetool / react-spline

React component for Spline scenes.
MIT License
1.16k stars 56 forks source link

[Bug] Unable to use react components #32

Closed LouisMarzorati closed 2 years ago

LouisMarzorati commented 2 years ago

Tried with both plain react and next js, following the provided documentation results in the same error message

Error: fetch for http://localhost:3000/%22http:/localhost:3000/_assets/_fonts/roboto_regular.json%22

image

import Spline from '@splinetool/react-spline';

// the react code
export default function App() {
  return (
    <div>
      <Spline scene="https://prod.spline.design/xn5XEHKULkcZrYz4/scene.spline" />
    </div>
  );
}
//the nextjs code
import dynamic from "next/dynamic";

const Spline = dynamic(() => import("@splinetool/react-spline"), {
  ssr: false,
});

export default function Home() {
  return (
    <div className="container">
      <main className="main">
        <div>
          <Spline scene="https://prod.spline.design/xn5XEHKULkcZrYz4/scene.spline" />
        </div>
      </main>
    </div>
  );
}

public url

package.json

{
  "name": "spline-template",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@splinetool/react-spline": "^2.0.0",
    "@splinetool/runtime": "^0.9.33",
    "next": "12.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-hot-toast": "^2.2.0",
    "sass": "^1.49.9"
  },
  "devDependencies": {
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.1"
  }
}
marcofugaro commented 2 years ago

Hey, same as #30, text doesn't work yet in react-spline, it will be supported soon.

In the meantime you can hide text from your scene when you export.

marcofugaro commented 2 years ago

Text now works correctly. Please re-export your scenes!