Cannot load svg files into app

[volkanunsal]

I have a local svg file, but I can't load it. I'm getting this error:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Is it possible to add an svg loader to the webpack runtime?

[ducthangho]

You can create a custom bundler using webpack as attached.
The part in webpack config (v5) is
module: {
rules: [{
test: /.(?:m?j|t)sx?$/,
include: [/node_modules/],
resolve: {
// Modules in node_modules might have a package.json
// stating "type": "module" (such as
// @babel/runtime/helpers/esm). In such a case any
// import statements are required to have mandatory file
// extensions.
//
// See:
// https://nodejs.org/api/esm.html#esm_mandatory_file_extensions
//
// To disable this set this resolution option to false.
fullySpecified: false,
},
}, {
test: /.(?:m?j|t)sx?$/,
exclude: [/node_modules/],
// loader: require.resolve('babel-loader'),
use: [{
loader: "babel-loader",
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,

                        // The configration for compilation
                        presets: [
                            ["@babel/preset-env", presetEnvOptions],
                            "@babel/preset-react",
                        ],
                        plugins: [
                            "@babel/plugin-proposal-class-properties",
                            "@babel/plugin-proposal-object-rest-spread", [
                                "import", {
                                    "libraryName": "antd",
                                    "libraryDirectory": "es",
                                    "style": "css"
                                },
                                "antd"
                            ],
                            [
                                'import', {
                                    "libraryName": '@ant-design/icons',
                                    "libraryDirectory": 'es/icons',
                                },
                                'antd-icons',
                            ],
                        ]
                    }
                }, ]
                // options: babelOptions,
        }, {
            test: /.s?css$/,
            type: "asset/inline",
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        }, {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            include: [
                PATHS.src
            ],
            type: "asset/resource",
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            exclude: [/node_modules/],
            use: [{
                loader: '@svgr/webpack',
                options: {
                    babel: true,
                    icon: true,
                },
            }, {
                loader: "file-loader"
            }, ],

            type: "javascript/auto",
            issuer: /\.(js|ts)x?$/
        }, {
            test: /\.mjs$/,
            include: /node_modules/,
            type: 'javascript/auto'
        }],
    },

webpack_airtable.zip