We Keep Coding

react webpack breaks when i import

so I'm having a lot of trouble configuring webpack on a react app that I have to setup from scratch. The issue is that when I import axios in my App.js webpack fails without any errors, it says that it was compiled successfully but only serves the bare index.html and if I just comment out the axios import line it goes back to normal here's my code bellow:
App.js
import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
//import axios from 'axios'
import Login from './Components/Login'
import Test from './Components/Test'
import './Styles/App.css'
const App = () => {
const [user, setUser] = React.useState(true)
const isUserValid = () => {
}
return (
<div className="app">
<Router>
{!user ? (
<Login />
) : (
<>
<div className="app__body">
<Switch>
<Route path="/"><Test /></Route>
</Switch>
</div>
</>
)}
</Router>
</div>
);
};
export default App;
package.json
{
"name": "project",
"version": "1.0.0",
"description": "base react app",
"main": "index.js",
"scripts": {
"start": "webpack serve --hot --open --mode development --client-logging verbose",
"build": "webpack --mode=production"
},
"author": "",
"license": "ISC",
"dependencies": {
"#hookform/resolvers": "^2.8.2",
"#material-ui/core": "^4.12.3",
"axios": "^0.23.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.17.5",
"react-router-dom": "^5.3.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/plugin-transform-runtime": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.4.0",
"css-minimizer-webpack-plugin": "^3.1.1",
"eslint-webpack-plugin": "^3.0.1",
"html-webpack-plugin": "^5.4.0",
"mini-css-extract-plugin": "^2.4.3",
"style-loader": "^3.3.0",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}
webpack.config.js
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
devServer: {
client: {
logging: 'info',
},
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
resolve: {
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
react: path.join(__dirname, 'node_modules', 'react'),
},
extensions: ["*", ".js", ".jsx", ".scss"],
fallback: {
assert: false,
http: false,
https: false,
zlib: false,
tty: false,
util: false,
fs: false,
net: false,
stream: false
}
},
target: "web",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: { loader: 'babel-loader', },
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: ['file-loader']
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/styles.css',
}),
new HtmlWebPackPlugin({
template: './public/index.html',
}),
],
};
I really would aprreciate if anyone could help solve this problem it's been driving me crazy.

Appropriate loader error on index.js

I'm stuck on this same error and I need fresh eyes for help.... I'm confused on the "appropriate loader". I was thinking this was from an improper regular expression in the webpack file. I checked the babel docs and this issue for guidance.
This is the error...
ERROR in ./src/index.js
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
# multi (webpack)-dev-server/client?http://localhost:8080 ./src
This is my src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root'))
.babelrc
{
"presets": ["env", "react"],
"env": {
"development": {
"plugins": [["react-transform",{
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
webpack.dev.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/',
},
module: {
rules: [
{ test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: [path.resolve(__dirname, "src")]
}
],
},
devServer: {
historyApiFallback: true,
inline: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({template: 'src/index.html'}),
new webpack.HotModuleReplacementPlugin()
],
}
and my package.json
{
"name": "webpack-starter-kit",
"version": "1.0.0",
"description": "starter files for basic development and production using React, Babel, Webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --progress --mode=development",
"build": "webpack --mode=production"
},
"author": "Kevin Turney",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.0.7",
"postcss-loader": "^2.1.2",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.20.3",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.1"
}
}

webpack autobuild/auto serve application

i am using this webpack project template from here
to run it i use npm run serve .how can I add auto build/serve when files are changed. is it something to do with webpack or npm? .i am new to this javascript tooling & searching on google gives lots of options which is overloaded with information & configurations each different.
attaching the webpack config:
const path = require('path')
const webpack = require('webpack')
module.exports = env => {
return {
entry: {
main: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: "/"
},
mode: env && env.production ? 'production' : 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: [/\.vert$/, /\.frag$/],
use: 'raw-loader'
}
]
},
devServer
: {
contentBase: './dist'
},
plugins: [
new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true)
})
]
}
}
my package.json file:
{
"name": "phaser3-webpack",
"version": "1.0.0",
"description": "A basic Phaser 3 starter project",
"main": "index.js",
"scripts": {
"build": "webpack",
"build:production": "webpack --env.production",
"clean": "rimraf dist/bundle.js",
"watch": "webpack --watch",
"serve": "webpack-dev-server"
},
"keywords": [
"phaser",
"webpack",
"es6"
],
"author": "John Cheesman",
"license": "MIT",
"dependencies": {
"phaser": "^3.1.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
}
}

React code is not running when using Webpack, React, Babel combination

I've been following Petr Tichy (#ihatetomatoes) Webpack 2 tutorial series, and have got to the this vid which covers installing React and Babel.
I've gone over the code with a fine tooth comb and spent a couple of hours googling but I just cannot get my code to perform in the expected way. The React method in my app.js file does not execute.
It should render "Hello World" into the root element of the index page, but I get nothing.
This is what I have...
./src/app.js
const css = require("./styles.scss");
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
./src/index.html
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js
const HTMLWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract( {
fallback: 'style-loader',
use: ['css-loader','sass-loader']
} )
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
plugins: [
new HTMLWebpackPlugin({
title: "IWTE",
template: './src/index.html',
minify: {
collapseWhitespace: true,
},
hash: true
}),
new ExtractTextPlugin("styles.css")
],
devServer: {
contentBase: "./dist",
compress: true,
hot: true,
open: true
},
}
.babelrc
{
"presets": ["es2015","react"]
}
package.json
{
"name": "creator",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "MIT",
"private": true,
"scripts": {
"dev": "webpack-dev-server --progress --colors",
"prod": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"eslint": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
Any advice or suggestions on what route to follow to debug this is greatly appreciated! I'm a relative noob to frontend dev. Thanks!

Inside of your package.json make a change as :
"scripts": {
"dev": "webpack-dev-server --hot --progress --colors",
"prod": "webpack -p"
}
You need to add --hot inside of your dev commmand to enable hot reloading.
Let me know if it doesn't work. Cheers!

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...