We Keep Coding

How do I get css-loader and style-loader properly working to allow me to use my CSS file with Webpack?

I am setting up a simple React and Express application using Webpack and I have run into a problem where I am apparently not using my loaders correctly. I have however gone through the docs and I seemingly have them set up right. Does anyone have any idea why the loaders are not being recognized correctly?
Package.Json:
{
"name": "jobhound",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon ./server/server.js",
"build": "webpack --watch",
"test": "jest"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Running-On-Fumes/jobhound.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Running-On-Fumes/jobhound/issues"
},
"homepage": "https://github.com/Running-On-Fumes/jobhound#readme",
"dependencies": {
"#babel/core": "^7.15.5",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"#testing-library/react": "^12.1.0",
"babel": "^6.23.0",
"babel-loader": "^8.2.2",
"body-parser": "^1.19.0",
"enzyme": "^3.11.0",
"express": "^4.17.1",
"jest": "^27.2.1",
"nodemon": "^2.0.12",
"path": "^0.12.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"webpack": "^5.53.0"
},
"devDependencies": {
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
"css-loader": "^6.3.0",
"style-loader": "^3.3.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"
}
}
I have seemingly set up my webpack config correctly:
webpack.config
const webpack = require('webpack');
const SRC_DIR = path.join(__dirname, 'client', 'src');
const OUT_DIR = path.join(__dirname, 'client', 'dist');
module.exports = {
entry: path.join(SRC_DIR, 'index.js'),
output: {
path: OUT_DIR,
filename: 'bundle.js'
},
module: {
rules: [
{
test:/\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ["style-loader", "css-loader",
]
},
]
},
mode: 'development',
resolve: {
extensions: ['.js', '.jsx']
},
};
I even imported it to my index.js file:
import React from 'react';
import ReactDom from 'react-dom';
import App from './app';
import { BrowserRouter } from 'react-router-dom';
import './css/NavBar.css';
ReactDom.render(
<BrowserRouter>
<App/>
</BrowserRouter>, document.getElementById('App'));
I am just trying to do a simple change in the CSS file to test it out:
.NavBar {
font-weight: bolder;
}
But I get this error:
NavBar.css:1 Uncaught Error: Module parse failed: Unexpected token (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
> .NavBar {
| font-weight: bolder;
| }
at eval (NavBar.css:1)
at Object../client/src/css/NavBar.css (bundle.js:18)
at __webpack_require__ (bundle.js:424)
at eval (index.js:6)
at Object../client/src/index.js (bundle.js:73)
at __webpack_require__ (bundle.js:424)
at bundle.js:488
at bundle.js:490
Here is my file tree just in case...

The module.exports.resolve.extensions property in your webpack.config only has .js and .jsx. Try adding .css as well.

Webpack throws error when trying to build JSX

There are so many answers to this question on SO, I swear i've tried them all. I am not sure what is wrong with config setup
The Error I get when running webpack in the terminal:
ERROR in ./src/index.js 13:8
Module parse failed: Unexpected token (13:8)
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
| // const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
| return (
> <HomeShell/>
| );
| };
my index.js
import "#babel/polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import HomeShell from "./HomeShell";
const Root = () => {
return (
<HomeShell/>
);
};
ReactDOM.render(<Root />, document.getElementById('#main'));
^^ HomeShell is js file with React Components that are all js files.
My webpack.config.cjs
import path from 'path';
module.exports = {
entry: ["#babel/polyfill", "./src/index.js"],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
target: "web",
mode: 'production',
module: {
rules: [
{
test: /\.m?js$/,
include: /src/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
},
{
test: /\.css$/,
include: /node_modules/,
loader: ['style-loader', 'css-loader'],
}
]
},
};
my .babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
my package.json
{
"name": "site name here",
"version": "1.0.0",
"description": "site desc",
"main": "index.js",
"type": "module",
"repository": {
"type": "git",
"url": "git url"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "issues url"
},
"homepage": "readme url",
"dependencies": {
"#babel/polyfill": "^7.10.1",
"#types/express": "^4.17.6",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"express": "^4.17.1",
"nodemailer": "^6.4.5",
"path": "^0.12.7",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"file-loader": "^5.1.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^3.6.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rm -rf dist && mkdir dist && webpack && babel server -s -d dist",
"clean": "rm -rf dist",
"production": "npm run build && node bin/production",
"start": "npm run production"
}
}
I am far from an expert on react/webpack/babel but this exact setup seems to work fine on another basic app I have running. Not sure what I am doing different between the two apps.

You mentioned that you are using a webpack.config.cjs file, which at the moment anyway, Webpack does not support by default: https://github.com/webpack/webpack-cli/issues/1165
You'd need to explicitly pass --config webpack.config.cjs option to load this file.

I see
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
in your .babelrc file and also in the loader options. Maybe there is a conflict.

React build error: Module build failed (from ./node_modules/babel-loader/lib/index.js):

