Cannot read property 'SPE_textures_uuid_map' of undefined

[anudit]

Hey, I am running into the below error when running react-spline with NextJS

vendors-node_modules_react-spline_dist_index_js.js:16 TypeError: Cannot read property 'SPE_textures_uuid_map' of undefined
    at e._decodeTextureData (_next/static/chunks/vendors-node_modules_react-spline_dist_index_js.js:16)
    at e.decode (_next/static/chunks/vendors-node_modules_react-spline_dist_index_js.js:16)
    at _next/static/chunks/vendors-node_modules_react-spline_dist_index_js.js:16

Page.js

import React from "react";
import dynamic from 'next/dynamic';
import { Flex } from "@chakra-ui/react";
const Spline = dynamic(import('react-spline').then((mod) => mod.Spline), { ssr: false }) // Async API cannot be server-side rendered

const Page = () => {

    const sp = {"object":{"uuid":"A4139620-9204-486B-A4A1-3BD990181AFA","objectType":"Scene","name":"Untitled","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"layers":1,"children":[{"uuid":"AC1C5AFD-E213-4296-AC65-F7FDAB17D1BE","objectType":"Mesh3D","name":"Cube copy 3","matrix":[-1,-1.2246467991473532e-16,-1.4997597826618576e-32,0,-1.2246467991473532e-16,1,1.2246467991473532e-16,0,0,1.2246467991473532e-16,-1,0,-499.99999999999983,-143.50000000000017,-23.53217505319185,1],"castShadow":true,"receiveShadow":true,"layers":1,"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-14.00000000000017,-67.99999999999999,83.50000000000223,1],"interaction":{"uuid":"65343270-A319-4B1F-9C5E-7021B4426064"},"geometry":"9E94A374-65B0-4BCE-876D-9519F81B532B","material":"DA7FC43D-F1E8-4927-BA5E-0547A0677AB0"},{"uuid":"5304BB3E-CCF0-4855-956D-45C0DC4B857B","objectType":"Mesh3D","name":"Cube copy 2","matrix":[-1,-1.2246467991473532e-16,-1.4997597826618576e-32,0,-1.2246467991473532e-16,1,1.2246467991473532e-16,0,0,1.2246467991473532e-16,-1,0,-503,211.0000000000002,-298.4733712417559,1],"castShadow":true,"receiveShadow":true,"layers":1,"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,12.500000000000057,-34.99999999999994,125.50000000000115,1],"interaction":{"uuid":"F2FFFF42-A96F-4FEC-B8E7-D472E26C16EF"},"geometry":"4F5A45C0-62D4-4506-A18A-4E9767767CA5","material":"240DF984-0496-4E9A-9D61-3FF19BCA6526"},{"uuid":"B3471C44-50DB-483F-9495-69F1CFF75C29","objectType":"Mesh3D","name":"Cube copy","matrix":[-1,-1.2246467991473532e-16,-1.4997597826618576e-32,0,-1.2246467991473532e-16,1,1.2246467991473532e-16,0,0,1.2246467991473532e-16,-1,0,471.0000000000001,-172.00000000000006,-70.5000000000012,1],"castShadow":true,"receiveShadow":true,"layers":1,"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,38.50000000000006,-88,125.50000000000115,1],"interaction":{"uuid":"51087BF1-7906-46E5-B354-EC2DADAC789E"},"geometry":"B314FC74-268D-4BD0-BEE3-065BB6890350","material":"B638D632-ACC3-4D0E-92BF-D395EEDFE56C"},{"uuid":"A1EFF26C-0F4F-479D-9F2E-24A1FE665743","objectType":"Mesh3D","name":"Cube","matrix":[-1,-1.2246467991473532e-16,-1.4997597826618576e-32,0,-1.2246467991473532e-16,1,1.2246467991473532e-16,0,0,1.2246467991473532e-16,-1,0,417.5,267,149.14403614060785,1],"castShadow":true,"receiveShadow":true,"layers":1,"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"90A7642A-F659-4492-8B99-333D29377C3B"},"geometry":"BCEEFA3E-9703-481A-BEE1-CC9B386CE99D","material":"BAED64D2-9836-4D5D-9A72-68C23F4B9F00"},{"uuid":"36791557-CFD9-4532-831B-E0C7D4C0B89F","objectType":"CombinedCamera","name":"Default Camera","matrix":[-0.9898406594433249,8.673617379884035e-19,-0.14218111306641262,0,-0.008446776338687411,0.9982337512005142,0.05880501622850022,0,0.14192998584614952,0.059408568103851686,-0.9880923545669007,0,141.92998584615052,59.40856810385211,-988.0923545669078,1],"layers":1,"children":[{"uuid":"C8406845-6C2F-436B-9DBD-9C80E6D42698","type":"DirectionalLight","name":"Default Directional Light","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,850000,1300000,1000000,1],"color":16777215,"intensity":0.75,"shadow":{"camera":{"uuid":"BF8B47DB-3162-4A37-9007-3404E99352C6","type":"OrthographicCamera","layers":1,"zoom":1,"left":-5,"right":5,"top":5,"bottom":-5,"near":0.5,"far":500}}}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"CC611A2F-7C2B-436A-A744-4C1653FC1C55"},"enableHelper":false,"cameraType":"OrthographicCamera","targetOffset":1000,"left":-960,"right":960,"top":528.5,"bottom":-528.5,"zoomOrtho":1,"nearOrtho":-50000,"far":50000,"aspect":1.816461684011353,"fov":45,"focus":10,"filmGauge":35,"filmOffset":0,"zoomPersp":1,"nearPersp":50},{"uuid":"F72C39A2-8A59-40DE-8A91-E7B9FD551298","type":"HemisphereLight","name":"Default Ambient Light","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,1],"color":13882323,"intensity":0.75,"groundColor":8553090}],"activeCamera":"36791557-CFD9-4532-831B-E0C7D4C0B89F","camera":"36791557-CFD9-4532-831B-E0C7D4C0B89F","directionalLight":"C8406845-6C2F-436B-9DBD-9C80E6D42698","ambientLight":"F72C39A2-8A59-40DE-8A91-E7B9FD551298","color":[0.09803921568627451,0.09803921568627451,0.09803921568627451],"alpha":1,"directionalLightState":true,"ambientLightState":true,"canvas":{"mode":1,"size":{"width":512,"height":512},"fullScreen":true}},"metadata":{"version":1.4,"type":"Object","generator":"Object3D.toJSON"},"geometries":[{"uuid":"9E94A374-65B0-4BCE-876D-9519F81B532B","userData":{"parameters":{"width":245,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":184,"depth":100},"type":"CubeGeometry"}},{"uuid":"4F5A45C0-62D4-4506-A18A-4E9767767CA5","userData":{"parameters":{"width":167,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":171,"depth":100},"type":"CubeGeometry"}},{"uuid":"B314FC74-268D-4BD0-BEE3-065BB6890350","userData":{"parameters":{"width":143,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":149,"depth":100},"type":"CubeGeometry"}},{"uuid":"BCEEFA3E-9703-481A-BEE1-CC9B386CE99D","userData":{"parameters":{"width":250,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":9,"height":250,"depth":100},"type":"CubeGeometry"}}],"materials":[{"uuid":"DA7FC43D-F1E8-4927-BA5E-0547A0677AB0","type":"MeshPhongMaterial","color":2857471,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":2,"uuid":"AB6F8DDB-93D3-4E5F-95BD-846E66922102","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16757281}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"240DF984-0496-4E9A-9D61-3FF19BCA6526","type":"MeshPhongMaterial","color":2857471,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":2,"uuid":"80759CC6-D040-4FEA-8815-C5A882B1A583","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":11687423}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"B638D632-ACC3-4D0E-92BF-D395EEDFE56C","type":"MeshPhongMaterial","color":2857471,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":2,"uuid":"FF6C6CC0-7F9E-400E-A7B3-F91AFC49F8EA","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":3269535}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"BAED64D2-9836-4D5D-9A72-68C23F4B9F00","type":"MeshPhongMaterial","color":2857471,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":2,"uuid":"569F54DD-3FD8-4EFC-974F-73EDABA77BC7","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":2857471}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}}],"options":{"generatorFormat":1,"useOrbitControls":true,"useHostedRuntime":false,"orbitDamped":true,"orbitTarget":[1.1368683772161603e-12,4.760636329592671e-13,-8.071765478234738e-12],"cameraRotate":true,"cameraPan":true,"cameraZoom":true,"quality":"default","watermark":true}};

    return (
        <Flex w="100vw" h="100vh">
            <Spline scene={sp} />
        </Flex>
    )
}

export default Page;

[anudit]

Works with the one in the examples though https://github.com/utkarshdubey/react-spline/blob/main/example/src/scene.js

[utkarshdubey]

Hey! Apparently, Spline keeps updating their runtime periodically, this seems to be the same issue as #10. I'm closing this and would revert a fix.

[anudit]

Hey, while digging further I realized the examples use the glTF exported file so I tried that and run into a different error,

[utkarshdubey]

@anudit This should be fixed now.