Error: Vite(esbuild) unable to find matching export in PIXI.js

[petertellgren]

Description

Started a fresh project and installed react-pixi-fiber and tried the basic rotating bunny example.

Steps to reproduce

1. open this stackblitz
2. run yarn dev in the console

Additional info

• react-pixi-fiber version: 1.0.0-beta.15
• React version: 17.0.2
• ReactDOM version: 17.0.2
• PixiJS version: 6.2.2

Full error log

 > node_modules/react-pixi-fiber/es/react-pixi-fiber.development.js:1:59: error: No matching export in "node_modules/pixi.js/dist/esm/pixi.js" for import "extras"
    1 │ ...ObservablePoint, BLEND_MODES, extras, TilingSprite as TilingSprite...
      ╵                                  ~~~~~~

 > node_modules/react-pixi-fiber/es/react-pixi-fiber.development.js:1:135: error: No matching export in "node_modules/pixi.js/dist/esm/pixi.js" for import "particles"
    1 │ ... Text$1, Sprite as Sprite$1, particles, ParticleContainer as Parti...
      ╵                                 ~~~~~~~~~

 > node_modules/react-pixi-fiber/es/react-pixi-fiber.development.js:1:188: error: No matching export in "node_modules/pixi.js/dist/esm/pixi.js" for import "mesh"
    1 │ ...tainer as ParticleContainer$1, mesh, NineSlicePlane as NineSlicePl...
      ╵                                   ~~~~

error when starting dev server:
Error: Build failed with 3 errors:
node_modules/react-pixi-fiber/es/react-pixi-fiber.development.js:1:59: error: No matching export in "node_modules/pixi.js/dist/esm/pixi.js" for import "extras"
node_modules/react-pixi-fiber/es/react-pixi-fiber.development.js:1:135: error: No matching export in "node_modules/pixi.js/dist/esm/pixi.js" for import "particles"
node_modules/react-pixi-fiber/es/react-pixi-fiber.development.js:1:188: error: No matching export in "node_modules/pixi.js/dist/esm/pixi.js" for import "mesh"
    at failureErrorWithLog (/home/projects/vitejs-vite-ndejqr/node_modules/esbuild/lib/main.js:1493:15)
    at eval (/home/projects/vitejs-vite-ndejqr/node_modules/esbuild/lib/main.js:1151:28)
    at runOnEndCallbacks (/home/projects/vitejs-vite-ndejqr/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/home/projects/vitejs-vite-ndejqr/node_modules/esbuild/lib/main.js:1149:7)
    at eval (/home/projects/vitejs-vite-ndejqr/node_modules/esbuild/lib/main.js:1258:14)
    at eval (/home/projects/vitejs-vite-ndejqr/node_modules/esbuild/lib/main.js:629:9)
    at handleIncomingPacket (/home/projects/vitejs-vite-ndejqr/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/projects/vitejs-vite-ndejqr/node_modules/esbuild/lib/main.js:596:7)
    at Socket.EventEmitter.emit (https://vitejs-vite-ndejqr.w.staticblitz.com/blitz.5df97b5e61f923919ea927c406a4806b792de8c6.js:6:126633)
    at addChunk (https://vitejs-vite-ndejqr.w.staticblitz.com/blitz.5df97b5e61f923919ea927c406a4806b792de8c6.js:6:514030)

[michalochman]

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.

[petertellgren]

@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.

[michalochman]

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.

[petertellgren]

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?

[michalochman]

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.

[guillaumebrunerie]

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.

[kresli]

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

[michalochman]

I have just published react-pixi-fiber@1.0.0-beta.16.

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.

[guillaumebrunerie]

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)

[michalochman]

@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.

[guillaumebrunerie]

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 :)

[michalochman]

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).

[guillaumebrunerie]

@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.

[michalochman]

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.