@react-three/fiber 9.0.0-alpha.0 → 9.0.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.3.0
+
+### Minor Changes
+
+- 9c450ec: feat: improve errors
+
+## 8.2.3
+
+### Patch Changes
+
+- b8d2eab: fix: improve useLoader signature, initial size on createRoot
+
 ## 8.2.2
 
 ### Patch Changes

package/dist/declarations/src/core/hooks.d.ts

@@ -4,6 +4,7 @@ import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { RootState, RenderCallback, StageTypes } from './store';
 import { ObjectMap } from './utils';
 import { UpdateCallback } from './stages';
+import { LoadingManager } from 'three';
 export interface Loader<T> extends THREE.Loader {
     load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
 }
@@ -16,7 +17,7 @@ export declare function useThree<T = RootState>(selector?: StateSelector<RootSta
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useUpdate(callback: UpdateCallback, stage?: StageTypes): void;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
-export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
+export declare function useLoader<T, U extends string | string[]>(Proto: new (manager?: LoadingManager) => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
 export declare namespace useLoader {
     var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
     var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;

package/dist/declarations/src/core/utils.d.ts

@@ -13,7 +13,7 @@ export declare type UnblockProps = {
 };
 export declare function Block({ set }: Omit<UnblockProps, 'children'>): null;
 export declare class ErrorBoundary extends React.Component<{
-    set: React.Dispatch<any>;
+    set: React.Dispatch<Error | undefined>;
     children: React.ReactNode;
 }, {
     error: boolean;
@@ -24,7 +24,7 @@ export declare class ErrorBoundary extends React.Component<{
     static getDerivedStateFromError: () => {
         error: boolean;
     };
-    componentDidCatch(error: any): void;
+    componentDidCatch(err: Error): void;
     render(): React.ReactNode;
 }
 export declare const DEFAULT = "__default";

package/dist/declarations/src/native/Canvas.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {
     children: React.ReactNode;
     style?: ViewStyle;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<View>>;
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<View>>;

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { Options as ResizeOptions } from 'react-use-measure';
 import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     fallback?: React.ReactNode;
     resize?: ResizeOptions;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<HTMLCanvasElement>>;

package/dist/{index-b12f488b.cjs.prod.js → index-2e1b7052.cjs.prod.js}

@@ -72,8 +72,8 @@ class ErrorBoundary extends React__namespace.Component {
     };
   }
 
-  componentDidCatch(error) {
-    this.props.set(error);
+  componentDidCatch(err) {
+    this.props.set(err);
   }
 
   render() {
@@ -862,7 +862,7 @@ function createRenderer(_roots, _getEventPriority) {
     }
 
     if (type === 'primitive') {
-      if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
+      if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
       const object = props.object;
       instance = prepare(object, {
         type,
@@ -874,11 +874,11 @@ function createRenderer(_roots, _getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
+        throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
       } // Throw if an object or literal was passed for args
 
 
-      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
+      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!'); // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -1116,7 +1116,7 @@ function createRenderer(_roots, _getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
+        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!'); // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1748,7 +1748,7 @@ const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
 function useStore() {
   const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
 /**
@@ -1807,7 +1807,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
   };
 }
 /**
@@ -1871,19 +1871,19 @@ const createRendererInstance = (gl, canvas) => {
 };
 
 const createStages = (stages, store) => {
-  var _stages;
-
   const state = store.getState();
   let subscribers;
   let subscription;
-  stages = (_stages = stages) != null ? _stages : Lifecycle;
-  if (!stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
-  if (!stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
+
+  const _stages = stages != null ? stages : Lifecycle;
+
+  if (!_stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
+  if (!_stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
   state.set(({
     internal
   }) => ({
     internal: { ...internal,
-      stages: stages
+      stages: _stages
     }
   })); // Add useFrame loop to update stage
 
@@ -1907,11 +1907,43 @@ const createStages = (stages, store) => {
   Stages.Render.add(renderCallback, store);
 };
 
+function isCanvas(maybeCanvas) {
+  return maybeCanvas instanceof HTMLCanvasElement;
+}
+
+function computeInitialSize(canvas, defaultSize) {
+  if (defaultSize) {
+    return defaultSize;
+  }
+
+  if (isCanvas(canvas) && canvas.parentElement) {
+    const {
+      width,
+      height,
+      top,
+      left
+    } = canvas.parentElement.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left
+    };
+  }
+
+  return {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  };
+}
+
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
-  let prevRoot = roots.get(canvas);
-  let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
-  let prevStore = prevRoot == null ? void 0 : prevRoot.store;
+  const prevRoot = roots.get(canvas);
+  const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  const prevStore = prevRoot == null ? void 0 : prevRoot.store;
   if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
   // https://github.com/pmndrs/react-three-fiber/pull/2261
 
@@ -1935,7 +1967,7 @@ function createRoot(canvas) {
     configure(props = {}) {
       let {
         gl: glConfig,
-        size,
+        size: propsSize,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -2065,17 +2097,7 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || (canvas.parentElement ? {
-        width: canvas.parentElement.clientWidth,
-        height: canvas.parentElement.clientHeight,
-        top: canvas.parentElement.clientTop,
-        left: canvas.parentElement.clientLeft
-      } : {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      });
+      const size = computeInitialSize(canvas, propsSize);
 
       if (!is.equ(size, state.size, shallowLoose)) {
         state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
@@ -2092,9 +2114,9 @@ function createRoot(canvas) {
         performance: { ...state.performance,
           ...performance
         }
-      })); // Create update stages.
+      })); // Create update stages. Only do this once on init
 
-      if (stages !== state.internal.stages) createStages(stages, store); // Set locals
+      if (state.internal.stages.length === 0) createStages(stages, store); // Set locals
 
       onCreated = onCreatedCallback;
       configured = true;

package/dist/{index-b3be5a63.cjs.dev.js → index-65e750e4.cjs.dev.js}

@@ -72,8 +72,8 @@ class ErrorBoundary extends React__namespace.Component {
     };
   }
 
-  componentDidCatch(error) {
-    this.props.set(error);
+  componentDidCatch(err) {
+    this.props.set(err);
   }
 
   render() {
@@ -862,7 +862,7 @@ function createRenderer(_roots, _getEventPriority) {
     }
 
     if (type === 'primitive') {
-      if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
+      if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
       const object = props.object;
       instance = prepare(object, {
         type,
@@ -874,11 +874,11 @@ function createRenderer(_roots, _getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
+        throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
       } // Throw if an object or literal was passed for args
 
 
-      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
+      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!'); // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -1116,7 +1116,7 @@ function createRenderer(_roots, _getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
+        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!'); // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1748,7 +1748,7 @@ const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
 function useStore() {
   const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
 /**
@@ -1807,7 +1807,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
   };
 }
 /**
@@ -1871,19 +1871,19 @@ const createRendererInstance = (gl, canvas) => {
 };
 
 const createStages = (stages, store) => {
-  var _stages;
-
   const state = store.getState();
   let subscribers;
   let subscription;
-  stages = (_stages = stages) != null ? _stages : Lifecycle;
-  if (!stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
-  if (!stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
+
+  const _stages = stages != null ? stages : Lifecycle;
+
+  if (!_stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
+  if (!_stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
   state.set(({
     internal
   }) => ({
     internal: { ...internal,
-      stages: stages
+      stages: _stages
     }
   })); // Add useFrame loop to update stage
 
@@ -1907,11 +1907,43 @@ const createStages = (stages, store) => {
   Stages.Render.add(renderCallback, store);
 };
 
+function isCanvas(maybeCanvas) {
+  return maybeCanvas instanceof HTMLCanvasElement;
+}
+
+function computeInitialSize(canvas, defaultSize) {
+  if (defaultSize) {
+    return defaultSize;
+  }
+
+  if (isCanvas(canvas) && canvas.parentElement) {
+    const {
+      width,
+      height,
+      top,
+      left
+    } = canvas.parentElement.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left
+    };
+  }
+
+  return {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  };
+}
+
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
-  let prevRoot = roots.get(canvas);
-  let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
-  let prevStore = prevRoot == null ? void 0 : prevRoot.store;
+  const prevRoot = roots.get(canvas);
+  const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  const prevStore = prevRoot == null ? void 0 : prevRoot.store;
   if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
   // https://github.com/pmndrs/react-three-fiber/pull/2261
 
@@ -1935,7 +1967,7 @@ function createRoot(canvas) {
     configure(props = {}) {
       let {
         gl: glConfig,
-        size,
+        size: propsSize,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -2065,17 +2097,7 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || (canvas.parentElement ? {
-        width: canvas.parentElement.clientWidth,
-        height: canvas.parentElement.clientHeight,
-        top: canvas.parentElement.clientTop,
-        left: canvas.parentElement.clientLeft
-      } : {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      });
+      const size = computeInitialSize(canvas, propsSize);
 
       if (!is.equ(size, state.size, shallowLoose)) {
         state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
@@ -2092,9 +2114,9 @@ function createRoot(canvas) {
         performance: { ...state.performance,
           ...performance
         }
-      })); // Create update stages.
+      })); // Create update stages. Only do this once on init
 
-      if (stages !== state.internal.stages) createStages(stages, store); // Set locals
+      if (state.internal.stages.length === 0) createStages(stages, store); // Set locals
 
       onCreated = onCreatedCallback;
       configured = true;

package/dist/{index-e27d4a05.esm.js → index-a9c7a6cd.esm.js}

@@ -45,8 +45,8 @@ class ErrorBoundary extends React.Component {
     };
   }
 
-  componentDidCatch(error) {
-    this.props.set(error);
+  componentDidCatch(err) {
+    this.props.set(err);
   }
 
   render() {
@@ -835,7 +835,7 @@ function createRenderer(_roots, _getEventPriority) {
     }
 
     if (type === 'primitive') {
-      if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
+      if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
       const object = props.object;
       instance = prepare(object, {
         type,
@@ -847,11 +847,11 @@ function createRenderer(_roots, _getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
+        throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
       } // Throw if an object or literal was passed for args
 
 
-      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
+      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!'); // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -1089,7 +1089,7 @@ function createRenderer(_roots, _getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
+        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!'); // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1721,7 +1721,7 @@ const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
 function useStore() {
   const store = React.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
 /**
@@ -1780,7 +1780,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
   };
 }
 /**
@@ -1844,19 +1844,19 @@ const createRendererInstance = (gl, canvas) => {
 };
 
 const createStages = (stages, store) => {
-  var _stages;
-
   const state = store.getState();
   let subscribers;
   let subscription;
-  stages = (_stages = stages) != null ? _stages : Lifecycle;
-  if (!stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
-  if (!stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
+
+  const _stages = stages != null ? stages : Lifecycle;
+
+  if (!_stages.includes(Stages.Update)) throw 'The Stages.Update stage is required for R3F.';
+  if (!_stages.includes(Stages.Render)) throw 'The Stages.Render stage is required for R3F.';
   state.set(({
     internal
   }) => ({
     internal: { ...internal,
-      stages: stages
+      stages: _stages
     }
   })); // Add useFrame loop to update stage
 
@@ -1880,11 +1880,43 @@ const createStages = (stages, store) => {
   Stages.Render.add(renderCallback, store);
 };
 
+function isCanvas(maybeCanvas) {
+  return maybeCanvas instanceof HTMLCanvasElement;
+}
+
+function computeInitialSize(canvas, defaultSize) {
+  if (defaultSize) {
+    return defaultSize;
+  }
+
+  if (isCanvas(canvas) && canvas.parentElement) {
+    const {
+      width,
+      height,
+      top,
+      left
+    } = canvas.parentElement.getBoundingClientRect();
+    return {
+      width,
+      height,
+      top,
+      left
+    };
+  }
+
+  return {
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  };
+}
+
 function createRoot(canvas) {
   // Check against mistaken use of createRoot
-  let prevRoot = roots.get(canvas);
-  let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
-  let prevStore = prevRoot == null ? void 0 : prevRoot.store;
+  const prevRoot = roots.get(canvas);
+  const prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  const prevStore = prevRoot == null ? void 0 : prevRoot.store;
   if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Report when an error was detected in a previous render
   // https://github.com/pmndrs/react-three-fiber/pull/2261
 
@@ -1908,7 +1940,7 @@ function createRoot(canvas) {
     configure(props = {}) {
       let {
         gl: glConfig,
-        size,
+        size: propsSize,
         events,
         onCreated: onCreatedCallback,
         shadows = false,
@@ -2038,17 +2070,7 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || (canvas.parentElement ? {
-        width: canvas.parentElement.clientWidth,
-        height: canvas.parentElement.clientHeight,
-        top: canvas.parentElement.clientTop,
-        left: canvas.parentElement.clientLeft
-      } : {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      });
+      const size = computeInitialSize(canvas, propsSize);
 
       if (!is.equ(size, state.size, shallowLoose)) {
         state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
@@ -2065,9 +2087,9 @@ function createRoot(canvas) {
         performance: { ...state.performance,
           ...performance
         }
-      })); // Create update stages.
+      })); // Create update stages. Only do this once on init
 
-      if (stages !== state.internal.stages) createStages(stages, store); // Set locals
+      if (state.internal.stages.length === 0) createStages(stages, store); // Set locals
 
       onCreated = onCreatedCallback;
       configured = true;

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-b3be5a63.cjs.dev.js');
+var index = require('./index-65e750e4.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-b12f488b.cjs.prod.js');
+var index = require('./index-2e1b7052.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-e27d4a05.esm.js';
-export { F as FixedStage, t as ReactThreeFiber, S as Stage, f as Stages, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, g as context, c as createEvents, h as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, i as reconciler, r as render, d as unmountComponentAtNode, y as useFrame, A as useGraph, C as useLoader, w as useStore, x as useThree, z as useUpdate } from './index-e27d4a05.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-a9c7a6cd.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, f as Stages, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, g as context, c as createEvents, h as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, i as reconciler, r as render, d as unmountComponentAtNode, y as useFrame, A as useGraph, C as useLoader, w as useStore, x as useThree, z as useUpdate } from './index-a9c7a6cd.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-b3be5a63.cjs.dev.js');
+var index = require('../../dist/index-65e750e4.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -39,6 +39,8 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
+/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
+
 const EVENTS = {
   PRESS: 'onPress',
   PRESSIN: 'onPressIn',
@@ -144,7 +146,7 @@ function getAsset(input) {
       return expAsset.fromModule(input);
 
     default:
-      throw 'Invalid asset! Must be a URI or module.';
+      throw new Error('R3F: Invalid asset! Must be a URI or module.');
   }
 }
 
@@ -273,7 +275,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
-  const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
+  const [error, setError] = React__namespace.useState(undefined); // Suspend this component if block is a promise (2nd run)
 
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-b12f488b.cjs.prod.js');
+var index = require('../../dist/index-2e1b7052.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -39,6 +39,8 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
+/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
+
 const EVENTS = {
   PRESS: 'onPress',
   PRESSIN: 'onPressIn',
@@ -144,7 +146,7 @@ function getAsset(input) {
       return expAsset.fromModule(input);
 
     default:
-      throw 'Invalid asset! Must be a URI or module.';
+      throw new Error('R3F: Invalid asset! Must be a URI or module.');
   }
 }
 
@@ -273,7 +275,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
-  const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
+  const [error, setError] = React__namespace.useState(undefined); // Suspend this component if block is a promise (2nd run)
 
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-e27d4a05.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, g as context, h as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, i as reconciler, r as render, d as unmountComponentAtNode, y as useFrame, A as useGraph, C as useLoader, w as useStore, x as useThree, z as useUpdate } from '../../dist/index-e27d4a05.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-a9c7a6cd.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, g as context, h as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, i as reconciler, r as render, d as unmountComponentAtNode, y as useFrame, A as useGraph, C as useLoader, w as useStore, x as useThree, z as useUpdate } from '../../dist/index-a9c7a6cd.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -12,6 +12,8 @@ import 'react-reconciler';
 import 'scheduler';
 import 'suspend-react';
 
+/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
+
 const EVENTS = {
   PRESS: 'onPress',
   PRESSIN: 'onPressIn',
@@ -117,7 +119,7 @@ function getAsset(input) {
       return expAsset.fromModule(input);
 
     default:
-      throw 'Invalid asset! Must be a URI or module.';
+      throw new Error('R3F: Invalid asset! Must be a URI or module.');
   }
 }
 
@@ -246,7 +248,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   React.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
-  const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
+  const [error, setError] = React.useState(undefined); // Suspend this component if block is a promise (2nd run)
 
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.1",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",