Failed "tns preview" ValidationError: Invalid options object

Question

When i run "ng serve" or "npm start" the webapplication of this shared module nativescript-angular runs great. When i use "tns preview" and scan the qr code with my mobile app everyting goes from:

# Use NativeScript Playground app and scan the QR code above to preview the application on your device.

To scan the QR code and deploy your app on a device, you need to have the NativeScript Playground app:
    App Store (iOS): https://itunes.apple.com/us/app/nativescript-playground/id1263543946?mt=8&ls=1
    Google Play (Android): https://play.google.com/store/apps/details?id=org.nativescript.play

Preparing project...

To:

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)
 - options[1] 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)
 - options[2] 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)
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
    at validate (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\schema-utils\dist\validate.js:96:11)
    at new CopyPlugin (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\copy-webpack-plugin\dist\index.js:24:30)
    at module.exports (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\webpack.config.js:304:13)
    at handleFunction (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\bin\prepareOptions.js:23:13)
    at prepareOptions (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\bin\prepareOptions.js:9:5)
    at requireConfig (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\bin\convert-argv.js:136:14)
    at C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\bin\convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\bin\convert-argv.js:140:15)
    at C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\bin\cli.js:241:39
    at Object.parse (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\bin\cli.js:219:8
    at Object.<anonymous> (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack-cli\bin\cli.js:538:3)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\Users\Admin\source\Repos\Vacerra\VacerraR-D\V-WebApp\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

i've tried "npm installe", "ng update" and the nativescript updates + schematics to get the correct versions..
i've uninstalled the playground and preview apps en reinstalled them..
i've tried the steps in the answer on this problem:

Nativescript Angular code sharing project problem with Webpack

i've searched google and stackoverflow

So far no luck at all.. Is there anyone out there who had this problem and did find a solution

Thanks in advance for answering!

Kind regards,

R

Igor R. Igor R. · Accepted Answer · 2020-06-23T08:42:50

Looks like CopyWebpackPlugin has been updated, but your webpack.config.js still uses the old configuration syntax.

The updated syntax should look something along the lines of

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

Make sure you have the fonts folder (even if empty with a .gitignore) as the new version of the copy plugin will throw an error if it can't find it.

Failed "tns preview" ValidationError: Invalid options object

2 Answers