npm run dev fails : ValidationError: Invalid options object

Question

Currently learning Vue js and express js through some tutorials, I am still newbie regarding these technologies.

Anyway following the tutorials I am building a smal

Answer 1

this works for me

at webpack.config.js file change the CopyWebpackPlugin

new CopyWebpackPlugin({
                patterns: [
                  { from: "fonts/**", globOptions: { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] } },
                  { from: "**/*.{jpg,png}", globOptions: { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] } },
                ]
              }),

hope I help

Answer 2

This is not an issue with webpack or webpack-dev-server itself, but with the copy-webpack-plugin plugin.

With the update to the 6.x major version came a breaking change: instead of just passing the array with the config patterns directly to the CopyWebpackPlugin constructor, your now have to wrap it in the patterns property of an object and pass that.

Old syntax:

    new CopyWebpackPlugin(
      [
        { from: 'src/xxx.ext', to: 'dist/xxx.ext' },
        { from: 'src/yyy.ext', to: 'dist/yyy.ext' }
      ]
    )

New syntax:

    new CopyWebpackPlugin(
      { 
        patterns: [
          { from: 'src/xxx.ext', to: 'dist/xxx.ext' },
          { from: 'src/yyy.ext', to: 'dist/yyy.ext' }
        ]
      }
    )

They did that because the constructor now supports an additional options property: https://webpack.js.org/plugins/copy-webpack-plugin/#options-1

Answer 3

Reset angular toolkit version to 2.3.0 using the below command.

npm i @ionic/angular-toolkit@2.3.0 -E -D

Answer 4

I had the same problem. Finally, I was able to solve it using

npm install --save copy-webpack-plugin@5.1.1

Answer 5

If you upgrade to copy-webpack-plugin: ^6.0.3 in your package.json then following should work, when you previously copied a whole directory:

plugins: [
    new CopyWebpackPlugin({
        patterns: [
            {
                from: "[your-src-dir]/*",
                to: "[your-dst-dir]/*",
            },
        ],
    }),
]

adding /* after directory target and source directory name fixed it without ignoring vulnerability, which you should never do.

Take a look at https://webpack.js.org/plugins/copy-webpack-plugin/ for more.

Answer 6

After updating to 3.11 a new template appeared

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