svg-sprite-loader

svg-sprite-loader copied to clipboard

Hi there, i've been looking around this place and the whole web for a few days now. I can't find exactly my situation, only some similar ones but no "Solution" helped me...

So i have this folder structure:

Frontend > Frontpage > Components > Icons > "A bunch of .svg files".

On another webpack config i can just do import "../icons/myIcon.svg" and everything is fine, but when i try to do the same in a new project i get:

ERROR in ./components/icons/tick.svg
Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
TypeError: Cannot read property 'target' of undefined
   at Object.loader (/Users/jbures/srv/gogcom/website4/frontend/frontpage/node_modules/svg-sprite-loader/lib/loader.js:39:46)
@ ./components/regularBanner/regularBanner.component.ts 3:0-27

I've no idea why...

This is what i have in my webpack config for the loader:

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
	options: {
	    extract: false,
	    spriteFilename: "./public/icons/[contenthash:8].svg",
             symbolId: "icon-[name]",
	}
}

Anybody has any crazy ideas?

Thanks!

Get same problem after update Webpack from 4 to 5, but property is 'version'...

I use this with Next.js, and this is my next.config.js:

const withPlugins = require("next-compose-plugins");
const AdequateSass = require('./loaders/adequate-sass');
const withImages = require('next-images'); // For comfort svg usage
const path = require('path');

const dotenv = require("dotenv").config({
	path: `./devops/.env.${process.env.NODE_ENV}`
});

const envConfig = dotenv.parsed;

const nextConfig = {
	future: { webpack5: true },
	generateEtags: false,
	poweredByHeader: false,
	env: { config: envConfig },
	webpack: (config, { webpack, isServer, dev }) => {
		config.module.rules.push({
			test: /\.svg$/,
			include: [ path.resolve(__dirname, 'src/'), ],
			exclude: [ path.resolve(__dirname, 'public/static/'), ],
			use: [
				{ loader: 'babel-loader' },
				{
					loader: 'svg-sprite-loader',
					options: {
						runtimeGenerator: require.resolve('./src/Components/Icon/svg-generator'),
						runtimeOptions: {
							iconModule: "./src/Components/Icon/index.jsx", // Relative to current build context folder
						}
					}
				}
			],
		});
		return config;
	},
};

module.exports = withPlugins(
    [	// plugins
		[AdequateSass, {
			extensions: ['scss', 'sass'],
			ignoreCSSOrder: true,
			sassLoaderOptions: {
				sassOptions: {
					includePaths: [
						path.resolve(__dirname, 'public/static/css'),
						path.resolve(__dirname, 'src'),
						path.resolve(__dirname, 'pages')
					]
				}
			},
			postcssLoaderOptions: {
				plugins: [
					require('autoprefixer'),
				],
			}
		}],
		[withImages, { exclude: path.resolve(__dirname, 'src/Components') }],
	],
	nextConfig,
);

I upgraded from nextjs 8 to next.js 12 and I got this error.

I upgraded svg-sprite-loader from 4.x to 6.x and the error went away I didn't have any custom webpack config

Fix this problem with npm uninstall svg-sprite-loader & npm install svg-sprite-loader