We Keep Coding

React automatically importing all the CSS

So I'm doing a React App, Where the css files remains on src/dist/css, where src is located in the same local of App.js, the thing is I just want to import one single CSS file, but when I'm going to see every css file were automatically imported somehow.
I want to prevent this, because it's conflicting with the normal css screen.
These are the only things I'm Importing. ( IMAGE )
But All of these are being imported, I don't know if is something with React or the Server.. ( IMAGE )
EDIT: I figured out its because of React Router, Who is importing all the CSS to the App.JS, Still don't know how to prevent this.

There is no way to prevent this. Alternatives that you can look at are:
use BEM naming to have no conflicts all over the code.
use module.css, CSS module is a simple thing that can help you resolve the conflict without changing much of the CSS you have written.

i recommend you using styled-components or module.css. and tailwind also.

script.js doesn't load in my create-react-app

I am pretty new to coding and I am currently trying to solve a challenge from frontendmentor.io where my task is to build an ip-address-tracker.
To make this task a little bit more difficult for me, I am trying to build this app with the React framework via create-react-app.
My problem is, that my Javascript file, script.js, somehow isn't working. I am trying to implement it via the script-tag in my index.html.
<script src="../src/script.js"></script>
You can also check out the directory structure, I just updated the project on GitHub.https://github.com/bryanhain97/ip-address-tracker
Thanks a lot.

If you want to include a script in your index.html file in react you'll have to put it into the public folder and specify the path by using %PUBLIC_URL%/path-to-script-relative-to-public-dir
EDIT:
I just looked at your project and what you should do instead of embedding your script in index.html is to import it into index.js. You should probably export the initMap function and call it from index.js

OK. there are a couple of things you did wrong! First of all, React outputs some useful information in the console that is not negligible in case of failure. Please look at the following image.
It is clear that React is complaining about a missing React import. This is because you need to
import React from 'react'
even in a function component. I found this mistake in two places.
The URL you're using in your script.js file is wrong. Please see the git diff over my working directory below.
I don't know how you want to implement all this but I think this is not done THE REACT WAY! React is a component oriented library so, Please check some other alternatives like instead of doing all this in flat functions using direct connections to your DOM element. ReactDOM has some super power to be leveraged here.
I managed to get the application work on my own IP address and Google's (see the screen captures below), though I think you didn't implement it in the REACT WAY. So, keep digging!
[React Error Output][1]
[Git diff of my work space with the fixes][2]
[Working App on my IP Address][3]
[Working App on Google's IP Address][4]
[1]: https://i.stack.imgur.com/gZB72.png
[2]: https://i.stack.imgur.com/xHqfU.png
[3]: https://i.stack.imgur.com/8BEzI.png
[4]: https://i.stack.imgur.com/xZENI.jpg

require function not working with image in react

I've used <img src={require('./somRelativePath/image.jpg)} in React many times. However, this time it seems not to be working. There are no errors whatsoever (such as that the image was not found etc.) but the broken image on website.
After inspecting the element I was somewhat confused by the transpiled result in browser:
<img src="[object Module]" style="width: 5rem;">
It appears as if it loads the image as a component not the acutual file. I've created the app with npx create-react-app and haven't ejected it so far. So there is no error in babel or webpack configuration as it is currently handled by react under the hood.
Importing it with import statement works just fine:
import calendarPic from '../assets/pictures/calendar.svg';
Unfortunately that's not the solution because I have the local images saved in json and it would be definitely quite repetitive and ineffective as well to load all 50 images.
With the same npx create-react-app I've made a handful of mini-projects before but have never come across such a perplexing, yet so basic error. I'd be so thankful for any response as I've skimmed every possible solution throughout the internet.
Thank you again and have a lovely day!

use this one, it's work for me
<img src={require('./somRelativePath/image.jpg').default}
Explanation :
Value from let image1require('./somRelativePath/image.jpg') is different with
import calendarPic from './somRelativePath/image.jpg';
If you console them, value from calendarPic is a path, but if you use require, the value is an object like here.

I guess the problem is the location of the image. When you use create-react-app the app will be bundle into the public folder. Then the require statement would start to fetch the image - in this case in relative to the public folder and not to the src folder.
What I suggest you to do is try to move the image into the public folder and try using the src with URL relative to the public folder. Demo here

None of the answers above worked for me. Instead I used require(path) outside the img tag and assigned it into a variable, then used the variable inside the img tag src. It works that way.
const F = {
name: "Weiß",
image: require('./images/0453-Eastbourne-F961-F01.png')
}
Inside the image tag:
src = { F.image }

Create Angular 9 Library (ng-packagr) that allow import of single modules

I created a angular library with angular 9 cli. What I noticed: I can only include modules by loading the whole library:
Of course this makes no sense in a real world application. I want to be able to load each module individually. What am I doing wrong? Why can't he find the image component under #devmonkeys/mark6/image
I linked the repository because I don't know exactly what it is. I think this makes more sense than posting the code of 6 possible files here.
What I mean exactly: #angular/material for example, each component has its own path to avoid loading the whole library into the app during build. https://material.angular.io/components/button/api as an component namend MatButton. to import it we must use: {MatButtonModule} from '#angular/material/button'; i also want this, because it makes no sense to load the whole libary in my code only because i want 1 component.

Use Webpack/NPM Combo to require additional files within a module

The Scenario
We've got a Laravel 5.3 and UIKit 2 Combination setup using Elixir/webpack to bundle our JS.
By default laravel comes with a /resources/js/bootstrap.js (not twitter related)
This file is used to include dependencies, so currently it looks like
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
window.UI = window.UIkit = require('uikit');
However because UIKit is component based, and lets you bolt on extra functionality, e.g modals/tooltips you must then include the extra js component.
These are stored as /node_modules/uikit/dist/js/components/tooltip.js
This means I'm currently doing
window.UI = window.UIkit = require('uikit');
require('../../../node_modules/uikit/dist/js/components/tooltip');
As you can see there is a nasty very presumptuous ../../../ at the start, which makes me uncomfortable incase something happens and this is not the path.
The Question
Is there a more effective/stable/less-error-prone way to include these extra files? e.g
require('uikit')->path('components/tooltip');
Many thanks

Classically moments after posting the question, started digging more through Nodes documentation and came across
https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders
Which explains you can access submodules via defining the module first, then the local path the extra files.
e.g
require('MODULE/path/to/submodule');
So in UIkits example it would be
require('uikit/dist/js/components/tooltip');
Hopefuly this will help anybody else.