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.

'webpack' not recognizing when running within the project

When I try to run 'webpack' within the project the command line displays the following error:
'webpack' is not recognized as an internal or external command, operable program or batch file.
I have installed webpack with the command,
npm install webpack babel-core babel loader babel-preset-es2015 babel-preset-react react react-dom --save
Even though I tried this accepted answer , it comes with another error.
webpack.config.js file
module.exports = {
entry: './src/index.js',
output: {
path: './dist',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}}
package.json file
{
"name": "dummytextgen",
"version": "1.0.0",
"description": "Simple dummy text generator",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"webpack": "^4.5.0"
},
"devDependencies": {
"webpack-cli": "^2.0.14"
}
}
Using OS - Windows 8 ,
npm version - 5.6.0

You might try to give the exact path to the webpack binary when you try to execute weback from within your project folder:
node_modules\.bin\webpack

As per the screenshot you need to update the rules ,I have updated the configuration file its working fine. Please go through.
webpack.config.js
var path=require('path')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + "/dist",
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
}}
package.json
{
"name": "dummytextgen",
"version": "1.0.0",
"description": "Simple dummy text generator",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "webpack --config webpack.config.js --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"webpack": "^4.5.0"
},
"devDependencies": {
"webpack-cli": "^2.0.14"
}
}

npm install webpack webpack-cli -g
should help

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"

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!

Minified React with Webpack is not working

I am developing a web app in React using Webpack. I have followed this guide to generate bundle.js in production mode, but it is not working. I always get:
Warning: It looks like you're using a minified copy of the development
build of React. When deploying React apps to production, make sure to
use the production build which skips development warnings and is
faster.
This is my 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');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//FOR CSS
var config = {
devtool:'cheap-module-source-map',
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]')
}
]
},
plugins: [
new ExtractTextPlugin('styles.css', {allChunks: false}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: true
}
})
]
};
module.exports = config;
And this is the package.json file I am using:
{
"name": "p12uibetajsx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack -d",
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.18.2",
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1",
"webpack-combine-loaders": "^2.0.3"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-responsive-carousel": "^3.0.21",
"webpack": "^1.13.3",
"webpack-combine-loaders": "^2.0.3"
}
}
Is there anything else I need to configure? Am I missing something?
Thank you very much.