'_currentStyle' missing error when using Vite

[Loosetooth]

I'm having some trouble getting react-paper-bindings to work with Vite.

I made a simple test repo to reproduce the error.

It contains two canvases, one uses react-paper-bindings:

react-paper-binding Canvas:

// src/components/Panel2D.tsx

import React, { useEffect, useState } from 'react';
import { Canvas, View, Layer, usePaperScope, Circle } from 'react-paper-bindings';
import { Grid } from './Grid';

type Panel2DProps = {
  // scope: paper.PaperScope
}

export const Panel2D = (props: Panel2DProps) => {
  const [isPaperScopeReady, setIsPaperScopeReady] = useState(false)

  const paperScope = usePaperScope()

  return (
    <Canvas width={500} height={500} scope={paperScope} onScopeReady={() => {
      setIsPaperScopeReady(true)
    }}>
      {isPaperScopeReady && <>
        <View>
          {/* background layer */}
          <Layer>
            <Grid />
          </Layer>
          {/* path layer */}
          <Layer>
            <Circle center={[0, 0]} radius={10} fillColor="red" />
          </Layer>
        </View>
      </>
      }
    </Canvas>
  );
}

This one does not render anything and throws the following error in the console:

Uncaught TypeError: Cannot read properties of null (reading '_currentStyle')
    at Path2._initialize
    at new Path2
    at createPath
    at new Line
    ...

I went digging a bit in the paper.js code, and it looks like it fails on this line. So paper.project seems to be null.

Regular paper.js javascript Canvas

This one works fine.

// src/components/MyCanvas.tsx
import { PaperScope } from 'paper/dist/paper-core';
import React, { useState, useEffect, useRef } from 'react';

export const MyCanvas = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [paperScope] = useState(new PaperScope());

  useEffect(() => {
    if(!canvasRef.current) return;
    paperScope.setup(canvasRef.current);
    const circle = new paperScope.Path.Circle({
      center: [80, 50],
      radius: 35,
      fillColor: 'black'
    });

    // @ts-ignore
    paperScope.view.draw();
  }, [paperScope]);

  return (
    <div>
      <canvas ref={canvasRef} />
    </div>
  );
};

Any ideas what is going wrong? Help is much appreciated.