We Keep Coding

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.

Cannot find module 'html-webpack-plguin' React start

I am trying to create a React app that isn't create-react-app and I am running into some issues. After running npm run start I received the "Cannot find module 'html-webpack-plguin'" error. I know it's installed, as I can see it in the node modules folder. I have tried using both npm install and yarn install for this. I have put in in the devDependencies and the regular dependencies, and neither seems to work. Is there something wrong with my webpack file or package.json?
Here is my webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plguin')
module.exports +{
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
Here is my package.json
{
"name": "reactboilerplate",
"version": "1.0.0",
"description": "React Webpack Redux Babel Boilerplate",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "Thomas Baric",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"webpack": "^4.29.3"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}

Well that was easy lol. Error became clear after seeing it as a title to my question. FML!

webpack not generating bundle.js

I am making a web app use react and php and i am using webpack for es6 to js so i generated files but i have a problem about webpack output bundle.js file.
this is my webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: [
'./src/index.jsx'
],
output: {
path: '/dist',
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
}, {
test: /(\.css|.scss)$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
};
this is my package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --history-api-fallback --progress --colors --config ./webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.18",
"css-loader": "^0.28.9",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.7.2",
"react-hot-loader": "^3.1.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {
"bootstrap": "^4.0.0",
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"reactstrap": "^5.0.0-beta"
}
}
why webpack generate and give me a bundle.js into the dist folder ? only saves it to the memory and show it on the localhost. i want use this react app with php but i can not handle to bundle.js.
Where is the problem and why the webpack did not generate the js file.
please help me

Your webpack configuration output filed got problem.
import const path = require('path') first in webpack.config.js and change output filed as below:
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js'
}
And add following script into your package.json in script filed
"build": "webpack -p --progress"
Run npm run build

This is the expected behaviour for webpack dev server. If you wish to generate the output on disk, you need to run webpack, e.g:
"scripts": {
"start": "webpack-dev-server --history-api-fallback ...",
"build": "webpack"
}
then run npm build. For production, you should also set NODE_ENV=production, for example using cross-env:
"build": "cross-env NODE_ENV=production webpack"

Webpack dev server hot reloading not working with reactjs, though i have done "inline:true"?

Why does Hot Module Replacement stop working on webpack dev server?
My package.json file:
{
"name": "routing-react",
"version": "1.0.0",
"description": "Just a little ReactJS Training Ground",
"main": "index.js",
"scripts": {
"start": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "cp src/index.html dist/index.html && webpack -p"
},
"keywords": [
"react"
],
"author": "gd10",
"license": "MIT",
"dependencies": {
"css-loader": "^0.28.9",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-hot-loader": "^3.1.3",
"style-loader": "^0.20.1",
"webpack-hot-middleware": "^2.21.0"
},
"devDependencies": {
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
I have also set:
devserver = {
historyApiFallback: true,
inline: true,
hot: true
}
But it didn't helped.
webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
devServer: {
historyApiFallback: true,
contentBase: './',
inline: true,
hot:true,
port: 3004,
},
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
},
{
test: /\.css?/,
loader:'style-loader!css-loader'
},
]
}
};
module.exports = config;
Previously I had CSS loaders issue and after adding loaders in webpack.config.js I got webpack stopped.
how can I make Hot module work?

You need to activate the Hot Module Replacement Plugin, full instructions: https://webpack.js.org/guides/hot-module-replacement/

Require is not defined using ReactJs with babel and webpack

I'm getting this error on Chrome developer tools:
"Uncaught Reference: Require is not defined"
webpack.config
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
filename: 'app.js',
path: __dirname + "public/scripts"
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["env", "react"]
}
}
]
}
};
package.json
{
"name": "widget",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Diogo Matias",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"npm": "^5.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.3",
"react-leaflet": "^1.7.8"
},
"devDependencies": {
"webpack": "^3.10.0"
}
}
This error comes from the import on my source javascript file where I have:
import {GoogleMap, Marker} from "react-google-maps";
I use the cdn for react and react-dom. I'm used to use live-server and I'm new to webpack. I run with webpack-dev-server on the root directory.
Hope that is enough for you to help me.
Thanks.

Here is a minimum configuration to get you started. Issue npm run start to bring up webpack-dev-server at port 9000. babel-core was missing from your configuration.
project structure
├── build
│   └── index.html
├── package.json
├── src
│   └── app.js
└── webpack.config.js
package.json
{
"name": "widget",
"version": "1.0.0",
"description": "Get started with Webpack!",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "Diogo Matias",
"license": "ISC",
"dependencies": {
"leaflet": "^1.2.0",
"prop-types": "^15.5.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.3",
"react-leaflet": "^1.7.8"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
devServer: {
contentBase: path.join(__dirname, 'build'),
compress: true,
port: 9000
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/
}
]
}
};
.babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 3 Chrome versions"]
}
}]
]
}
build/index.html
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>