[Solved] Snap SVG



  • Adding this here in case anyone else runs into this issue. Snap SVG doesn’t import well when using webpack. So, after mucking around for a while, I figured out how to change quasar.conf.js to make it work.
    quasar.conf.js

          extendWebpack (cfg) {
            cfg.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /node_modules/
            })
            // Code to correctly load snapsvg
            // must have installed "npm i -S imports-loader"
            cfg.module.rules.push({
              test: require.resolve('snapsvg/dist/snap.svg.js'),
              use: 'imports-loader?this=>window,fix=>module.exports=0'
            })
            cfg.resolve.alias['snapsvg'] = 'snapsvg/dist/snap.svg.js'
            // Now you can "const Snap = require('snapsvg')" on a page or component when you need to use Snap svg
          }
    


  • Alternatively, if you don’t want to modify the quasar.conf.js and you have npm installed imports-loader you can do this on a page or component that requires Snap SVG:

    const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`)