Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

THREE.WebGLRenderer: A WebGL context could not be created. Reason: Canvas has an existing context of a different type #205

Open
itsfaraaz opened this issue Aug 18, 2024 · 2 comments

Comments

@itsfaraaz
Copy link

Hello,

I am embedding react spline into my NextJS project. Sometimes, I get this error when navigating to my site.

The live URL is https://tellthevision.co. This issue happens only sometimes, and when I go into private browsing mode it goes away.

Does anyone have any insight why this could be occurring?

Code:

            <Spline
                className={clsx("absolute bottom-0 top-0 left-0 right-0", isDragging ? "cursor-grabbing" : "cursor-grab")}
                scene="https://prod.spline.design/kECgZ3FaUCSh52w8/scene.splinecode"
                onLoad={() => setIsLoaded(true)}
            />
472-f215380d4b41b523.js:1 THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Canvas has an existing context of a different type
window.console.error @ 472-f215380d4b41b523.js:1
eb @ c6a54c64-e2346b71f222343e.js:3152
em @ c6a54c64-e2346b71f222343e.js:3152
nv @ c6a54c64-e2346b71f222343e.js:3152
Ck @ c6a54c64-e2346b71f222343e.js:6283
start @ c6a54c64-e2346b71f222343e.js:7418
await in start
load @ c6a54c64-e2346b71f222343e.js:7418
await in load
(anonymous) @ 805-992f87d6e4c6bd8e.js:6
(anonymous) @ 805-992f87d6e4c6bd8e.js:6
aD @ fd9d1056-4b2c3529c0a2f3c1.js:1
a1 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
o7 @ fd9d1056-4b2c3529c0a2f3c1.js:1
(anonymous) @ fd9d1056-4b2c3529c0a2f3c1.js:1
C @ 472-f215380d4b41b523.js:1Understand this error
3472-f215380d4b41b523.js:1 THREE.WebGLRenderer: A WebGL context could not be created. Reason:  Canvas has an existing context of a different type
window.console.error @ 472-f215380d4b41b523.js:1
eb @ c6a54c64-e2346b71f222343e.js:3152
em @ c6a54c64-e2346b71f222343e.js:3152
nv @ c6a54c64-e2346b71f222343e.js:3152
Ck @ c6a54c64-e2346b71f222343e.js:6283
start @ c6a54c64-e2346b71f222343e.js:7418
await in start
load @ c6a54c64-e2346b71f222343e.js:7418
await in load
(anonymous) @ 805-992f87d6e4c6bd8e.js:6
(anonymous) @ 805-992f87d6e4c6bd8e.js:6
aD @ fd9d1056-4b2c3529c0a2f3c1.js:1
a1 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
o7 @ fd9d1056-4b2c3529c0a2f3c1.js:1
(anonymous) @ fd9d1056-4b2c3529c0a2f3c1.js:1
C @ 472-f215380d4b41b523.js:1Understand this error
472-f215380d4b41b523.js:1 THREE.WebGLRenderer: Error creating WebGL context.
window.console.error @ 472-f215380d4b41b523.js:1
nv @ c6a54c64-e2346b71f222343e.js:3152
Ck @ c6a54c64-e2346b71f222343e.js:6283
start @ c6a54c64-e2346b71f222343e.js:7418
await in start
load @ c6a54c64-e2346b71f222343e.js:7418
await in load
(anonymous) @ 805-992f87d6e4c6bd8e.js:6
(anonymous) @ 805-992f87d6e4c6bd8e.js:6
aD @ fd9d1056-4b2c3529c0a2f3c1.js:1
a1 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a4 @ fd9d1056-4b2c3529c0a2f3c1.js:1
a6 @ fd9d1056-4b2c3529c0a2f3c1.js:1
o7 @ fd9d1056-4b2c3529c0a2f3c1.js:1
(anonymous) @ fd9d1056-4b2c3529c0a2f3c1.js:1
C @ 472-f215380d4b41b523.js:1Understand this error
c6a54c64-e2346b71f222343e.js:3152 Uncaught (in promise) Error: Error creating WebGL context.
    at new nv (c6a54c64-e2346b71f222343e.js:3152:59009)
    at new Ck (c6a54c64-e2346b71f222343e.js:6283:85)
    at LO.start (c6a54c64-e2346b71f222343e.js:7418:23667)
    at async LO.load (c6a54c64-e2346b71f222343e.js:7418:18395)
    at async 805-992f87d6e4c6bd8e.js:6:27754
@pontusab
Copy link

We have the same issue!

@itsfaraaz
Copy link
Author

Temporary hack to resolve this is to wait 100ms before rendering Spline, looks like browser needs to do some work prior to loading the Spline component:


    const [shouldRenderSpline, setShouldRenderSpline] = useState(false);

    useEffect(() => {
        const timer = setTimeout(() => {
            setShouldRenderSpline(true);
        }, 100);

        return () => clearTimeout(timer);
    }, []);

    return (
                shouldRenderSpline && (
                    <Spline ... />
                )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants