question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using with Vue-CLI 4 produces no results

See original GitHub issue

Been using this plugin for a while now on a few sites and it’s always worked great. Up to now I’ve been using it in conjunction with Laravel Mix for webpack management. Recently we did a refactor on a site in-progress to use Vue-CLI (4.2.2), and now there seems to be no output whatsoever. The svg sprite isn’t created and there are no errors to indicate what’s happening. Here’s the webpack config in vue.config.js that’s always worked with Laravel Mix:

module.exports = {
  configureWebpack: {
    plugins: [
      new SVGSpritemapPlugin("src/assets/images/svg/*.svg", {
        output: {
          filename: "../src/assets/fonts/icons.svg",
          svg4everybody: false,
          svgo: {
            removeTitle: true,
            removeStyleElement: true,
            cleanupNumericValue: true
          },
          chunk: {
            keep: true
          }
        },
        sprite: {
          prefix: false
        }
      })
    ]
  }
};

As for versions:

  • Vue: 2.6.11
  • Vue-cli: 4.2.2
  • svg-spritemap-webpack-plugin: 3.5.4

Again, things were working great until switching to Vue-cli. No matter what I do, no svg file is output, and there are no errors. Hoping someone might have some ideas. Thanks!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
drewrawitzcommented, May 12, 2020

@cascornelissen Thanks so much for spending some time on it! You helped point me in the right direction 😄

I was able to get it to work by adding the following to my vue.config.js file under the configureWebpack object:

devServer: {
  writeToDisk: (filePath) => {
    return /icon-sprite.svg$/.test(filePath);
  },
  watchOptions: {
    ignored: [/node_modules/, /public\/icon-sprite.svg/],
  }
},

Vue is configured to watch the public folder, so this will fix the infinite loop issue. When you first run yarn serve it loops like three times for some reason, but then it stops and starts to successfully work!

Hopefully, this will help someone else. Thanks again!

1reaction
AtlantaJonescommented, May 12, 2020

@drewrawitz Hey sorry for my tardiness. No, we eventually realized that new svgs were getting added to the sprite only on “build”, so just kind of chalked it up to a minor inconvenience. After all, new icons aren’t added often. Just have to document what’s needed.

Based on the current suggestions, definitely going to try them out and see if it also works for us. Thanks to you and @cascornelissen !!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Same vue.config.js producing different results when running ...
It seems, I'm close to finding the cause of the problem. Some of the VUE files were using TS files located outside of...
Read more >
No eslint warnings on initial "npm run serve" #3065 - GitHub
bin/vue-cli-service lint --no-fix always gives me the errors I see in the first run (I was hoping this builds up the cache and...
Read more >
Deployment - Vue CLI
You can deploy the built content in the dist directory to any static file server, but make sure to set the correct publicPath....
Read more >
Vue JS 3 Tutorial for Beginners #4 - The Vue CLI ... - YouTube
In this Vue 3 tutorial we'll use the Vue CLI to boilerplate a larger Vue project for us, which will ultimately contain multiple...
Read more >
What's new in Vue CLI 5.0? - Ninja Squad
Choose the version you're currently using (4.5.12 for example), and the target version (5.0.1 for example), and it gives you a diff of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found