Import error when using React along with Typescript

[f32by]

Hello,

I installed pixi.js and pixi-layers by

yarn add pixi.js pixi-layers

and then I tried following code:

import 'pixi-layers'
import * as PIXI from 'pixi.js'

const test = new PIXI.display.Group(100, false)

but it throws an error:

./src/index.tsx
Attempted import error: 'display' is not exported from 'pixi.js' (imported as 'PIXI').

[stefan-reloyalty]

Have you tried changing the order of imports? Like:

import * as PIXI from 'pixi.js' import 'pixi-layers'

const test = new PIXI.display.Group(100, false)

[f32by]

still the same error :(

[Mathieu-C]

@hellotanuky Have you found a way around this issue? I'm facing the same problem, thinking of compiling all Pixi-related code independently from React and bundling everything together with webpack but curious to hear from you.

[noih]

try to use window.PIXI.display instead of PIXI.display

import * as PIXI from 'pixi.js';

window.PIXI = PIXI;
require('pixi-layers');

const test = new window.PIXI.display.Group(100, false);

or create custom file wrap it, for example (js) libs/PIXI.js

import * as PIXI from 'pixi.js';

/* eslint import/first: off */
window.PIXI = PIXI;
require('pixi-layers');

export default PIXI;

then

import PIXI from 'libs/PIXI';