Npm run serve svg error 98% after emitting CopyPlugin

[ganeshkumarpolipalli-accolite]

Version node: 'v20.11.0', npm: '10.2.4'

Environment info

"sass-loader": "^10.5.2", "svg-url-loader": "^7.1.1", "svgxuse": "^1.2.6", "to-css": "^1.2.1", "v-calendar": "^1.0.1", "vue": "^2.5.17", "vue-cookie": "^1.1.4", "vue-router": "^3.2.0", "vue-split-layout": "0.0.16", "vue-svg-inline-loader": "^2.1.5", "vue-svg-loader": "^0.16.0", "vue-touch": "^2.0.0-beta.4", "vuedraggable": "^2.24.3", "vuex": "^3.0.1", "vuex-i18n": "^1.13.1", "vuex-router-sync": "^5.0.0",

"devDependencies": { "@babel/core": "^7.8.7", "@vue/cli-plugin-babel": "~4.2.3", "@vue/cli-plugin-e2e-nightwatch": "~4.2.3", "@vue/cli-plugin-eslint": "^4.2.3", "@vue/cli-plugin-unit-jest": "~4.2.3", "@vue/cli-service": "~4.2.3", "@vue/test-utils": "^1.3.0", "axios-mock-adapter": "^1.17.0", "babel-eslint": "^10.1.0", "babel-loader": "^8.3.0", "babel-preset-vue": "^2.0.2", "cache-loader": "^4.1.0", "chromedriver": "^88.0.0", "css-loader": "^3.4.2", "dotenv": "^8.2.0", "eslint": "^6.8.0", "eslint-plugin-vue": "^6.2.1", "faker": "^4.1.0", "flush-promises": "^1.0.2", "geckodriver": "^1.19.1", "globby": "^11.0.1", "gulp": "^4.0.2", "gulp-hub": "^4.2.0", "gulp-zip": "^5.0.1", "jest-environment-jsdom-sixteen": "^1.0.3", "jest-junit": "^8.0.0", "jest-teamcity-reporter": "^0.9.0", "jest-transform-stub": "^1.0.0", "jest-when": "^2.7.0", "nodemon": "^2.0.6", "normalize-path": "^3.0.0", "sonar-scanner": "^3.1.0", "storybook-vue-router": "^1.0.7", "vue-svg-sprite-loader": "^1.2.1", "vue-template-compiler": "^2.5.17", "vue-test-utils": "^1.0.0-beta.11", "yargs": "^15.3.1" }

vue.config.js

chainWebpack: (config) => { const svgRule = config.module.rule('svg'); svgRule.uses.clear();

  // https://github.com/vuejs/vue-cli/issues/6785
  svgRule.delete('type');
  svgRule.delete('generator');

  svgRule
    // load svgs as data-urls on scss using url('/path/to/svg?dataurl')
    .oneOf('dataurl')
    .resourceQuery(/dataurl/)
    .use('vue-loader')
    .loader('vue-loader')
    .end()
    .use('svg-url-loader')
    .loader('svg-url-loader')
    .end()
    .end()
    // load svgs as vue components when importing svg files
    .oneOf('vue-component')
    .test(/.*\.svg/)
    .use('vue-svg-loader')
    .loader('vue-svg-loader')
    .end()
    .end();
},

Jest.config.js transform: { '^.+\.vue$': 'vue-jest', '.+\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)?(?:.)/$': 'jest-transform-stub', '^.+\.jsx?$': 'babel-jest', '.+\.svg?.+$': 'jest-transform-stub' }, moduleNameMapper: { '.+\.svg?.+$': '/src/assets/icons/ui.svg', '^@/(.)$': '/src/$1', '^~/(.*)$': '/test/unit/$1' },

Error - npm run serve

h-web@0.1.0 serve

**vue-cli-service serve

INFO Starting development server... 98% after emitting CopyPlugin

ERROR Failed to compile with 1 error 8:57:01 pm

error in ./src/assets/icons/icons.svg?arrow-left

Syntax Error: TypeError: iconInfo.hasOwnProperty is not a function

@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Work.vue?vue&type=script&lang=js 44:0-67 443:20-29 @ ./src/views/Work.vue?vue&type=script&lang=js @ ./src/views/Work.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?sockjs-node (webpack)/hot/dev-server.js ./src/main.js**

Any help to resolve to this issue?

[ganeshkumarpolipalli-accolite]

Tired this below solution but not worked.. https://github.com/vuejs/vue-cli/issues/7084

[AdrianMatta15]

why are you so beautiful?

[ganeshkumarpolipalli-accolite]

I did not get you @AdrianMatta15

[AdrianMatta15]

alright, i almost hung up