Skip to content

the svg in the package will be parsed into a path #538

@Hsirius

Description

@Hsirius

What's happening

Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/info.328d871ddbc592dd0cde4c40f0919bfa.svg') is not a valid name

What should happen

the svg in the package should be ReactComponent

To reproduce
(list the steps to reproduce this behavior)

CRACO version
7.1.0

CRACO config

module.exports = {
    eslint: {
        enable: false
    },
    babel: {
        plugins: [
            ['import', { libraryName: 'acud', style: true, libraryDirectory: 'lib' }, 'acud'],
            ['@babel/plugin-proposal-decorators', { legacy: true }]
        ],
        presets: [
            '@babel/typescript'
        ]
    },
    devServer: {
        host: host,
        port: 8896,
        https: true,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        proxy: {
            '/api': {
                target: URL,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/api'
                }
            },
        }
    },
    plugins: [
        {
            plugin: cracoLess,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1890ff' },
                        javascriptEnabled: true,
                    },
                },
            },
        }
    ],
    webpack: {
        resolve: {
            extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.d.ts'],
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx|ts|tsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                    },
                },
            ],
        },
        alias: {
            '@': resolve('src'),
        },
        configure: (webpackConfig, { env, paths }) => {
            paths.appBuild = 'output';
            webpackConfig.module.rules.push(
                {
                    test: /\.svg$/,
                    include: /node_modules/,
                    use: ['@svgr/webpack']
                }
            );
            webpackConfig.output.path = path.resolve(__dirname, 'output');
            webpackConfig.output.publicPath = '/';
            webpackConfig.output.filename = 'static/js/[name].js';
            webpackConfig.output.library = 'gaiadbMain';
            webpackConfig.output.libraryTarget = 'amd';
            webpackConfig.plugins = [
                ...webpackConfig.plugins.filter(item => {
                    if (item.options) {
                        return !item.options.hasOwnProperty('ignoreOrder');
                    }
                    return true;
                }),
                new MiniCssExtractPlugin({
                    filename: 'static/css/[name].css',
                    ignoreOrder: false,
                    experimentalUseImportModule: undefined,
                    runtime: true,
                    // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
                }),
            ];
            return webpackConfig;
        }
    },
};

package.json

"@craco/craco": "^7.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
 "react-scripts": "5.0.1",
"@svgr/webpack": "^8.1.0",

Additional information
(anything else that could be useful for us to help you solve your problem)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions