npm run dev fails : ValidationError: Invalid options object

Solution 1:

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

Solution 2:

After updating to 3.11 a new template appeared

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

Solution 3:

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

npm install --save [email protected]

Solution 4:

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.

Solution 5:

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