npm run dev 失败:ValidationError:无效的选项对象 [英] npm run dev fails : ValidationError: Invalid options object

问题描述

目前正在通过一些教程学习Vue js和express js，我对这些技术还是新手.

无论如何按照教程，我正在构建一个小项目，其中我有一个文件夹Client"，其中包含项目的前端和另一个包含后端的文件夹Server".

就在向 Github 推送提交之前，一切都很好，但是一旦我做了 Github 就发出了一些漏洞，在修复它们之后 npm run dev 不再工作了.

尝试了多种解决方案但没有任何效果，重新安装可疑模块，在运行npm cache clean --force后重新安装节点模块

这是我得到的错误

 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.jsD:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88throw new _ValidationError.default(errors, schema, configuration);^ValidationError: 无效的选项对象.复制插件已使用与 API 架构不匹配的选项对象进行初始化.- options[0] 缺少属性patterns".应该:[非空字符串 |对象 { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing?}, ...](不应少于 1 个项目)在验证 (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88:11)在新的 CopyPlugin (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\dist\index.js:24:30)在对象<匿名>(D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\build\webpack.dev.conf.js:61:5)在 Module._compile (internal/modules/cjs/loader.js:1133:30)在 Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)在 Module.load (internal/modules/cjs/loader.js:977:32)在 Function.Module._load (internal/modules/cjs/loader.js:877:14)在 Module.require (internal/modules/cjs/loader.js:1019:19)在要求 (internal/modules/cjs/helpers.js:77:18)在 WEBPACK_OPTIONS (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)在 requireConfig (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)在 D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17在 Array.forEach (<匿名>)在 module.exports (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)在对象<匿名>(D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)在 Module._compile (internal/modules/cjs/loader.js:1133:30) {错误:[{关键字:'必需'，数据路径:'[0]'，schemaPath: '#/required',参数:[对象]，消息:应该有必需的属性‘模式’"，架构:[对象]，父架构:[对象]，数据:[对象]，孩子们:[数组]}],架构:{定义:{ ObjectPattern: [Object], StringPattern: [Object] },类型:'对象'，附加属性:假，属性:{ 模式:[对象]，选项:[对象]}，要求:['模式']},headerName: '复制插件',baseDataPath: '选项',postFormatter:空}npm 错误！代码生命周期npm 错误！错误号 1npm 错误！client@1.0.0 dev:`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`npm 错误！退出状态 1npm 错误！npm 错误！在 client@1.0.0 开发脚本上失败.npm 错误！这可能不是 npm 的问题.上面可能有额外的日志输出.npm 错误！可以在以下位置找到此运行的完整日志:npm 错误！C:\Users\iheb\AppData\Roaming\npm-cache\_logs\2020-05-21T13_56_52_099Z-debug.lognpm 错误！代码生命周期npm 错误！错误号 1npm 错误！client@1.0.0 开始:`npm run dev`npm 错误！退出状态 1npm 错误！npm 错误！client@1.0.0 启动脚本失败.npm 错误！这可能不是 npm 的问题.上面可能有额外的日志输出.npm 错误！可以在以下位置找到此运行的完整日志:npm 错误！C:\Users\iheb\AppData\Roaming\npm-cache\_logs\2020-05-21T13_56_52_148Z-debug.log

这是日志文件:

0 info 如果它以 ok 结尾，它就起作用了1个详细的cli [1 详细的 cli 'C:\\Program Files\\nodejs\\node.exe',1 详细的 cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',1个详细的cli运行"，1 个详细的 cli 'build:server'1个详细的cli]2 信息使用 npm@6.14.43 信息使用 node@v12.16.34 详细堆栈错误:缺少脚本:构建:服务器4 运行时的详细堆栈 (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)4 详细堆栈位于 C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:54 详细堆栈在 C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:116:54 详细堆栈在 C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:436:54 在 checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:391:45) 的详细堆栈4 最终详细堆栈 (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:434:3)4 详细堆栈 (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:161:5)4 详细堆栈在 C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:281:124 详细堆栈在 C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:115:164 FSReqCallback.readFileAfterClose [as oncomplete] 的详细堆栈 (internal/fs/read_file_context.js:63:3)5 详细 cwd D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client6 详细 Windows_NT 10.0.183627 详细 argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "构建:服务器"8 详细节点 v12.16.39 冗长的 npm v6.14.410 错误缺少脚本:build:server11 详细退出 [ 1, true ]

运行 npm audit 得到以下结果:

<块引用>

 中等跨站脚本包 serialize-javascript已修补 >=2.1.1uglifyjs-webpack-plugin 的依赖 [dev]路径 uglifyjs-webpack-plugin >序列化-javascript更多信息 https://npmjs.com/advisories/1426

相关依赖

<块引用>

"webpack": "^4.43.0",

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

我希望我为你们提供了一切，如果没有，我会立即提供任何东西来帮助澄清我的问题，因为我说过我是网络开发的新手.

更新:我试图找出此类错误背后的原因，更新后出现问题webpack-dev-server有效的版本:

<块引用>

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

有错误的版本:

<块引用>

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

如果我忽略发现的漏洞可以吗?因为尝试修复它们会导致此错误.

谢谢

解决方案

这不是 webpack 或 webpack-dev-server 本身的问题，而是 webpack-dev-server 本身的问题代码>copy-webpack-plugin 插件.

随着 6.x 主要版本的更新发生了重大变化:不是将带有配置模式的数组直接传递给 CopyWebpackPlugin 构造函数，您现在必须将它包装在 patterns 对象的属性并传递它.

旧语法:

 new CopyWebpackPlugin([{ 从:'src/xxx.ext'，到:'dist/xxx.ext' }，{ 从:'src/yyy.ext'，到:'dist/yyy.ext' }])

新语法:

 new CopyWebpackPlugin({模式: [{ 从:'src/xxx.ext'，到:'dist/xxx.ext' }，{ 从:'src/yyy.ext'，到:'dist/yyy.ext' }]})

他们这样做是因为构造函数现在支持额外的 options 属性:https://webpack.js.org/plugins/copy-webpack-插件/#options-1

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

这篇关于npm run dev 失败:ValidationError:无效的选项对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！