Svg-sprite-loader: this.async is not a function issue with webpack

[ghost]

Hi Kisenka,
After getting your updates from the callback issue I'm getting the below error.
<<< start of error >>>
loader option has been deprecated - replace with "use"
{localfilepath}/node_modules/svg-sprite-loader/lib/loader.js:18
const done = this.async();
^
TypeError: this.async is not a function
<<< end of error >>>
Could you please advise on a fix? Thanks.

[kisenka]

@girwin575 please provide webpack version

[ghost]

@kisenka 3.7.1

[kisenka]

@girwin575 couldn't reproduce, could you please create a git repo with reproducible error?

[mascardoso]

Having the same issue.
Using "webpack": "^3.6.0"

[mascardoso]

any ideas how to solve this?
more details on the error:

[0]       "TypeError: this.async is not a function",
[0]       "    at loader (/node_modules/svg-sprite-loader/lib/loader.js:18:21)"

[ghost]

@mascardoso yeah I'm having the same issue. What version of node are you using?

[mascardoso]

@girwin575 node v8.7.0

[mascardoso]

Also probably good to know but I have in place an SSR app. I get this error when I try to add sprite-svg-loader to my .babelrc

[kisenka]

@girwin575 it will be better if you edit this issue and fill the template (and don't remove it next time). Also I can help you much faster if you create a git repo where I can reproduce an error.

[ghost]

@kisenka I'll fill out that issue template now as a comment, with regards to a repo I'm working on one with the same issue as I can't publish what I currently have.

[kisenka]

@girwin575 ok, let's start from details about your environment, I need only this information from issue template

[ghost]

• Node.js version: 7.10.1
• webpack version: 3.7.1
• svg-sprite-loader version: 3.3.1
• OS type & version: OS X El Capitan - 10.11.6

[mascardoso]

If it also helps @kisenka:

• Node.js version: 8.7.0
• webpack version: 3.6.0
• svg-sprite-loader version: 3.3.1
• OS type & version: OS Sierra - 10.12.6

[kisenka]

@mascardoso

I get this error when I try to add sprite-svg-loader to my .babelrc

What does it mean try to add sprite-svg-loader to my .babelrc? sprite loader configuration should be defined in webpack config

[kisenka]

@girwin575 still cannot reproduce with node 7.10.1 & webpack 3.7.1. I need demo repo with package.json, webpack config & minimal piece of your code. You don't need to share whole project :)

[mascardoso]

@kisenka the reason I add in babelrc it's because this is a SSR application. Does it make sense? Probably you should actually do your tests with a SSR application.. and you might find something... Not sure if @girwin575 is using also SSR

[ghost]

Ok @kisenka I'll get one together. Thanks!

[kisenka]

@mascardoso please provide an .babelrc example with svg-sprite-loader config

[mascardoso]

@kisenka

{
  "presets": ["es2015", "es2016", "es2017", "react"],
  "plugins": [
    "svg-sprite-loader",
    ["css-modules-transform", {
          "generateScopedName": "[local]___[hash:base64:5]",
          "extensions": [".scss"],
          "rootDir": "./front"
    }],
    "dynamic-import-node",
    "syntax-dynamic-import",
    "transform-async-to-bluebird",
    ["transform-runtime", {
      "polyfill": true,
      "regenerator": true
    }],
    "transform-object-rest-spread",
    "ramda"
  ]
}

[kisenka]

@mascardoso svg-sprite-loader is not a babel plugin, it's a webpack loader. Please follow the configuration readme section to setup it properly.

[mascardoso]

@kisenka this is probably a different topic for me then... but if I use only webpack config and SSR I get the following error when importing an svg: "ReferenceError: React is not defined",. There's also a ticket here

[ghost]

Hi @kisenka here is the repo https://github.com/girwin575/testrepo

Node.js version: 7.10.1
webpack version: 3.7.1
svg-sprite-loader version: 3.3.1
OS type & version: OS X El Capitan - 10.11.6

I hope this helps?

[kisenka]

@girwin575 you're trying to import loader instead of plugin here:

const SpriteLoaderPlugin = require('svg-sprite-loader');

should be

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

[ghost]

Thanks @kisenka whilst you have the repo may I ask the fact I have

module: { rules: [ { test: /\.svg$/, loader: 'svg-sprite-loader', include: path.resolve(svgDir), options: { extract: true, spriteFilename: 'flags-sprite.svg' } } ] },

Does that mean I should have a local copy of my flags-sprite.svg in my repo now? As I can't see it.

[kisenka]

@girwin575 you can't see it because you have no svg imports in your code. Add import shareId from './assets/share.svg'; in app.js.

Also you have an error in webpack.config.js#2, leading slash should be removed in /src/assets:

const svgDir = path.resolve(__dirname, 'src/assets'); 

[ghost]

Fantastic, thanks for the help @kisenka