CSS Animations example doesn't work

[caburj]

Describe the bug

Navigate to the CSS Animations example and it won't render anything because it crashes with the following error:

eruda:8 Console was cleared
eruda:8 TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at getRect (solid-transition-group.js:126:41)
    at solid-transition-group.js:236:16
    at Array.forEach (<anonymous>)
    at Object.fn (solid-transition-group.js:232:7)
    at runComputation (solid-67d434a6.js:675:22)
    at updateComputation (solid-67d434a6.js:660:3)
    at createEffect (solid-67d434a6.js:206:31)
    at TransitionGroup (solid-transition-group.js:230:3)
    at solid-bbf2753b.js:1218:24
    at untrack (solid-bbf2753b.js:430:12)
Ma.forEach.n.<computed> @ eruda:8
(anonymous) @ 3904e498-42ba-437f-91f6-03a6b5951937:107
postMessage (async)
(anonymous) @ setupRepl.d213c771.js:783
aa @ index.a63cbc0b.js:1
bt @ index.a63cbc0b.js:1
Xt @ index.a63cbc0b.js:1
ur @ index.a63cbc0b.js:1
(anonymous) @ index.a63cbc0b.js:1
ve @ index.a63cbc0b.js:1
dr @ index.a63cbc0b.js:1
ve @ index.a63cbc0b.js:1
Qa @ index.a63cbc0b.js:1
o @ index.a63cbc0b.js:1
(anonymous) @ setupRepl.d213c771.js:6750

Your Example Website or App

https://www.solidjs.com/examples/cssanimations

Steps to Reproduce the Bug or Issue

Check out this 45-sec video: https://youtu.be/d1Jk8Ma58iQ

Expected behavior

I expected to see some transitions and animations.

Screenshots or Videos

No response

Platform

• OS: macOS 12.5.1 (M1)
• Browser: Safari Version 15.6.1, Google Chrome Version 105.0.5195.102

Additional context

No response

[ryansolid]

Hmm.. the example works in codesandbox: https://codesandbox.io/s/basic-css-transition-36rln

So probably something specific to playground/website. I will transfer the issue there.

[thetarnav]

Ok this is interesting

When you change the import to from "solid-transition-group@beta" instead, everything works. Even though @latest and @beta are at this time exactly the same. The only difference between the two is when they were published. @beta was published when solid-js@1.6.14 was the latest version, and @latest was published a couple of hours after solid-js@1.6.15 has been released.

solid-transition-group:

solid-js

and @solid-primitives/transition-group (dependency of solid-transition-group)

Solid playground uses esm.sh for fetching packages, and so if you request the solid-transition-group package, this is what you get: https://esm.sh/v111/solid-transition-group@0.1.0/es2022/solid-transition-group.development.js

/* esm.sh - esbuild bundle(solid-transition-group@0.1.0) es2022 development */
// esm-build-33e8763ed2a9c598ebef3ca4126942e11623bd31-c42d8a64/node_modules/solid-transition-group/dist/index.js
import { createMemo } from "/v111/solid-js@1.6.15/es2022/solid-js.development.js";
import { createSwitchTransition } from "/v111/@solid-primitives/transition-group@1.0.0/es2022/transition-group.development.js";
import { resolveFirst } from "/v111/@solid-primitives/refs@1.0.0/es2022/refs.development.js";
import { createEffect } from "/v111/solid-js@1.6.15/es2022/solid-js.development.js";
import { createListTransition } from "/v111/@solid-primitives/transition-group@1.0.0/es2022/transition-group.development.js";
import { resolveElements } from "/v111/@solid-primitives/refs@1.0.0/es2022/refs.development.js";

It requests solid-js version 1.6.15

But when you request the @solid-primitives/transition-group dependency: https://esm.sh/v111/@solid-primitives/transition-group@1.0.0/es2022/transition-group.development.js

/* esm.sh - esbuild bundle(@solid-primitives/transition-group@1.0.0) es2022 development */
// esm-build-816576961470e1bbc287410f58437464a2dc660c-fa40c853/node_modules/@solid-primitives/transition-group/dist/index.js
import { untrack, createSignal, useTransition, createComputed, batch, createMemo, $TRACK } from "/v111/solid-js@1.6.14/es2022/solid-js.development.js";

It requests solid-js 1.6.14

But then, when you request for solid-js - version used by your code in the playground https://esm.sh/solid-js?dev

/* esm.sh - solid-js@1.6.14 */
export * from "https://esm.sh/v111/solid-js@1.6.14/es2022/solid-js.development.js";

It responds with 1.6.14 😅

So both playground and solid-transition-group are working fine. It's just that they are using different solid versions - which breaks the usual execution of effects - because esm.sh responds with inconsistent solid-js versions. No idea how exactly we are supposed to fix that.