Error: Vite(esbuild) unable to find matching export in PIXI.js about react-pixi-fiber HOT 14 CLOSED

Sorry, but I have no experience with Vite.

You can try importing using:
import { Stage } from "react-pixi-fiber/index.js"
instead of:
import { Stage } from "react-pixi-fiber"

This should try to load CJS bundle instead of ES bundle.

from react-pixi-fiber.

Hi @petertellgren, there seems to be some issue with how ES bundle is created by rollup, not sure how to fix it.
Leaving this open until it is fixed.

Related discussion in #245.

from react-pixi-fiber.

@michalochman thanks for the fast reply.. I don't thing rollup has anything to do with this but rather think it's an esbuild thing. rollup is not involved when running Vite in dev mode as far as I know, but i might be wrong..

I've posted about the issue in the vite discord help channel, perhaps some kind knowledgeable soul can help me on the right track.

from react-pixi-fiber.

Rollup is involved in creating ES build for react-pixi-fiber and it outputs named imports that are non-existent in PixiJS v6. This causes the ES bundle file invalid.

The app you are building is consuming this invalid ES bundle which results in the error you have included in the report. If possible, please import either UMD or CJS bundle.

from react-pixi-fiber.

Ahh I see, sorry for being noob and not understanding all this, and thanks for laying it out for me.

Any suggestion how to go about using UMD or CJS with vite and react?
is CJS just adding it as <script> tag in my HTML file?

from react-pixi-fiber.

You can try importing using: import { Stage } from "react-pixi-fiber/index.js" instead of: import { Stage } from "react-pixi-fiber"

Just wanted to say that I have the same problem with webpack and that this workaround fixed it.

from react-pixi-fiber.

quick workaround to make it work with vite
#245 (comment)

from react-pixi-fiber.

I have just published [email protected].

The only change is that I have updated rollup dependencies. It looks like rollup now leaves import * as PIXI from 'pixi.js'; as is which should solve the issues.

@kresli @guillaumebrunerie @petertellgren does it fix es bundle for you without having to resort to the workaround mentioned? Please reopen if it does not not.

from react-pixi-fiber.

Unfortunately it did not make a difference for me, I still get the following warning (plus three other similar warnings) if I remove the /index.js at the end of the import path.

WARNING in ./node_modules/react-pixi-fiber/es/react-pixi-fiber.development.js 21088:23-47
export 'extras' (imported as 'PIXI') was not found in 'pixi.js' (possible exports: [...long list of exports here...])
 @ ./node_modules/react-pixi-fiber/index.es.js 4:2-66
 @ ./src/Tree.jsx 20:25-52
 @ ./src/Game.jsx 14:13-30
 @ ./src/App.jsx 34:13-30
 @ ./src/index.jsx 10:12-28

(I can’t reopen the issue, as I don’t have the button for it)

from react-pixi-fiber.

@guillaumebrunerie a warning should be fine, previously it was an error that prevented builds completely – is the warning preventing your app from building?

The extras is a code path for people using pixi.js v4. That version is quite old now and I will be removing support for it, so the warning should vanish after that. First I wanted to fix builds using ES modules.

from react-pixi-fiber.

Ah, I don’t think it actually ever prevented the build for me, sorry for the confusion, but the warning is displayed as a full screen overlay on top of my app, and even though I can close it, it reappears every time a file is changed, so it is pretty annoying :)

from react-pixi-fiber.

What kind of bundler are you using @guillaumebrunerie? Would you be able to also share your config? Not the application code, just how it’s build. I’ll try to find some time to see if the warning can be dismissed somehow (maybe in the way extras are used now).

from react-pixi-fiber.

@michalochman I'm using Webpack, the config (and the rest of the code) is available here: https://github.com/guillaumebrunerie/LD50/blob/main/webpack.common.js.
But the trick with adding /index.js at the end of the import paths works well for me for getting rid of the warning.

from react-pixi-fiber.

We're using webpack, but we don't push warnings to the error overlay.

Anyway, this will be completely resolved when we'll either drop support for PixiJS v4 or create separate bindings for different major PixiJS versions. Stay tuned.

from react-pixi-fiber.