How to Attach Tight Rigid Body Physics to Extruded SVG with React Three Rapier

I’ve also asked this question on Stack Overflow.

I’m trying to get to a tight inferred mesh from @react-three/rapier’s <RigidBody> on an extruded SVG geometry, much like the hull example in this CodeSandbox from their docs. However, so far, the best inferred shape I’ve got is a cuboid, and it also outpositions the collider.

When I try to apply a hull on it, here’s the error I get:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'array')

Since this is a mesh of meshes, I think it gets lost? I don’t know. Maybe I need something like an <InstancedMesh>? I have no idea. Sorry, I’m new to this physics thing.

Anyways, here’s a CodeSandbox based on that other one with the extruded SVG.

And, for reference, here’s the extruded SVG code:

import { useMemo } from "react";

import * as THREE from "three";
import { SVGLoader } from "three/examples/jsm/Addons.js";
import { useLoader } from "@react-three/fiber";

type ExtrudedSvgProps = {
  filename: string;
  scale?: number;
  position?: [number, number, number];
export default function ExtrudedSvg({
  scale = 1,
  position = [-10, 10, 0],
}: ExtrudedSvgProps) {
  const svgData = useLoader(SVGLoader, filename);
  const shapes = useMemo(() => {
    return => p.toShapes(true));
  }, [svgData]);

  return (
      rotation={[Math.PI, 0, 0]}
      position={[position[0] + 5, position[1] - 2, position[2] + 2]}
      {, i) => (
        <mesh key={i} position={[0, 0, 0]}>
                depth: 5,
                bevelEnabled: false,
                steps: 30,

And here’s how I’m using it:

<RigidBody colliders="cuboid" position={[-5, 20, 0]}>
    position={[-5, 10, 0]}

Apparently, the solution is super simple. Just take out the outer <mesh>, and just return <> {} </>.