I am following a course to create a TS/JS-based game through webpack and Phaser. My GameScene Code is:
import { Map } from "../components/map";
import TilesGroup from "../components/tiles/tilesGroup";
import Player from "../components/player/player";
export default class MainScene extends Phaser.Scene{
player: Player
tileGroup: TilesGroup
cursors: Phaser.Input.Keyboard.CursorKeys
level: number
constructor(){
super({
key: "MainScene"
})
}
init(props: {level? : number}){
const {level = 0} = props
this.level= Map.calcCurrentLevel(level)
}
create(){
const map= new Map(this.level)
this.cameras.main.setBackgroundColor('#ade6ff')
this.cameras.main.fadeIn()
this.cameras.main.setBounds(map.size.x, map.size.y, map.size.width, map.size.height)
this.physics.world.setBounds(map.size.x, map.size.y, map.size.width, map.size.height)
this.input.addPointer(1)
this.cursors = this.input.keyboard.createCursorKeys()
this.tileGroup= new TilesGroup(this,map.info.filter((el: TilesConfig) => el.type==="tile"))
this.player= new Player(this,map.info.filter((el: TilesConfig) => el.type==="player")[0], map.size, this.level)
this.cameras.main.startFollow(this.player)
this.physics.add.collider (this.tileGroup, this.player)
}
update(time: number, delta: number): void{
this.player.update(this.cursors)
}
}I get the following webpack error when i try to run the command npm run build:
[webpack-cli] Failed to load 'C:\Users\vivek\Learning\demo\platformer+game\platformer game\webpack\webpack.dev.js' config
[webpack-cli] Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
- options[0] has an unknown property 'to'. These properties are valid:
object { patterns, options? }
- options[1] has an unknown property 'to'. These properties are valid:
object { patterns, options? }
- options[2] has an unknown property 'to'. These properties are valid:
object { patterns, options? }I was expecting the webpack to be ready and run my game through the command npm start
The relevant portion of my webpack plugin code is as follows:
plugins: [
new HtmlWebpackPlugin({ template: 'src/index.html' }),
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'assets' },
{ from: 'src/pwa', to: '' },
{ from: 'src/favicon.ico', to: '' }
]),
new InjectManifest({
swSrc: path.resolve(__dirname, '../src/pwa/sw.js'),
exclude: [/\/spine\/raw\/*/]
})
]When i try to resolve the issue with this probable solution:
plugins: [
...
new CopyWebpackPlugin({
patterns:[
{ from: 'src/assets', to: 'assets' },
{ from: 'src/pwa', to: '' },
{ from: 'src/favicon.ico', to: '' }
]
}),
]
...I am then getting the following errors when i try to execute the command npm run build in terminal:
PS C:\Users\vivek\Learning\demo\platformer+game\platformer game> npm run build
phaser3-typescript-platformer-example@3.16.2 build webpack --config webpack/webpack.prod.js
[webpack-cli] Failed to load 'C:\Users\vivek\Learning\demo\platformer+game\platformer game\webpack\webpack.prod.js config [webpack-cli] Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
options[0] has an unknown property 'to'. These properties are valid: object { patterns, options? }
options[1] has an unknown property 'to'. These properties are valid: object { patterns, options? }
options[2] has an unknown property 'to'. These properties are valid: object { patterns, options? }I tried this code to fix things but it returns the following error
PS C:\Users\vivek\Learning\demo\platformer+game\platformer game> npm run build
> phaser3-typescript-platformer-example@3.16.2 build
> webpack --config webpack/webpack.prod.js
clean-webpack-plugin: C:\Users\vivek\Learning\demo\platformer+game\platformer game\dist\*.js has been removed.
ts-loader: Using typescript@3.3.1. This version is incompatible with ts-loader. Please upgrade to the latest version of TypeScript.
assets by status 865 KiB [cached] 41 assets
./src/game.ts 39 bytes [built] [code generated] [1 error]
ERROR in ./src/game.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'traceResolution')
at isTraceEnabled (C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\typescript\lib\typescript.js:25801:34)
at Object.resolveTypeReferenceDirective (C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\typescript\lib\typescript.js:25975:28)
at C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\ts-loader\dist\servicesHost.js:739:29
at C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\ts-loader\dist\servicesHost.js:129:46
at Array.map (<anonymous>)
at Object.resolveTypeReferenceDirectives (C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\ts-loader\dist\servicesHost.js:129:29)
at Object.compilerHost.resolveTypeReferenceDirectives (C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\typescript\lib\typescript.js:118630:33)
at resolveTypeReferenceDirectiveNamesWorker (C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\typescript\lib\typescript.js:86765:137)
at Object.createProgram (C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\typescript\lib\typescript.js:86823:35)
at synchronizeHostData (C:\Users\vivek\Learning\demo\platformer+game\platformer game\node_modules\typescript\lib\typescript.js:118641:26)
ERROR in Can't find self.__WB_MANIFEST in your SW source.
webpack 5.94.0 compiled with 2 errors in 1703 msCan anyone help?
