svg-sprite-loader icon indicating copy to clipboard operation
svg-sprite-loader copied to clipboard

Error when `options` has not been defined

Open Eli-Black-Work opened this issue 3 years ago • 6 comments

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

Eli-Black-Work avatar Dec 14 '20 07:12 Eli-Black-Work

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: {},
},

LoganBarnett avatar Dec 15 '20 02:12 LoganBarnett

@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?

Eli-Black-Work avatar Dec 15 '20 09:12 Eli-Black-Work

@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 :)

LoganBarnett avatar Dec 16 '20 02:12 LoganBarnett

@LoganBarnett Sounds good. Thanks again 🙂

Eli-Black-Work avatar Dec 17 '20 03:12 Eli-Black-Work

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

🙂

Eli-Black-Work avatar Apr 13 '21 08:04 Eli-Black-Work

Never mind, just ran into this again.

Eli-Black-Work avatar Apr 19 '21 07:04 Eli-Black-Work