Can't import in webpack

[demipel8]

I'm bundling my project with webpack and had to add:

module.exports = Fabrique;

at the end of the build/phaser-input.js in order to be able to import it into the project as a module. Is there a way you can add any type of export (amd, commonjs, ES6, ...) to the project?

[AleBles]

Sure I can

[AleBles]

For future reference, the commit for this was undone in later versions in favor of: https://webpack.github.io/docs/shimming-modules.html

As seen in #9 it broke more than it fixed

[dsarfati]

Are there any examples on how this should be done now?

[AleBles]

Not yet, since I don't use webpack myself. But I'd happily accept a PR on the Readme of somebody makes/does this

[mdere]

Bump.......please someone update the ReadMe haha - I'm not too good with webpack and I've been struggling to get this awesome library to work with it...

[AleBles]

@mdere you should use the export-loader, and have something like the following in your module config:

    module: {
        loaders: [
            //Expose phaser modules
            {test: /pixi\.js/, loader: 'expose?PIXI'},
            {test: /phaser\-split\.js$/, loader: 'expose?Phaser'},
            {test: /p2\.js/, loader: 'expose?p2'},
            //Expose orange modules
            {test: /phaser\-input\.js$/, loader: 'exports-loader?PhaserInput=true'},
        ]
    },
    resolve: {
        alias: {
            'phaser': phaser,
            'pixi': pixi,
            'p2': p2,
            'phaser-input': input,
        },
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    }

then you can use require('input'); in your code

[alex-mnsk]

@AleBles I did like it's written above, but it still doesn't work

[Olson3R]

@alex-mnsk I have it working with webpack 2 using:

resolve: {
  extensions: ['.ts', '.js'],
  alias: {
    pixi: path.join(__dirname, 'node_modules/phaser-ce/build/custom/pixi.js'),
    phaser: path.join(__dirname, 'node_modules/phaser-ce/build/custom/phaser-split.js'),
    p2: path.join(__dirname, 'node_modules/phaser-ce/build/custom/p2.js'),
    'phaser-input': path.join(__dirname, 'node_modules/@orange-games/phaser-input/build/phaser-input.js')
  }
},
...
module: {
  noParse: [
    /phaser-ce/
  ],
  rules: [
    { test: /phaser\-input\.js$/, use: 'exports-loader?PhaserInput=PhaserInput' },
    { test: /\.ts$/, enforce: 'pre', loader: 'tslint-loader' },
    { test: /\.ts$/, loader: 'ts-loader' }
  ]
}

Note the alias for 'phaser-input' and the rule for test: /phaser\-input\.js$/. Note: As @cxong mentions below, you will need to npm install exports-loader --save-dev as well.

Then I can use it in my project with something like:

const PhaserInput = require('phaser-input').PhaserInput;

[cxong]

Note that you also need to npm install exports-loader --save-dev

[JimLynchCodes]

Hi, I'm using webpack 3.10.0, and I added the phaser-input things to webpack.config.js but I am still getting the error:

InputBox.ts:36 Uncaught ReferenceError: Phaser is not defined
    at PhaserInput (InputBox.ts:36)
    at InputBox.ts:16

[AleBles]

Looks like you aren't including the phaser reference before the one from this library? Other than that this seems more of an typescript thingy than webpack

[MarkSky]

I got some errors: in webpack.config.js:

module: {
  rules: [
  {
                test: /phaser\-input\.js$/,
                use: 'exports-loader?PhaserInput=PhaserInput',
            },
  ]
},
 resolve: {
        alias: {
            // bind version of phaser-input
            'phaser-input': '@orange-games/phaser-input/build/phaser-input.js',
            // bind to modules;
            modules: Path.join(__dirname, 'node_modules'),
        },
    },

error message:

Unnecessary escape character: -. (no-useless-escape)

and in my js file: import 'phaser-input'; error messgae:

'phaser-input' should be listed in the project's dependencies. Run 'npm i -S phaser-input' to add it (import/no-extraneous-dependencies)

How could I solve those errors? Thanks.