Question: how to properly import pixi-particles 4.0.1 with webpack

[phpositive]

Hi, I'm importing lib not from package.json, but in my script file like this:

import 'scripts/pixi-particles';

const myEmitter = new PIXI.particles.Emitter(...)

throws console error : PIXI.particles.Emitter is not a constructor

If I import it as :

import * as Particles from 'scripts/pixi-particles';

I have to access it :

const myEmitter = new Particles.PIXI.particles.Emitter(...)

Doesn't feel right. How should I be importing it correctly ? Thank you

[andrewstart]

There are currently 3 exports defined in package.json:

"main": "lib/pixi-particles.js",
"module": "lib/pixi-particles.es.js",
"bundle": "dist/pixi-particles.js",

where main is Node/CommonJS exports, module is proper ES6 exports, and bundle createsPIXI.particles as a global namespace. Your situtation sounds like you are somehow getting the bundle imported but inside its own module or something. Perhaps you need to tweak resolve.packageMains or resolve.mainFields in your config, or you have some odd configuration that was needed for an earlier version of the library?

[phpositive]

Solved. Thanks for pointing out on lib folder and es module, I was using dist

[KoolieTheKangaroo]

How was it solved? import ? as ? from ?

[andrewstart]

In general, using normal ES6 imports are the correct way to do things - import * as particles from 'pixi-particles' or import { Emitter } from 'pixi-particles'. The issue here was a custom configuration that wasn't aware of the correct file(s).

[KoolieTheKangaroo]

@andrewstart Thank you, normally I use the import {Emitter} from 'pixi-particles' approach. Which is working in some of my former pixi 4.x.x projects. In my recent proiect I am using pixi 5 and I am getting "Uncaught pixi-particles requires pixi.js to be loaded first" - no matter what import method I use. I have always found it a little confusing that I imported Emitter but never really used it as such - typical usage: const emitter = new PIXI.particles.Emitter(this._particlesContainer, this.pad.iconTexture, particleData); so importing Emitter somehow triggered pixi particles to put itself on the PIXI Object

Should I create a new issue btw?

[andrewstart]

That error has not been present since version 3.2.0. You need to upgrade to version 4 or higher, which actually supports Pixi 5 without deprecation warnings, as well as removes the use of the PIXI.particles namespace unless you are specifically pulling in the browser-oriented namespaced (not CommonJS/ES6 modules) version.

[KoolieTheKangaroo]

Sorry, didn't realise that my version was that old. I installed using npm install pixi-particles, but the old version must have already been in the project. Using 4.0.1 and pixi 5.3.2 I get "ReferenceError: PIXI is not defined"

[andrewstart]

It wasn't that old, in that 3.2.0 was the last version before 4.0.0, but newer is significantly better in this case. That error would happen if your build process was pulling in the "bundle" version of the library (see my first post in this issue) that is intended for <script> usage. You'll need to fix whatever it is in your build settings that is pulling in that instead of the preferred "module" version.

[KoolieTheKangaroo]

This is how I build it (dev): `const path = require('path');

module.exports = { mode: 'development',

watch: true,
devServer: {
    contentBase: path.join(__dirname, "./dist/"),
    port: 9000
},
entry: ["./src/app.js"],
module: {
    rules: [
        {
        test: /\.js$/,
        exclude: [/(node_modules)/, 
                    path.resolve(__dirname, 'browser.js'), 
                    path.resolve(__dirname, 'bootstrap.js')],
        use: {
            loader: "babel-loader"
        }
        }
    ]
},
devtool: 'eval-source-map',
output: {
    filename:   "bundle.js",
    path: path.resolve(__dirname + "/dist") 
}

};`

I use gulp as a task runner with weppack-stream:

const webpackStream = require('webpack-stream');
const webpackConfig = require('./webpack.prod');
const webpackDevConfig = require('./webpack.dev');

(...)

gulp.task('build:dev', ()=>{
    return gulp.src('./src/app.js')
        .pipe(webpackStream(webpackDevConfig))
      //  .pipe(injectVersion({package_file: './config.json'})) 
        .pipe(gulp.dest('./dist/'));
});

Besides the use of Gulp - I believe it is fairly standard webpack stuff, so I guess I should add something to webpack setup force it to use the lib/pixi-particles.es.js or I should use require in the code instead of import?

Update: outcommented the injectVersion of my Gulp build dev script, and now it works!