No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [Solved] Snap SVG

    Help
    1
    2
    355
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Hawkeye64
      Hawkeye64 last edited by

      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
            }
      
      1 Reply Last reply Reply Quote 0
      • Hawkeye64
        Hawkeye64 last edited by Hawkeye64

        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`)
        
        1 Reply Last reply Reply Quote 1
        • First post
          Last post