npm run dev fails : ValidationError: Invalid options object

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 small project in which I have a folder "Client" that contains the frontend side of the project and another folder "Server" that contains the backend.

Just before pushing commits to Github, everything was fine, but once I did Github signals some vulnerabilities and after fixing them npm run dev doesn't work anymore.

tried multiples solutions but nothing worked, reinstalled suspicious modules, reinstalled node modules after running npm cache clean --force

This is the error I got

   npm run dev


> client@1.0.0 dev D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88
    throw new _ValidationError.default(errors, schema, configuration);
    ^

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
    at validate (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88:11)  
    at new CopyPlugin (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\dist\index.js:24:30)
    at Object.<anonymous> (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\build\webpack.dev.conf.js:61:5)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at WEBPACK_OPTIONS (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
    at requireConfig (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
    at D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
    at Object.<anonymous> (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
    at Module._compile (internal/modules/cjs/loader.js:1133:30) {
  errors: [
    {
      keyword: 'required',
      dataPath: '[0]',
      schemaPath: '#/required',
      params: [Object],
      message: "should have required property 'patterns'",
      schema: [Object],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
    }
  ],
  schema: {
    definitions: { ObjectPattern: [Object], StringPattern: [Object] },
    type: 'object',
    additionalProperties: false,
    properties: { patterns: [Object], options: [Object] },
    required: [ 'patterns' ]
  },
  headerName: 'Copy Plugin',
  baseDataPath: 'options',
  postFormatter: null
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\iheb\AppData\Roaming\npm-cache\_logs\2020-05-21T13_56_52_099Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.0.0 start: `npm run dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\iheb\AppData\Roaming\npm-cache\_logs\2020-05-21T13_56_52_148Z-debug.log

This is the log file :

0 info it worked if it ends with ok
1 verbose cli [1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',1 verbose cli   'run',1 verbose cli   'build:server'1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v12.16.3
4 verbose stack Error: missing script: build:server
4 verbose stack     at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:116:5
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:436:5
4 verbose stack     at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:391:45)
4 verbose stack     at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:434:3)
4 verbose stack     at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:161:5)
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:281:12
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:115:16
4 verbose stack     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
5 verbose cwd D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client
6 verbose Windows_NT 10.0.18362
7 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:server"
8 verbose node v12.16.3
9 verbose npm  v6.14.4
10 error missing script: build:server
11 verbose exit [ 1, true ]

Running npm audit gives the following :

> Moderate Cross-Site Scripting
>
> Package serialize-javascript
>
> Patched in >=2.1.1
>
> Dependency of uglifyjs-webpack-plugin [dev]
>
> Path uglifyjs-webpack-plugin > serialize-javascript
>
> More info https://npmjs.com/advisories/1426

Related dependencies

> "webpack": "^4.43.0", > > "webpack-bundle-analyzer": "^3.3.2", > > "webpack-cli": "^3.3.11", > > "webpack-dev-server": "^3.1.11",

I hope I provided everything for you guys, if not I will immediately provide anything to help clarify my problem, as I said I'm a newbie to web development.

UPDATE: I've trying to figure out the reason behind such error, the problem occurs after updating webpack-dev-server Version that works :

> "webpack-dev-server": "^2.9.1"

Version with errors :

> "webpack-dev-server": "^3.11.0"

Is it okay if I ignore vulnerabilities found? Because trying to fix them causes this error.

Thanks

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

After updating to 3.11 a new template appeared

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

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

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

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.

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

Reset angular toolkit version to 2.3.0 using the below command.

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