Developing a library for Phaser.io using WebPack - Error message: Class extending an undefined value is neither a constructor nor null

Question

Developing a library for Phaser.io using WebPack - Error message: Class extending an undefined value is neither a constructor nor null

I am currently working on developing a compact FOSS UI component library specifically for the Phaser.io game engine. The code repository can be found here. All the components are stored in the src/ directory and are exported through the index.js file. These components are bundled using webpack.config.js and then exported to build/phaser-ui.js.

The challenge I am facing involves utilizing the compiled file. Within the test/ folder, I have set up a Phaser Game for testing with the help of the phaser-plus Yeoman generator. The package phaser-ui is included in the test's package.json using a relative link, which seems to be functioning correctly.

The underlying issue revolves around my phaser-ui file not having access to the Phaser Library. In the test game, I am attempting to import a component from the phaser-ui package.json dependency, resulting in an error being thrown.

Code snippet inside the Game.js state:

import ProgressBar from "phaser-ui";

https://i.sstatic.net/5dPDb.png https://i.sstatic.net/6DCGo.png

For further discussion, check out this post on the HTML5 Game Dev Forums here. The source repository can also be accessed here.

javascript npm webpack phaser-framework

Answer 1

Answer №1

Within your code, starting from line 1:

/*
 * Star
 * ====
 *
 * Individual star particles in the background star emitters
 */

export default class Star extends Phaser.Particle {
// ...

It appears that you have forgotten to import the necessary library. The error states that Phaser is undefined, thus resulting in Phaser.Particle being undefined as well.

Could it be possible that you neglected to include

const Phaser = require('phaser');

before utilizing Phaser?

Alternatively, you can utilize modern syntax by doing

import {default as Phaser} from 'phaser';

if you prefer this method and have already configured your environment accordingly.

Answer 2

Within your code, starting from line 1:

/*
 * Star
 * ====
 *
 * Individual star particles in the background star emitters
 */

export default class Star extends Phaser.Particle {
// ...

It appears that you have forgotten to import the necessary library. The error states that Phaser is undefined, thus resulting in Phaser.Particle being undefined as well.

Could it be possible that you neglected to include

const Phaser = require('phaser');

before utilizing Phaser?

Alternatively, you can utilize modern syntax by doing

import {default as Phaser} from 'phaser';

if you prefer this method and have already configured your environment accordingly.

Answer 3

Answer №2

After some trial and error, I managed to get my project working perfectly. I made adjustments to my test script so that the package is properly reinstalled in the test directory each time:

In the package.json file for PHASER-UI:

"scripts": {
 "test": "npm run build && cd test && npm install phaser-ui && npm start",
 "build": "webpack"
},

The test package installs phaser-ui from a local NPM directory.

In the package.json file for TEST:

"dependencies": {
    "phaser-ce": "^2.7.0",
    "phaser-ui": "file:../"
  },

I also included the 'Phaser' variable as an external in my webpack configuration:

var webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'build/',
        filename: 'phaser-ui.js'
    },
    externals: {
        Phaser: 'Phaser'
    }
};

Although the build was successful and everything seemed to be functioning, I encountered an issue when trying to use it in my game state. Importing and logging it only displayed a generic object in the console:

import * as lib from 'phaser-ui';

export default class Game extends Phaser.State {

  create() {
    console.log(lib)
  }

}

Update

I discovered that I needed to make some changes to my webpack.config.js file. By default, webpack libraries are meant to be used via a global variable, but I wanted mine to be consumed as a node module. To achieve this, I changed the libraryTarget to umd:

Updated webpack.config.js:

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'build/',
        filename: 'phaser-ui.js',
        libraryTarget: 'umd', 
        library: 'phaserUi'
    },        
    externals: {
        Phaser: 'Phaser'
    }
};

Answer 4

After some trial and error, I managed to get my project working perfectly. I made adjustments to my test script so that the package is properly reinstalled in the test directory each time:

In the package.json file for PHASER-UI:

"scripts": {
 "test": "npm run build && cd test && npm install phaser-ui && npm start",
 "build": "webpack"
},

The test package installs phaser-ui from a local NPM directory.

In the package.json file for TEST:

"dependencies": {
    "phaser-ce": "^2.7.0",
    "phaser-ui": "file:../"
  },

I also included the 'Phaser' variable as an external in my webpack configuration:

var webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'build/',
        filename: 'phaser-ui.js'
    },
    externals: {
        Phaser: 'Phaser'
    }
};

Although the build was successful and everything seemed to be functioning, I encountered an issue when trying to use it in my game state. Importing and logging it only displayed a generic object in the console:

import * as lib from 'phaser-ui';

export default class Game extends Phaser.State {

  create() {
    console.log(lib)
  }

}

Update

I discovered that I needed to make some changes to my webpack.config.js file. By default, webpack libraries are meant to be used via a global variable, but I wanted mine to be consumed as a node module. To achieve this, I changed the libraryTarget to umd:

Updated webpack.config.js:

module.exports = {
    entry: './src/index.js',
    output: {
        path: 'build/',
        filename: 'phaser-ui.js',
        libraryTarget: 'umd', 
        library: 'phaserUi'
    },        
    externals: {
        Phaser: 'Phaser'
    }
};

Developing a library for Phaser.io using WebPack - Error message: Class extending an undefined value is neither a constructor nor null

Answer №1

Answer №2

Update

Similar questions

Troubleshooting: NextJS Typescript getInitialProps returning null value

tickPositions becomes undefined upon introducing a second Y-Axis

Learn how to create a fading effect for an element when the mouse is inactive, and have it fade back in when the mouse is active again using J

Please enter data into the input fields provided in the text

What steps can be taken to prevent the controller action if the password and confirm password do not match?

Validating ReactJS properties

Invoking PHP function through Ajax

Nuxt's axios is encountering difficulties in managing the server's response

Executing an automated process of adding items to the shopping cart using Python without the need to have a

Achieve maximum height with background images

How can you handle undefined values in the query object parameter when using Mongoose's Find function?

Error 431 is encountered when submitting an Axios post request

Creating a single header that can be used across multiple pages in HTML

Enhance Your Website with Dynamic Autocomplete Feature Using jQuery and Multiple Input Search Functionality

Can you please guide me on determining the type of the root element using jQuery?

Developing a new object in Angular from an API call

How Can You Update the State of a Parent Component from a Child Component?

Spacing Problem with Title Tooltips

What is the best way to extract the text from a class only when it is nested within a particular header tag?

How can I make rows appear dynamically when the user clicks a button?