Search code examples
angularnativescriptnativescript-angular

Failed "tns preview" ValidationError: Invalid options object

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

Solution

  • 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.