Cannot load SVG in react lib

[mastrobardo]

Current Behavior

import { ReactComponent as MailIcon } from '../../assets/mail-line.svg'

export 'ReactComponent' (imported as 'MailIcon') was not found in '../../assets/mail-line.svg' (possible exports: default)

Expected Behavior

I can import and use the svg in my component

GitHub Repo

No response

Steps to Reproduce

Add an svg to a react library, and try to import

Nx Report

Node   : 20.11.0
   OS     : win32-x64
   npm    : 10.2.4

   nx                 : 18.0.4
   @nx/js             : 18.0.4
   @nx/jest           : 18.0.4
   @nx/linter         : 18.0.4
   @nx/eslint         : 18.0.4
   @nx/workspace      : 18.0.4
   @nx/cypress        : 18.0.4
   @nx/devkit         : 18.0.4
   @nx/eslint-plugin  : 18.0.4
   @nx/react          : 18.0.4
   @nx/rollup         : 18.0.4
   @nx/storybook      : 18.0.4
   @nrwl/tao          : 18.0.4
   @nx/web            : 18.0.4
   @nx/webpack        : 18.0.4
   typescript         : 5.3.3

Failure Logs

export 'ReactComponent' (imported as 'MailIcon') was not found in '../../assets/mail-line.svg' (possible exports: default)

Package Manager Version

No response

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[jihoun]

Seems similar to https://github.com/nrwl/nx/issues/21773

[davidearci]

You right, seems the same

[jaysoo]

This is fixed in https://github.com/nrwl/nx/pull/22628 and is in latest canary 18.3.0-canary.20240403-270788e. The patch version will be released this week.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.