I am following along with a tutorial and when I try to build react I get an error.
Module build failed (from ./node_modules/babel-loader/lib/index.js)
5 | ReactDOM.render(
> 6 | <App />,
| ^
7 | document.getElementById('root')
8 | );
I found similar issues and I tried to fix the issue based on this but to no avail.
This is my webpack.config.js:
module.exports = {
entry: './index.js',
output:{
path: __dirname,
filename: 'bundle.js'
},
module:{
rules:[
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: '/node_modules/'
}
]
}
}
Below I have package.json, the "devDependencies" are what I have found in previous solutions.
{
"name": "rtsupport",
"version": "1.0.0",
"description": "Realtime support frontend",
"main": "./index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"develop": "webpack --mode development --watch",
"build": "webpack --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"node": "^10.15.2",
"react-dom": "^16.8.4"
},
"devDependencies": {
"#babel/core": "^7.0.0-bridge.0",
"babel": "^5.8.23",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"react": "^16.8.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}
These are my initial "devDependencies"
"devDependencies": {
"#babel/core": "^7.3.4",
"babel": "^5.8.23",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5"
}
My Node version is: v11.10.1
After trying the suggestions with:
rules:[
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
use: [
{ loader: 'babel-loader' }
]
}
]
I still get the same error.

This problem can be solved by setting each babel dependencies
>=7.8.7
"devDependencies": {
"#babel/cli": "^7.13.10",
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"#babel/preset-react": "^7.12.13",
}

ok I think your webpack test needs to include .js files if you plan to use JSX in them:
test: /\.(js|jsx)$/

After a full day of hacking and surfing this site I found a solution.
module:{
rules:[
{
test: /\.jsx?$/,
exclude: '/node_modules/',
loader: 'babel-loader',
query:
{
presets:['react']
}
}
]
}
And the package.json partial:
"devDependencies": {
"#babel/core": "^7.3.4",
"babel": "^5.8.23",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^7.0.2",
"react": "^16.8.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}

with that config you are telling to only "translate" .jsx files, and since you main file is index.js, he is not loading it, try adding this config:
with this you add js and jsx file to be resolved by your loader
rules: [
{
exclude: /node_modules/,
test: /\.js|.jsx?$/,
use: [
{ loader: 'babel-loader' }
]
}
]
my fault i thought you had a babelrc, i forgot you can create a file on same folder level as your wepback.config with ".babelrc" name and here you can specify your loading config, and tell babel to load "react" plugin
{
"presets": [
"stage-0",
"react",
"es2015"
],
"plugins": [
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-rest-spread",
"transform-es2015-destructuring"
],
"env": {
"debug": true
}
}

Django/React - You may need an appropriate loader to handle this file type

I'm having an error running the webpack dev script, this is the error.
This are the codes:
App.js
import React from "react";
import ReactDOM from "react-dom";
import DataProvider from "./DataProvider";
import Table from "./Table";
import Form from "./Form";
const App = () => (
<React.Fragment>
<DataProvider endpoint="api/lead/"
render={data => <Table data={data} />} />
<Form endpoint="api/lead/" />
</React.Fragment>
);
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(<App />, wrapper) : null;
package.json
{
"name": "amazona_project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development ./amazona/frontend/src/index.js --output ./amazona/frontend/static/frontend/main.js",
"build": "webpack --mode production ./amazona/frontend/src/index.js --output ./amazona/frontend/static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {},
"description": ""
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
.babelrc
{
"presets": [
"#babel/preset-env", "#babel/preset-react"
],
"plugins": [
"transform-class-properties"
]
}
I'm sure the problem has something to do with the syntax, but I dont understand which part is wrong in my code. I would really appreaciate the help, thanks in advance.

You will need to setup a .babelrc file and webpack.config.js
The .babelrc file should contain
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
The webpack.config.js should contain
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
You can use this link as reference in setting up your project
https://www.valentinog.com/blog/react-webpack-babel/#How_to_set_up_React_webpack_and_Babel_setting_up_the_project

react-progressbar.js content does not render in react project

I would like to have a circular progress bar in my react.js project. Following kimmobrunfeldt's react-progressbar.js installation notes, I managed to include said library in my project. However, for some reason unknown to me, the actual progress bar does not render. The DOM inspector indicates that the progress bar's wrapper is there, but not its content. No errors show up when building with npm.
Here is my react.js project setup:
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
module.exports = {
entry: [ APP_DIR + '/index.jsx'],
output: { path: BUILD_DIR, filename: 'bundle.js'},
module: {
loaders: [
{ test: /\.jsx?/, include : APP_DIR, loader: 'babel'},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
}
package.json
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel": {
"presets": [
"es2015",
"react"
]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "./node_modules/.bin/webpack -d --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.8",
"json-loader": "^0.5.4",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-progressbar.js": "^0.2.0",
"webpack": "^1.13.3"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.1",
"react": "^0.14.8",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
"webpack-loader-modules": "^1.1.0"
}
}
index.jsx
import React from 'react';
import {render} from 'react-dom';
import progressBar from 'react-progressbar.js';
// ...
// ...
var Circle = progressBar.Circle;
class App extends React.Component {
render () {
return (
<div>
<p> Hello React!</p>
<Circle
progress={1}
text={'test'}
initialAnimate= {true}
containerClassName= {'progressbar-container'}
/>
</div>
);
}
}
// ...
render(<App/>, document.getElementById('app'));

According to the documentation, containerClassName should start with .
<Circle
progress={this.state.progress}
text={'test'}
options={options}
initialAnimate={true}
containerStyle={containerStyle}
containerClassName={'.progressbar'}
/>
Source: https://github.com/kimmobrunfeldt/react-progressbar.js/tree/master
Besides that, I have no clue...