Resolving path for SVG

Question

I ejected CRA to make some configurations.

The issue I have is svg is not resolving relative path.

what I have in my webpack config is as follow:

      // Process application JS with Babel.
      // The preset includes JSX, Flow, and some ESnext features.
      {
        test: /\.(js|mjs|jsx)$/,
        include: paths.appSrc,

        loader: require.resolve('babel-loader'),
        options: {
          customize: require.resolve(
            'babel-preset-react-app/webpack-overrides'
          ),

          plugins: [
            [
              require.resolve('babel-plugin-named-asset-import'),
              {
                loaderMap: {
                  svg: {
                    ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                  },
                },
              },
            ],
          ],
          cacheDirectory: true,
          // Save disk space when time isn't as important
          cacheCompression: true,
          compact: true,
        },
      },

The dev config is fine this issue is for production config. Any idea about how to fix this?

Thanks

Answer 1

Fixed by overriding public path. In Webpack, output section, config publicPath to '/my-project/' instead of ''