svg-sprite-loader
svg-sprite-loader copied to clipboard
TypeError: Cannot read property 'target' of undefined
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