Svg-sprite-loader: Error when `options` has not been defined

[Bosch-Eli-Black]

Do you want to request a feature, report a bug or ask a question?
Bug

What is the current behavior?

Our project uses svg-sprite-loader 5.1.1, webpack 5.10.1, and webpack-cli 4.2.0

When compiling the project, I get the below error:

[webpack-cli] TypeError: Cannot read property 'outputPath' of undefined
    at SVGSpritePlugin.apply (C:\sources_git\strata\applications\alabaster\ui\node_modules\svg-sprite-loader\lib\plugin.js:64:29)
    at createCompiler (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack\lib\webpack.js:69:12)
    at create (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack\lib\webpack.js:113:15)
    at webpack (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack\lib\webpack.js:121:46)
    at f (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack\lib\index.js:35:15)
    at WebpackCLI.createCompiler (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack-cli\lib\webpack-cli.js:176:24)
    at WebpackCLI.run (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack-cli\lib\webpack-cli.js:268:25)
    at async runCLI (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack-cli\lib\bootstrap.js:59:9)

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.

webpack.config:

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

module.exports = env => {
    return {
        entry: ...,
        module: {
            rules: [
                {
                    test: /\.svg$/,
                    use: [
                        'svg-sprite-loader',
                        {
                            loader: 'svgo-loader',
                            options: {
                                plugins: [
                                    { removeTitle: true }
                                ]
                            }
                        }
                    ]
                },
                ...
            ]
        },
        plugins: [
            new SpriteLoaderPlugin(),
            ...
        ],
        output: {
            publicPath: '/',
            filename: '[name]-[contenthash].js'
        },
        name: 'dev',
        mode: 'development',
        devtool: 'source-map'
    };
};

Build command:

yarn run webpack

[LoganBarnett]

I ran into this issue during a webpack upgrade and resolved it by adding an empty options object to my loader:

{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  exclude: /src\/images\/mdi_icons/,
  include: [/images/],
  // Added this line below:
  options: {},
},

[Bosch-Eli-Black]

@LoganBarnett That fixed it! Thank you so much! 🙂

Do you think this is something that svg-sprite-loader should handle, or do you think it's a webpack bug?

[LoganBarnett]

@Bosch-Eli-Black glad it helped! Given that the stack you posted is within the loader itself, I would think svg-sprite-loader probably should address the issue. That said I'm not 100% certain how the two interplay :)

[Bosch-Eli-Black]

@LoganBarnett Sounds good. Thanks again 🙂

[Bosch-Eli-Black]

I think this got fixed at some point, as I'm no longer seeing this issue when using the following versions:

• svg-sprite-loader 6.0.5
• webpack 5.31.2
• webpack-cli 4.6.0

🙂

[Bosch-Eli-Black]

Never mind, just ran into this again.