Getting error when trying to execute the command npm run build

Question

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\/*/]
})

]

I am not that adept with code, tbh, i hardly understand what half of library and other types of common codebases mean. Can anyone help me fix my code?

the updated answer throws up 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

> [email protected] 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? }

sorry, couldnt get the code formatting right despite repeated attempts — user1447156
– user1447156, Commented Sep 11, 2024 at 15:15
Just wanted to ask, is your question solved? If so please accept the answer or post your own solution, so that we all can learn from this issue, and also so that we know it is resolved. Thanks in advance. — winner_joiner
– winner_joiner, Commented Sep 14, 2024 at 12:17
issue is still unresolved, i will restart the project in a few days from scratch! — user1447156
– user1447156, Commented Sep 15, 2024 at 13:27

Arnau · Accepted Answer · 2024-09-11 13:35:39Z

1

Updated answer after Original question update:

CopyWebpackPlugin needs to receive an object which includes at least patterns, which is an array of objects. So in your case should be:

plugins: [
...
new CopyWebpackPlugin({
   patterns:[
     { from: 'src/assets', to: 'assets' },
     { from: 'src/pwa', to: '' },
     { from: 'src/favicon.ico', to: '' }
   ]
}),
...
]

Original Answer:

Well, the issue is with webpack. As you don't share your webpack code it's hard to tell, but according to the error message there is a bad format on your CopyPlugin setup. It should look something like this:

plugins: [
    new CopyPlugin({
      patterns: [
        { from: "source", to: "dest" },
        { from: "other", to: "public" },
      ],
    }),
  ],

Do you pass the patterns array correctly?

edited Sep 11, 2024 at 13:35

answered Sep 11, 2024 at 8:28

Arnau

4552 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rory McCrossan Over a year ago

The attempt to solve the issue is admirable, but if you need more information to provide an accurate, canonical solution, then this should really be a comment.

user1447156 Over a year ago

my present CopyPlugin 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\/*/] }) ] ` I am fairly new to all this, can you tell me the specific changes i need to make to get my code working?

winner_joiner Over a year ago

@user1447156 you shouldn't post code in comments, just update your question, with this details. And Second of all @Arnau is correct you ar passing an array to CopyWebpackPlugin you should be passing a object { patterns: [ ... ]}, an in the patterns property you would need to add your from/to object-list.

Collectives™ on Stack Overflow

Getting error when trying to execute the command npm run build

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related