vuejs/vue-cli

Npm run serve svg error 98% after emitting CopyPlugin

ganeshkumarpolipalli-accolite opened this issue · 4 comments

ganeshkumarpolipalli-accolite commented

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 commented

Tired this below solution but not worked..
#7084

AdrianMatta15 commented

why are you so beautiful?

AdrianMatta15 commented

alright, i almost hung up