Bug: TypeError: Cannot read properties of undefined (reading 'S')

[teddybee]

Current Behavior

If I make an empty Vite TS app, copy the example MyComponent code to the project from beta branch's description I have got full white screen and an error in chrome console:

@pixi_react.js?v=f2c1ca38:11519 Uncaught TypeError: Cannot read properties of undefined (reading 'S')
    at module2.exports (@pixi_react.js?v=f2c1ca38:11519:61)
    at @pixi_react.js?v=f2c1ca38:13153:18
module2.exports @ @pixi_react.js?v=f2c1ca38:11519
(anonymous) @ @pixi_react.js?v=f2c1ca38:13153

The place where the error happens is here (last row):

var currentlyRenderingFiber = null, lastContextDependency = null, isDisallowedContextReadInDEV = false, AbortControllerLocal = "undefined" !== typeof AbortController ? AbortController : function() {
        var listeners = [], signal = this.signal = {
          aborted: false,
          addEventListener: function(type, listener) {
            listeners.push(listener);
          }
        };
        this.abort = function() {
          signal.aborted = true;
          listeners.forEach(function(listener) {
            return listener();
          });
        };
      }, scheduleCallback$1 = Scheduler.unstable_scheduleCallback, NormalPriority = Scheduler.unstable_NormalPriority, CacheContext = {
        $$typeof: REACT_CONTEXT_TYPE,
        Consumer: null,
        Provider: null,
        _currentValue: null,
        _currentValue2: null,
        _threadCount: 0,
        _currentRenderer: null,
        _currentRenderer2: null
      }, prevOnStartTransitionFinish = ReactSharedInternals.S;

Expected Behavior

Should be working without error.

Steps to Reproduce

Create a new Vite project with yarn and react-ts template.

Add react pixi dependencies
yarn add pixi.js@^8.2.6 @pixi/react@beta

Copy MyComponent code to a component form here and put it in the App component.

Run the app with yarn dev

Environment

• @pixi/react version: 8.0.0-beta.21
• pixi.js version: 8.2.6
• React version: 18.3.1
• ReactDOM version: 18.3.1
• Browser & Version: Chrome 132
• OS & Version: Windows 11 24H2
• ** NodeJS: ** : 22.13.1
• ** Yarn **: 1.22.22
• ** Vite **: 6.0.5
• Running Example: https://stackblitz.com/edit/vitejs-vite-hmrgs3q5

Possible Solution

No response

Additional Information

Unfortunately it is only happening on my PC, the stackblitz example is running well...
P.S: My friend tested it on MacOS, and got the same error.

[trezy]

Unfortunately, I haven't been able to reproduce this issue. I did notice the sandbox is using Pixi.js 8.2.6, but Pixi.js is up to v8.7.3 now. Could you try updating Pixi and see if that resolves your issue?

If not, I'm gonna need a repo with a minimal reproduction so I can pull it down and test locally.

[BBato]

We've encountered this issue in the current beta release. As a temporary workaround, reverting to version 8.0.0-beta.16 seems to resolve the problem. For reference, our test setup includes:

• pixi.js 8.7.3
• react 18.3.1

[teddybee]

@trezy I have tried, it is not working with the latest versions and React 18.x.
I will upload a basic project somewhere in the next days.
The latest version that worked for me eighter was the beta16 as @BBato said.

[lukaszkowalik2]

@teddybee I encountered the same issue. It seems to be related to using @pixi/react beta 21. Try downgrading to beta 16, and everything should work as expected. Everything worked fine with React 18 up to beta 16, but versions after beta 16 are not compatible with React 18. If you want to use the latest beta version, you'll need to upgrade React to version 19.