使用 npm audit fix --force 修复审计问题后出现构建错误

问题描述

我在 npm audit report 中有 18 个漏洞（7 个低，9 个中等，2 个高），在使用 npm audit fix 一天并尝试使用 npm install $package_name 安装单个软件包后，我决定使用npm audit fix --force。之后尝试运行 npm start 时出现以下错误。如何解决这个问题？

我正在 vue 的帮助下建立一个博客（我是 java/python 开发人员，并且是 javascript 和 node 的新手，如果我需要提供任何额外的项目设置细节，请告诉我）

vue-blog-demo@1.0.0 start
> npm run dev


> vue-blog-demo@1.0.0 dev
> node build/dev-server.js

/****/working/the-doof-media-ui/node_modules/webpack/node_modules/schema-utils/dist/validate.js:104
    throw new _ValidationError.default(errors,schema,configuration);
    ^

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.
    at validate (/****/working/the-doof-media-ui/node_modules/webpack/node_modules/schema-utils/dist/validate.js:104:11)
    at validateSchema (/****/working/the-doof-media-ui/node_modules/webpack/lib/validateSchema.js:79:2)
    at create (/****/working/the-doof-media-ui/node_modules/webpack/lib/webpack.js:105:4)
    at webpack (/****/working/the-doof-media-ui/node_modules/webpack/lib/webpack.js:142:32)
    at f (/media/karthik/Data2/dev/theDoofMedia/working/the-doof-media-ui/node_modules/webpack/lib/index.js:54:15)
    at Object.<anonymous> (/****/working/the-doof-media-ui/build/dev-server.js:25:18)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  errors: [
    {
      keyword: 'anyOf',dataPath: '.devtool',schemaPath: '#/deFinitions/DevTool/anyOf',params: {},message: 'should match some schema in anyOf',schema: [
        { enum: [ false,'eval' ] },{
          type: 'string',pattern: '^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$'
        }
      ],parentSchema: {
        description: 'A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).',anyOf: [
          { enum: [Array] },{
            type: 'string',pattern: '^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$'
          }
        ]
      },data: '#cheap-module-eval-source-map',children: [
        {
          keyword: 'enum',schemaPath: '#/deFinitions/DevTool/anyOf/0/enum',params: { allowedValues: [Array] },message: 'should be equal to one of the allowed values',schema: [ false,'eval' ],parentSchema: { enum: [Array] },children: undefined
        },{
          keyword: 'pattern',schemaPath: '#/deFinitions/DevTool/anyOf/1/pattern',params: {
            pattern: '^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$'
          },message: 'should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$"',schema: '^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$',parentSchema: {
            type: 'string',pattern: '^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$'
          },children: undefined
        }
      ]
    }
  ],schema: {
    deFinitions: {
      Amd: {
        description: 'Set the value of `require.amd` and `define.amd`. Or disable AMD support.',anyOf: [
          {
            description: 'You can pass `false` to disable AMD support.',enum: [Array]
          },{
            description: 'You can pass an object to set the value of `require.amd` and `define.amd`.',type: 'object'
          }
        ]
      },....

此外，如果我运行 npm run build

，我会收到以下错误

/the-doof-media-ui/build/webpack.prod.conf.js:34
    new webpack.optimize.UglifyJsPlugin({
    ^

TypeError: webpack.optimize.UglifyJsPlugin is not a constructor
    at Object.<anonymous> (/media/karthik/Data2/dev/theDoofMedia/working/the-doof-media-ui/build/webpack.prod.conf.js:34:5)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/media/karthik/Data2/dev/theDoofMedia/working/the-doof-media-ui/build/build.js:17:23)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

解决方法

删除 node_modueles 文件夹并运行

npm install