react-create-app using font-awesome - reactjs

I'm using create-react-app and I'm trying to integrate font-awesome so I can use it in my SPA.
I've done npm install font-awesome and it's installed, but when I try to call import 'font-awesome/css/font-awesome.css' I get the following error:
Compiling...
Failed to compile.
Error in ./~/font-awesome/css/font-awesome.css
Module parse failed: C:\Projects\myproject\ui\node_modules\font-awesome\css\font-awesome.css Unexpected character '#' (7:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (7:0)
# ./src/index.js 11:0-44

This is webpack related...
Webpack needs to use loader to read and parse different import statements...
CSS loader https://github.com/webpack-contrib/css-loader

Related

ERROR in ./src/index.js Module parse failed: Unexpected token (18:4) You may need an appropriate loader to handle this file type

when I'm removing the babel-loader from webpack these errors are found.
I don't want babel-loader in webpack.
I need to configure webpack without babel-loader

How to remove babel-loader from React application?

I want to remove babel-loader from my React application.
I'm trying to do is completely remove Babel from my project but I'm facing these issues:
ERROR in ./index.js Module parse failed: Unexpected token (18:4) You may need an appropriate loader to handle this file type

I am unable to run react app using npm start command

when I create react app using npx create-react-app app-name the app gets created but when I start the app using npm start i get the following error, please can someone guide me
Failed to compile.
./src/index.js 1:39
Module parse failed: Unexpected token (1:39)
File was processed with these loaders:
./node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
$RefreshRuntime$ = require('D:/Project's/React/CRUD-Operations/client/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);

ModuleParseError: Module parse failed: Unexpected character '�' (1:0) in nextjs

I face the below error, What is it exactly, and what can I do for it?
./node_modules/owl.carousel/dist/assets/owl.carousel.css
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Okay, you may have a look the latest next.js 9.3 blogs
Next.js 9.2 introduced built-in support for Global CSS Stylesheets to replace the next-css plugin with better defaults to provide a more optimized result.
Right after the release we increasingly got asked to integrate Sass support as many businesses moving to Next.js have an existing design system based on Sass.
To get started using global Sass imports in your application, install sass:
npm install sass
Then, import the Sass or CSS or both file within pages/_app.js.
And remove all other sass, CSS supported plugins like which #Zeit provided before.
Then restart/rebuild again.
The Next.js 9.3 is very simple.

Webpack build module with non ascii characters

I'm trying to get Webpack 2.0 to build the un-minified version of plotly.js in a ReactJS application. The issue is that plotly.js contains some non-ascii characters, and Webpack gets the error "Module build failed: [...] Unexpected character [non-ascii charater]". Any ideas on how to get Webpack to not error about these characters?
Alternatively, if I could get Webpack to not warn about the pre-minified plotly.min.js file that could also work, but I would rather have Webpack build it.

Resources