I cannot import svg files from a npm package

[iamrane]

Hi! I have been trying to config my webpack for hours now so it works with streamlinehq. It works perfect if I use a releative path, but as soon as im trying to load from @streamlinehq/streamlinehq/img/streamline-regular/shopping-ecommerce/discount-coupons/discount-bubble.svg it fails. Its trying to load it relative.

import { ReactComponent as DiscountBubble } from '@streamlinehq/streamlinehq/img/streamline-regular/shopping-ecommerce/discount-coupons/discount-bubble.svg';

Im using svgr and file-loader with a webpack config like this.

{
    test: /\.svg$/,
    use: [
        {
            loader: '@svgr/webpack',
            options: {
                publicPath: '/',
            },
        },
        {
            loader: 'file-loader',
            options: {
                name: 'svg-[hash:hex:10].[ext]',
                publicPath: '/',
            },
        },
    ],
},

I have been trying without the file-loader but it doesn't help.

Have you awesome devs any suggestions on what's going wrong? I've been playing around with publicPath but no help there. Should I use something else than file-loader?

[cbrwizard]

Hey, I haven't done it myself (I just used create-react-app in an example), but have you considered configuring your webpack to work the exact way as in create-react-app? https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L454 Looks like they only use svgr. More info here https://betterprogramming.pub/react-best-way-of-importing-svg-the-how-and-why-f7c968272dd9

[iamrane]

I cleaned up everything and not the only rule i have for streamlinehq files is

{
    test: /@streamlinehq.*\.svg$/,
    use: ['@svgr/webpack'],
}

but i still get this error when i run yarn start

ENOENT: no such file or directory, open '/PATH/TO/MY/COMPONENT@streamlinehq/streamlinehq/img/streamline-regular/shopping-ecommerce/discount-coupons/discount-bubble.svg

[cbrwizard]

Have you checked the links I've sent and tried what's suggested there? I'd also suggest the following:

1. Check that the actual image file exists
2. Change test so it matches all .svg

[iamrane]

Yeah for sure. I've read it and tested to match all .svg, removed file-loader etc etc.

[cbrwizard]

In our app we have the following webpack related config for svg:

  {
    test: /\.svg$/,
    use: [
      {
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: [{removeViewBox: false}],
          },
        },
      },
    ],
  },

    "@svgr/webpack": "^5.5.0",

, svg is also excluded from file-loader or any other loaders. It works fine for us

[iamrane]

Yeah im pretty sure the problem is a non svgr/webpack problem. It seems like I can't access assets inside packages (node_modules)

Will come back when i solves it.

[iamrane]

Ah it seems like its only SSR that fails.

[iamrane]

Okey, I solved this now. We did alot of path changes with svg's in babel. So now it works. Sorry for taking your time :)