We Keep Coding

exporting .png files from a library to a React JavaScript project

I'm creating a utility project that will supply React components and resources to my other projects.
I'd like it to include a set of images (mostly .png files for icons) that can then be imported by the child projects.
I can't figure out how to make this work.
I can export the images from the library, and I can see them, name-mangled, in the node_modules of the child project. So, all good so far.
But, import {imgName} from "myLib" does not include the file in the child project's bundle.
It looks to me like my problem is explained by a clue in https://create-react-app.dev/docs/adding-images-fonts-and-files/:
You can import a file right in a JavaScript module. This tells
webpack to include that file in the bundle.
Presumably, CRA is not triggering this webpack behavior in my case, since I'm importing from another module, not from a file.
How can I get things working?
Assume:
I have complete ownership of the library and child projects, so I can change this solution in whatever way works. I just want to have a single common resource for the images.
I don't want to eject my child projects
Ideally, any complexity should be in the library project. The child projects should have minimal complex tooling. (My intent is for this library to be used by a team of other developers, who will want to focus on their own tasks; not on tooling details)
EDIT (ADDED LATER)
Per the comments in the first answer below, I've created a simple example of my problem. See:
Library repo: github.com/deg/media-file-bug-library
Library package: npmjs.com/package/media-file-bug-library
Client repo: github.com/deg/media-file-bug-client
Just pull the client repo and do yarn install and yarn start. This will bring up a little web page that shows the problem:
SCREEN SNAPSHOT:

The Problem is Not in CRA Trigger. Importing Png File like JavaScript Hides a Magic. Here you are importing a Image and Exporting it which then get Processed by bundler and The Bundled Index Actually Exports The name of the Processed Image File Which in Your Case is corss~nAalnlvj.png. That's Why Your Image is Broken but you are able to render name of File, The Case is Same for microbundle or parcel.
How You Can solve it is by separating your assets and components By Placing Images on separate assets folder and place your images there and then add assets to files in your files in package.json
{
.
.
"files": [ "dist", "assets"],
}
And Then Import Image & Using Like This
import React from 'react'
import ico_cross from 'media-file-bug-library-fix/assets/cross.png'
function App() {
return (
<div className="App">
<img src={ico_cross} alt="im"/>
</div>
);
}
For Further Reference Checkout
Here
A Npm Library For Your Fix I Published Npm media-file-bug-library-fix

enter image description here
hey David I found the solution please do check the above screenshot
as in you package just change in index.modern.js
// WebPack doesnt listen as a path it listen
// var cross = "cross~nAalnlvj.png";
// use import rather than simple name as it generate a full absolute path at parent level so that in child level it can be accessible as an Image
import cross from "./cross~nAalnlvj.png"

Vue CLI 3 target build lib exclude shared styling

I am currently working on a Vue.js project where i use the Vue CLI 3 to build components in lib mode like this: vue-cli-service build --no-clean --target lib --name ComponentName.vue. The components can then be used any website if registered in a Vue instance.
However, the website contains it's own stylesheets and the component too. To develop and see the actual styles applied to component i have to pull in these (shared) styles in every component i develop. Therefore they are also in the compiled stylesheets after building the component using the command stated above (vue-cli-service build).
My question: Can i exclude the (shared) styles when building the component? I can't find anything about it in the docs (https://cli.vuejs.org/). If somebody could provide the answer or a (Webpack) workaround that would be much appreciated.
Many thanks in advance!

I am not sure if I understand you correctly but there is an option to have these styles inline in the components itself, which would be much easier for development.
https://cli.vuejs.org/guide/build-targets.html#app
dist/myLib.css:
Extracted CSS file (can be forced into inlined by setting css: { extract: false } in vue.config.js)

How to Add React Js On an Existing Website?

