How to import Dragonbones inside Pixi.js (error PIXI is not defined)

[Fle9ma]

Hello everyone ☺️,

I am new here but I have been using Pixi.js for several years.

I am currently working on a new project and have to use Dragonbones. Because I am writing a new project with modules and import / export classes.

I installed via npm Dragonbones and I tried to add a dragonbones animation object to the scene, but unfortunately the dragonbones gives me an error.

Here is the class where I'm trying to add Dragonbones object.

import { Container } from "pixi.js";
import BackgroundSprite from "./backgroundSprite";
import CloudSprite from "./cloudSprite";

// Dragonbones import
import dragonBones from 'dragonbones.js';

export default class BackgroundContainer extends Container {
    constructor(model, loader) {
        super();

        this._model = model;
        this._loader = loader;

        this._background = new BackgroundSprite(this._loader.getTexture("background"), this._model.stageWidth, this._model.stageHeight);
        this.addChild(this._background);
        this.pivot.x = this._model.stageWidth / 2;
        this.pivot.y = this._model.stageHeight / 2;
        this.position.set(this._model.stageWidth / 2, this._model.stageHeight / 2);

        this._cloud = new CloudSprite(this._loader.getTexture("cloud"));
        this._cloud.scale.set(0.7);
        this.addChild(this._cloud);

        // Dragonbones part START
        const factory = dragonBones.PixiFactory.factory;
        factory.parseDragonBonesData(this._loader.getResources("skeleton"));
        factory.parseTextureAtlasData(this._loader.getResources("texture_json"), this._loader.getResources("texture_png"));

        const anime = factory.buildArmatureDisplay("Armature");
        anime.animation.play("animtion0");
        this.addChild(anime);
        // Dragonbones part END
    }

    scaleToWindow(width, height, aspectRatio) {
        this.position.set(width / 2, height / 2);
        this.scale.set(aspectRatio);
    }
}

And here is the error I'm getting:

Uncaught ReferenceError: PIXI is not defined
    at eval (dragonBones.js:15460)
    at eval (dragonBones.js:15462)

Do you have any idea what I'm doing wrong, and how to fix the situation that Dragonbones doesn't report the error that PIXI is not defined.

Thanks a lot in advance for your time and help. ☺️

[ivan.popelyshev]

the usual for webpack users.

Quote

import * as PIXI from 'pixi.js';
window.PIXI = PIXI;
require('dragonbones.js'); 

i dont know how to get dragonbones object fter require , maybe "var something = require('dragonbones.js');" 
The point is, PIXI has to be global, before dragonbones lib is loaded. this is because whoever supports it didnt move it to pixi-v6 nor es6 modules. Do you want to do it?

[Fle9ma]

Thanks for the quick response and advice. Unfortunately, I have already tried the recommendation you wrote, but without success. I ran out of ideas so I tried to look for advice here maybe someone will remember something that didn’t occur to me.

I will try a few more ideas if it fails I will consider the option to implement Dragonbones in es6.

Thanks again!

[Fle9ma]

Finally, after so much research and ideas, I came up with a solution that works very simply.

If you have problems with ES6 and Dragonbones (PIXI is not defined), just add to your webpack.common.js file:

const webpack = require('webpack');

...

plugins: [
	new webpack.ProvidePlugin({
		PIXI: 'pixi.js'
	})
],

This is the right way to set a particular variable as globally available through the webpack.

I'm glad that now some can also find solution to this issue. ☺️