Thank you for this workaround... SVG issue.

[gfmjr]

I currently have a project that has globalCSS in npm components and this workaround is what I'm attempting to use.

Unfortunately, I also use the next-images package for important images of all file types (including SVGs).

No matter what, running next-global-css attempts to also parse SVG files and always errors with:
error - SyntaxError: Unexpected token '<'

Is there a way to exclude SVG files easily from next-global-css, or make it skip them entirely by default?

[yarastqt]

Hi @gfmjr, you can create repo or gist with reproduce this issue?

[asader]

Here's what helped me

yarn add @svgr/webpack

next.config.js

const { patchWebpackConfig } = require('next-global-css')

module.exports = {
    webpack: (config, options) => {
        patchWebpackConfig(config, options);
        config.module.rules.push({
            include: /node_modules[\\/]@s7[\\/]ui-kit/,
            test: /\.svg$/,
            use: ['@svgr/webpack'],
        });
        return config;
    }
}

[yarastqt]

Hi @gfmjr, can you check this #12 solution work for you?

[gfmjr]

It's not the best solution, but it works. We managed to resolved it in this fashion with a different package.... I probably could have made your solution work as well but we had other repos using this already so stuck with what our team already knew.

const withImages = require("next-images");
const withTM = require("next-transpile-modules")(['@design/system']);

const baseConfig = withImages({
       ... ,
        webpack(config) {
            return config;
        }
    });

module.exports = withTM({
    ...baseConfig,
 }
);