Installing and running example from README causes error

[Ghostavio]

[vite] Internal server error: Cannot find module '/my/path/node_modules/react-reconciler/constants' imported from /my/path/node_modules/@pixi/react/lib/core/createRoot.mjs
Did you mean to import "react-reconciler/constants.js"?
      at finalizeResolution (node:internal/modules/esm/resolve:274:11)
      at moduleResolve (node:internal/modules/esm/resolve:859:10)
      at defaultResolve (node:internal/modules/esm/resolve:983:11)
      at nextResolve (node:internal/modules/esm/hooks:748:28)
      at o (file:///my/path/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69)
      at nextResolve (node:internal/modules/esm/hooks:748:28)
      at o (file:///my/path/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69)
      at nextResolve (node:internal/modules/esm/hooks:748:28)
      at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
      at handleMessage (node:internal/modules/esm/worker:199:24) (x3)

This is the code:

import { Application, extend } from "@pixi/react"
import { Container, Graphics } from "pixi.js"
import { useCallback } from "react"

extend({
  Container,
  Graphics,
})

const AlternatingVideo = () => {
  const drawCallback = useCallback((graphics) => {
    graphics.clear()
    graphics.setFillStyle({ color: "red" })
    graphics.rect(0, 0, 100, 100)
    graphics.fill()
  }, [])

  return (
    <Application>
      <pixiContainer x={100} y={100}>
        <pixiGraphics draw={drawCallback} />
      </pixiContainer>
    </Application>
  )
}

export default AlternatingVideo

Running latest versions of pixi.js (8.10.1) and @pixi/react (8.0.2)

[thejustinwalsh]

Hey @Ghostavio that error looks related to your setup and environment that you are running in. Can you please share more details or provide the repo that is using @pixi/react. I am using @pixi/react 8.0.2 in vite without issue personally, and can not reproduce this issue.

[thejustinwalsh]

Here is what my package.json looks like...

{
  "name": "pixi-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "pnpm vite",
    "dev": "pnpm vite --clearScreen=false",
    "build": "pnpm lint && tsc -b && vite build",
    "lint": "eslint .",
  },
  "dependencies": {
    "@pixi/react": "^8.0.2",
    "pixi.js": "^8.2.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "~19.0.10",
    "@types/react-dom": "~19.0.0",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript": "~5.7.3",
    "typescript-eslint": "^8.25.0",
    "vite": "^6.2.0"
  }
}

[zillarelli]

I'm getting the same issue. The issue seems to be present on @pixi/react version 8.0.2 specifically. Running v8.0.1 works without issue, even when using the latest pixi.js v8.10.1

[thejustinwalsh]

Please send a repo over that has the issue so I can pull and debug it. I believe there is a conflict with the configuration of the project.

[datacurse]

same issue here

[thejustinwalsh]

I can not repro with the following steps:

Install vite, pixi.js, and @pixi/react dependencies

npm create vite@latest pixi-react-app -- --template react-ts
npm install pixi.js@^8.2.6 @pixi/react

Copy example from README into App.tsx

import {
  Application,
  extend,
} from '@pixi/react'
import {
  Container,
  Graphics,
} from 'pixi.js'
import { useCallback } from 'react'

extend({
  Container,
  Graphics,
})

const App = () => {
  const drawCallback = useCallback((graphics: Graphics) => {
    graphics.clear()
    graphics.setFillStyle({ color: 'red' })
    graphics.rect(0, 0, 100, 100)
    graphics.fill()
  }, [])

  return (
    <Application>
      <pixiContainer x={100} y={100}>
        <pixiGraphics draw={drawCallback} />
      </pixiContainer>
    </Application>
  )
}

export default App;

Run

npm run dev

Request For Info

@Ghostavio @zillarelli @datacurse what is your setup?

• Add your package.json to this issue, or an example repo.
• Are you using vite, nextjs, something else?
• Are you using npm, yarn, pnpm, bun, deno?
• What version of node/bun/deno are you on?

[trezy]

This issue should be resolved in v8.0.3. If not, please ping me and I'll reopen.

[wahaj-47]

Issue still exists in v8.0.3
Except it's complaining about the store.mjs file

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'path\node_modules\react-reconciler\constants' imported from path\node_modules\@pixi\react\lib\store.mjs
Did you mean to import "react-reconciler/constants.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
    at moduleResolve (node:internal/modules/esm/resolve:860:10)
    at defaultResolve (node:internal/modules/esm/resolve:984:11)
    at nextResolve (node:internal/modules/esm/hooks:748:28)
    at o (file:///path/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69)
    at nextResolve (node:internal/modules/esm/hooks:748:28)
    at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
    at handleMessage (node:internal/modules/esm/worker:199:24)
    at Immediate.checkForMessages [as _onImmediate] (node:internal/modules/esm/worker:141:28)
    at process.processImmediate (node:internal/timers:485:21)

Adding the .js extension in store.mjs makes it complain about resolveUpdatePriority.mjs

Did you mean to import "react-reconciler/constants.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
    at moduleResolve (node:internal/modules/esm/resolve:860:10)
    at defaultResolve (node:internal/modules/esm/resolve:984:11)
    at nextResolve (node:internal/modules/esm/hooks:748:28)
    at o (file:///path/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69)
    at nextResolve (node:internal/modules/esm/hooks:748:28)
    at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
    at handleMessage (node:internal/modules/esm/worker:199:24)
    at Immediate.checkForMessages [as _onImmediate] (node:internal/modules/esm/worker:141:28)
    at process.processImmediate (node:internal/timers:485:21)

I am using the react-router node-custom-server template

[wahaj-47]

This is happening due to externalizing the dependencies for packaged lib: 4af2800

Since the dependencies are not being bundled, keeping the .js extension should resolve the issue.

[connect-kai]

+1

[R-Bower]

Looks like this is fixed in v8.1.0 alpha

[MichalSurmacki]

@R-Bower exactly - i run on to this issue last friday and resolve it by downgrading the version to 8.1.0-alpha.1