TypeError: Cannot read property 'target' of undefined

jbures commented 5 years ago

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!

Psychosynthesis commented 3 years ago

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,
);

dcorb commented 2 years ago

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

Akurganow commented 1 year ago

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

JetBrains / svg-sprite-loader

TypeError: Cannot read property 'target' of undefined #347