Static files conflicts with react-router-dom

Question

Am trying to build react-library-project for one of my project using tsdx (Typescript Packager).

In this project I have used

1. react
2. react-router-dom
3. scss and ant.design

Application build successfully and I can see the image files are getting generated correctly and all the references inside the css files

But the images not getting loaded in the Browser UI. Am suspecting react-router-dom treating the assets as routes and it throws No routes matched location "/9db4e56265553721.svg"

The below are the tsdx configuration and package.json for this project

tsdx.config.js

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const svgr = require('@svgr/rollup');
const url = require('@rollup/plugin-url');
const scss = require('sass');
const path = require('path')


module.exports = {
  rollup(config, options) {
    config.plugins = [
      svgr({
        icon: true,
        compact: false,
        multipass: true
      }),
      postcss({
        extract: false, // Set to true to extract styles into a separate file
        modules: true, // Enable CSS modulesÍ
        exec: true, // Enables css-in-js (React Inline Styles)
        plugins: [
          autoprefixer(),// Autoprefixer to handle vendor prefixes
          cssnano({
            preset: 'default'
          }) 
        ],
        use: [
          ['sass', {
            includePaths: ['./src/Styles'],
            implementation: scss, // Specify Dart Sass
          }],
        ],
      }),
      url({
        include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif'], 
        limit: 0,
        sourceDir: path.resolve(__dirname, 'src'),
        publicPath: '/',
      }),
      ...config.plugins,
    ];
    return config;
  },
};

package.json

package.json

{
  "version": "1.0.3",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist",
    "src"
  ],
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "start": "tsdx watch",
    "build": "tsdx build",
    "test": "tsdx test --passWithNoTests",
    "lint": "tsdx lint",
    "prepare": "tsdx build",
    "size": "size-limit",
    "analyze": "size-limit --why"
  },
  "dependencies": {
    "@azure/msal-browser": "^3.5.0",
    "@azure/msal-react": "^2.0.8",
    "@iconify/react": "3.2.2",
    "axios": "^1.6.2",
    "formik": "^2.4.5",
    "lodash-es": "^4.17.21",
    "react-idle-timer": "^5.7.2",
    "react-jwt": "^1.2.0",
    "styled-components": "^6.1.3",
    "yup": "^1.3.3"
  },
  "peerDependencies": {
    "antd": "4.24.4",
    "classnames": "^2.3.1",
    "react": ">=18.2.0",
    "react-dom": ">=18.2.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "prettier": {
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "name": "test-lib-base",
  "author": "PradeepKumar",
  "module": "dist/test-lib-base.esm.js",
  "size-limit": [
    {
      "path": "dist/test-lib-base.cjs.production.min.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/test-lib-base.esm.js",
      "limit": "10 KB"
    }
  ],
  "devDependencies": {
    "@rollup/plugin-url": "^8.0.2",
    "@size-limit/preset-small-lib": "^11.0.1",
    "@svgr/rollup": "^8.1.0",
    "@types/lodash": "^4.14.202",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "@types/react-router-dom": "^5.3.3",
    "antd": "4.24.4",
    "autoprefixer": "^10.4.16",
    "classnames": "^2.3.1",
    "css-loader": "^6.8.1",
    "cssnano": "^6.0.2",
    "husky": "^8.0.3",
    "lodash": "^4.17.21",
    "postcss": "^8.4.32",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "rollup-plugin-postcss": "^4.0.2",
    "sass": "^1.69.5",
    "size-limit": "^11.0.1",
    "tsdx": "^0.14.1",
    "tslib": "^2.6.2",
    "typescript": "^5.3.3"
  }
}

Answer 1

I have fixed by doing 2 things

1. Convert SVG files to JPG and used it in scss
2. Updated tsdx.config.js with below configuration and plugins

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const svgr = require('@svgr/rollup');
const url = require('@rollup/plugin-url');
const scss = require('sass');
const path = require('path');
const { default: image } = require('@rollup/plugin-image');


module.exports = {
  rollup(config, options) {

    const {plugins = []} = config;

    config.plugins = plugins.filter(plugin => plugin.name !== 'image' && plugin.name !== 'postcss')

    config.plugins = [
      image({
        extensions: ['.svg', '.png', '.jpg', '.gif'], 
        output: 'dist/static/assets'
      }),
      postcss({
        extract: false, // Set to true to extract styles into a separate file
        modules: true, // Enable CSS modulesÍ
        exec: true, // Enables css-in-js (React Inline Styles)
        plugins: [
          autoprefixer(),// Autoprefixer to handle vendor prefixes
          cssnano({
            preset: 'default'
          }) 
        ],
        use: [
          ['sass', {
            includePaths: ['./src/Styles'],
            implementation: scss, // Specify Dart Sass
          }],
        ],
      }),
      ...config.plugins,
    ];
    return config;
  },
};