reactjs - Deduplicating assets in a monorepo

Question

My file structure is as follows:

- packages
    - app1
        - node_modules
            - shared
        - public
            - svg1
        - src/pages
    - app2
        - node_modules
            - shared
        - public
            - svg1
        - src/pages
    - shared
        - src/components

I'm using Lerna to share React components in the shared package with my app1 and app2 packages, so for example, my app1 package.json.dependencies includes "shared": "^1.0.0".

I have no problems sharing components, but I'm unsure how to share assets (like .png and .svg files). What currently works is to add all assets (see svg1) to the public folder in both the app1 and app2 packages, but I'd like to deduplicate them.

For example, in one of my shared components, I'm referencing a .svg simply with <img src="svg1.svg" alt="MyLogo" />, but the image only loads in app1 if it's included in the app1 package.

How can I keep these assets in the shared package and reference them in an app1, app2, or shared component?

question from:https://stackoverflow.com/questions/65929876/deduplicating-assets-in-a-monorepo

Answer 1

Waitting for answers