Nx React - Assets can't be resolved

I'm working on a nx monorepo that has a few library and 2 apps.

File Structures

apps<br/>
\--api<br/>
\--funnel ( react with webpack )<br/>
\--api-e2e<br/>
\--funnel-e2e<br/>
libs<br/>
\--funnel<br/>
\----pages<br/>
\--shared<br/>
\----assets<br/>
\-------src<br/>
\--------lib<br/>
\----------'some .tsx assets' ( lottie files )<br/>
\--------assets<br/>
\----------images<br/>
\-------------**/*.(png|webp|gif|svg) ( all others assets )<br/>

What's expected

In my libraries and in my app, I'd like to use the assets as such:<br/>
import imageName from '/assets/images/<some-image-folder>/<some-image-name>.<ext>';

For all svg, png, jpeg, etc...

for svgs: <br/>import { ReactComponent from imageName } from '/assets/images/<some-image-folder>/<some-image-name>.svg';

Issue

My actual issues is that when i'm building the funnel app nx run funnel:build --verbose

my assets seems to be loaded into the cache but every assets return a : Module not found: Error: Can't resolve '/assets/images/<some-image-folder>/<some-image-name>.<ext>' from '<whatever-lib>/<main-app>'

Yes i use /assets/images As i'm using angular functionaility to "serve" the assets to /assets/images

What is my config

#NX Report

Node : 16.16.0 OS : darwin x64 npm : 9.2.0

nx : 15.6.0 <br/>@nrwl/angular : Not Found <br/>@nrwl/cypress : 15.6.0<br/> @nrwl/detox : Not Found<br/> @nrwl/devkit : 15.6.0 <br/>@nrwl/esbuild : Not Found <br/>@nrwl/eslint-plugin-nx : 15.6.0 <br/>@nrwl/expo : Not Found<br/> @nrwl/express : 15.6.3<br/> @nrwl/jest : 15.6.0<br/> @nrwl/js : 15.6.0<br/> @nrwl/linter : 15.6.0 <br/>@nrwl/nest : Not Found<br/> @nrwl/next : Not Found<br/> @nrwl/node : 15.6.3<br/> @nrwl/nx-cloud : 15.0.3 <br/>@nrwl/nx-plugin : Not Found<br/> @nrwl/react : 15.6.0<br/> @nrwl/react-native : Not Found<br/> @nrwl/rollup : Not Found<br/> @nrwl/schematics : Not Found<br/> @nrwl/storybook : Not Found <br/>@nrwl/web : Not Found <br/>@nrwl/webpack : 15.6.3<br/> @nrwl/workspace : 15.6.0<br/> @nrwl/vite : Not Found <br/>typescript : 4.8.4<br/>

#app/funnel/project.json

My assets are imported through the main app as i don't build any of the sub-lib here's the selector :<br/>

{  
   "input": "libs/shared/assets/src/assets/images",
   "glob": "**/*",  
   "output": "assets/images"
}

#app/funnel/webpack.config.js

Couldn't import the whole code due to StackOverflow error but, in simple terms i added svgr support, file-loader & url-loader <br/>

module: {
      rules: [
        {
          test: /\.(webp|png|gif|jpe?g)$/i
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          },
        },
        {
          test: /\.svg$/,
          use: [
            '@svgr/webpack',
            'url-loader'
          ]
        }
      ],
}

Explanation of what I've tried so far

#1rst attempt
I used the angular functionality to import assets on build such as shown on the top config with the selector.

#2nd attempt
I used copy-webpack-plugin to copy static assets to '/assets/' without success

#3rd attempt
I added a path to the main tsconfig.base.json "@myapp/assets/*" : ["libs/shared/assets/src/assets/**/*"]

and tried to serve the assets as such : "@myapp/assets/<path-to-image>/<image-name>.<ext>"

#4rth attempt

The solution that works but isn't optimized for my workflow is to put each asset next to its dependencies...

This is disgusting as I need to duplicate assets, which are subject to a lot of changes.

Please help.

Here's the small-sized test repo : https://github.com/Sosumappu/assets-monorepo-test

Regarding your project it is not an asset pb, but an issue with loading svg images

I managed to load it .

At first upgrade your nx project from nx 15.6.0 to nx 15.6.3 :
npx nx migrate latest

You made a mistake, replace apple-pay.svg with applepay.svg in your project

change the color of your svg file to red, we can not see it (white on white background).

edit webpack.config.js as follow :

const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

// Nx plugins for webpack.
module.exports = composePlugins(
  withNx({
    nx: {
      svgr: true,
    },
  }),
  withReact({ svgr: true }),
  (config) => {
 
    return config;
  }
);

shared-ui.tsx

import styled from 'styled-components';

//Static Import
import Logo from '@github-test/shared/assets';
export const ApplePayIcon = () => {
  return <Logo />;
};

libs/shared/assets/src/index.ts :

import Logo from '-!@svgr/webpack!./assets/images/applepay.svg';
export default Logo;

here you can console.log(Logo), you will see it is creating a react component