'ReactComponent' is not exported by lib

Current Behavior

I am trying to bundle a svg publishable React ibrary, but when I try run build it fails with below error

Error during bundle: Error: 'ReactComponent' is not exported by <path/to/svg>

Expected Behavior

Build should be sucessful

Steps to Reproduce

Update project’s worspace.json with

"webpackConfig": "@nrwl/react/plugins/webpack",

Add typing to base tsconfig.base.json

"files": ["./node_modules/@nrwl/react/typings/image.d.ts"],

run

nx affected:build --base=remotes/origin/main --with-deps

Failure Logs

'elementType' is not exported by 'node_modules\prop-types\index.js'
'forwardRef' is not exported by 'node_modules\react\index.js'
'createElement' is not exported by 'node_modules\react\index.js'
'createElement' is not exported by 'node_modules\react\index.js'
Error during bundle: Error: 'ReactComponent' is not exported by <path to svg>
Bundle failed: iep-logos

Environment

node: 16.3

Appreciate it if someone could provide a fix this. We have tring to publish internal React library based on SVGs and this is turning out to be major blocker.

[smithad15]

Can confirm that this is still an issue in the default setup for Nx

[doublemarked]

Moved past this today by patching the rollup config to include svgr,

// workspace.json
   "rollupConfig": [
      "@nrwl/react/plugins/bundle-rollup",
      "packages/ui/bundle-rollup.cjs"
   ],

// packages/ui/bundle-rollup.cjs
const url = require('@rollup/plugin-url');
const svgr = require('@svgr/rollup').default;

module.exports = options => ({
    ...options,
    plugins: [ ...options.plugins, url(), svgr()],
});