[ts][phaser] Bug on build with webpack "You may need an appropriate loader to handle this file type."

[raimon-segura]

HI!

I cannot integrate phaser into the webpack build, it says "You may need an appropriate loader to handle this file type.". I've tried some babel preset like 2015 or 2020. If I include into the html as vanila JS it works well... any hint?

`in ./~/@esotericsoftware/spine-phaser/dist/SpineGameObject.js

Module parse failed: /home/rai/workspace/toolbox/toolboxw/node_modules/@esotericsoftware/spine-phaser/dist/SpineGameObject.js Unexpected token (56:13)
You may need an appropriate loader to handle this file type.
| /** A bounds provider that calculates the bounding box by taking the maximumg bounding box for a combination of skins and specific animation. */
| export class SkinsAndAnimationBoundsProvider {
| animation;
| skins;
| timeStep;
`

Thanks!

[badlogic]

Can you share your webpack and Babel configs? Our NPM package is just a plain old ES6 module. Webpack and Bable should not have any issue with that.

[badlogic]

Will re-open if you provide the information I asked for.

[sbyps]

when i use spine-player in vue-cli like import { SpinePlayer } from '@esotericsoftware/spine-player'; i also get this error
Module parse failed: Unexpected token (52:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

my babel config is below
{
presets: [
[
'@vue/cli-plugin-babel/preset',
{
useBuiltIns: 'entry',
},
],
],
plugins: [
['@babel/plugin-proposal-nullish-coalescing-operator', {}],
['@babel/plugin-proposal-private-methods', {}],
['@babel/plugin-proposal-optional-chaining', {}],
['@babel/plugin-syntax-bigint', {}],
[
'@babel/plugin-transform-runtime',
{
absoluteRuntime: false,
helpers: true,
regenerator: true,
useESModules: false,
corejs: {
version: 3,
proposals: true,
},
},
],
],
}
@badlogic

[raimon-segura]

Hi All!

"Will re-open if you provide the information I asked for." ...Sorry for the late reply :D

I'm sharing my webpack & babel configuration, also my package.json, I know that its a bit old but its works with any other library.

Also I'm sharing my current workaround, hope this helps to solve this issue and other people who had an struggle with that :D

What i'm doing right now is to donwload last dist build url from https://es.esotericsoftware.com/spine-phaser , p.e. https://unpkg.com/@esotericsoftware/spine-phaser@4.2.*/dist/iife/spine-phaser.js and then including on my base html file:
<script src='<%= htmlWebpackPlugin.options.myBaseUrlVariable %>static/vendor/spine-phaser/spine-phaser_4.2.56.js' defer ></script>

In my "canvas object" I have

• in preload function:
  this.game.plugins.installScenePlugin('SpinePlugin', window.spine.SpinePlugin, 'spine', this.scene.scene, true);
• in beforeDestroy function:
  this.game.plugins.removeScenePlugin('SpinePlugin');
• then I could create an spine object as esoteric docs says:
  scene.add.spine(x, y, .....

This is my webpack configuration build/webpack.base.conf.js
`
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var webpack = require('webpack')

var phaserModule = path.join(__dirname, '../node_modules/phaser/')
var phaser = path.join(phaserModule, 'dist/phaser.js')

function resolve (dir) {
return path.join(__dirname, '..', dir)
}

module.exports = {
entry: {
app: ['babel-polyfill', './src/main.js'],
vendor: [
'phaser'
]
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'phaser': phaser,
}
},
module: {
rules: [
{
test: /.txt$/,
use: 'raw-loader'
},
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')],
},
{
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{ test: /phaser-split.js$/, use: ['expose-loader?Phaser'] },
],

},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
],
}
`

This is my installed packages configuration package.json "partial"
`
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.5",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",

"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",

"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.25.1",
"webpack-merge": "^4.2.2"

`

Thanks!

[raimon-segura]

@badlogic @sbyps Let me know if you need more information ... many thanks!

[davidetan]

@badlogic @sbyps Let me know if you need more information ... many thanks!

I'm sorry, but the information you are providing is too confused and lacks of information. Moreover it seems that you are using webpack 2.6.1 that was released in 2017.

I tested the spine-phaser plugin in the webpack template provided by phaser - that you can get here - and everything is working fine.

Please, provide us with a minimal reproduction project of the problem and I'll be happy to help assist you. If you want you can send the project to contact@esotericsofware.com