So reactjs.org has an excellent tutorial on how to add react js to an existing website HERE by adding react js code as scripts. That is working well for me. My doubt is that how would we work with components that we download from npm?(eg: react-router, react-bootstrap,etc.) Usually when we work on a complete react project we just install them with npm and import them in react js, but how do we install such components or get their script files like we got react script files?

The process would be similar to the process described on the React site. In their example, they implement a simple single-component (<LikeButton />) application with no external dependencies. To use external components/modules you would need to either bundle them into your app, or load them as scripts.
Preferred Method
The preferred method would be to use a bundler like webpack, parcel, or similar to bundle your code and modules into a single script.
Create your app.js file, using imports to load external components
import React from 'react';
import Button from '#material-ui/core/Button';
const LittleApp = () => (
<Button variant="contained" color="primary">
Hello World
</Button>
);
ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));
Use webpack, parcel, or similar to bundle the app.js into a single bundled.js file
Load the bundled.js file into your page
Alternate Method
It's also possible to load certain components using Universal Module Definition (UMD) files in <script> tags. This could work for a simple add-on app, but probably not recommended in most cases. I tend to use these only when prototyping ideas, or demoing solutions on Stack Overflow.
Something like this:
const LittleApp = () => {
return (
<div>
<MaterialUI.Button variant="contained" color="primary">
Hello World
</MaterialUI.Button>
</div>
)
}
ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<div id="littleApp"></div>

I think you can add those library using <script> as well.
react-router: <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
react-bootstrap: <script
src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"
crossorigin
/>
check the documentation for corresponding library.

https://cdnjs.com/ hosts many FOSS (Free and Open-Source Software) web libraries. Searching react-router yields links to development and minified versions you can use in your applications. But much like klugjo's answer, I would highly advise against this, and manage your project's modules with npm if at all possible.

I would highly recommend against that and go the standard route:
Use create-react-app to create a full fledged react app
Install your modules using npm
Code your app
Build the app and deploy the resulting bundle (create-react-app provides all the tools you need for that)
Fetching react from a CDN like in the link you have provided is suitable for a quick Proof of concept but not for a production app

Reactjs Module not found | Css import

I will try to be concise, I must work on a Reactjs project for school project, my task is to take a existing html/css theme and and put it in React components.
But I have a problem since the start, I used CreateReactApp for a clean start and import index.css of the theme.
Create a basic form base on the theme and have this error. (She disapear when I delete index.css)
Error I see
Failed to compile
./src/css/index.css
Module not found: Can't resolve '../images/category-1-bg.jpg' in
'C:\Users\50031\Documents\React-Project-master\src\css'
Structure of the project is that
Structure project
Thanks so much, I already check for an answer but I suck as hell in code and understand nothing.... Sorry

Your images directory is not inside css directory and that is what the error says. This is because somewhere in your index.css you have not assigned correct path for the images. Assign correct paths to the images in your index.css and the app should compile.

Install css-loader so that it will include the image during build time.

React-Native can't resolve module for fonts

I'm starting a very basic build.
I'm using `create-react-native-app' and yarn for pm.
From there all I have tried to accomplish is to load in 'native-base' for some UI elements.
From the app.js file the only thing I've added is a Button Component from native-base.
<Button> <Text></Text> </Button>
And have included native-base.
After receiving some errors that it couldn't resolve module '#expo/vector-icons' I went and installed #expo/vector-icons, and for the hell of it ran react-native link.
Now it can find #expo/vector-icons but it can't find the fonts starting with Ionicons.ttf.
SO. From there I downloaded all the fonts to a assets/fonts/ directory and then included this in my app.js file based off some documentation I found on the expo site.
import { Font } from 'exponent';
///
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'ionicons': require('./assets/fonts/Ionicons.ttf'),
});
}
///

They way I load custom fonts is by adding them in the Info.plist file as a list of Font provided by the application:
And they also need to be in the provided resources of the Build Phases:
After that, you can use it in the fontFamily property in CSS in react native. Make sure you also clean and build the project again after adding the fonts so they are copied to the device.