svgr webpack issue

[nguyenvandanh5]

I have a issue when config use svgr with fast-serve.
run npm run serve

[s-KaiNet]

the error you posted is from normal gulp-serve, it's not even from fast-serve. At the beginning, you should configure svgr to work with normal gulp serve, only after that you should apply the same config to fast-serve.

[nguyenvandanh5]

the error you posted is from normal gulp-serve, it's not even from fast-serve. At the beginning, you should configure svgr to work with normal gulp serve, only after that you should apply the same config to fast-serve.

my config svgr here:

build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {

generatedConfiguration.module.rules.forEach((rule) => {
  if (Array.isArray(rule.test?.or) && rule.test?.or?.some((i) => String(i)?.includes('.svg'))) {
    rule.test.or = rule.test.or.filter((i) => !String(i)?.includes('.svg'));
  }
});

generatedConfiguration.module.rules.push({
  test: /\.svg$/i,
  type: 'asset',
  resourceQuery: /url/
});

generatedConfiguration.module.rules.push({
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  resourceQuery: { not: [/url/] },
  use: ['@svgr/webpack']
});

return generatedConfiguration;

}})

run fast serve: npm run serve

when i run gulp serve svg it work ok, but when run fast serve and use React svg component will show error

Use Icon ant design

[s-KaiNet]

Have you tried applying the same configuration to fast-serve, as described in the readme here?

[s-KaiNet]

Could you please create minimal SPFx repository, where gulp serve works with svgr? I have some troubles configuring it. You can create a sample GH repo, or just zip and share with me privately via email.

[github-actions]

This issue has been automatically closed because we haven't received any response back. Please feel free to reopen if needed.