I've created a bundle of my react app using webpack as shown below:
My webpack.config.js :
const path = require('path');
const glob = require("glob");
const { SourceMapDevToolPlugin } = require("webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
mode: "development",
entry: glob.sync('./App.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: [/node_modules/],
options: {
presets: ['#babel/env', '#babel/react'],
plugins: ['transform-class-properties']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract(
{
fallback: 'style-loader',
use: ['css-loader']
})
},
{
test: /\.tsx$/,
use: ['source-map-loader']
},
{
test: /\.(eot|woff|woff2|ttf|svg|gif|png)$/, loader: "file-loader"
}
]
},
plugins: [
new ExtractTextPlugin({filename: 'style.css'})
]
};
Here is my package.json:
{
"name": "demo",
"version": "0.0.11",
"private": true,
"dependencies": {
"#mycompany/picl": "^0.0.12-dev",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^14.2.0",
"babel-plugin-transform-class-properties": "6.24.1",
"css-loader": "1.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "^5.0.1",
"style-loader": "0.21.0",
"web-vitals": "^2.1.4",
"webpack": "4.17.1",
"webpack-cli": "3.1.0"
},
"scripts": {
"build": "webpack",
"test": "react-scripts test",
"dev": "webpack --mode development ./src/App.js --output ./static/built/bundle.js --watch"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-loader": "8.0.0",
"file-loader": "2.0.0",
"html-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "0.6.0",
"miragejs": "^0.1.44",
"source-map-loader": "1.0.0"
}
}
Running yarn run dev has generated a bundle.js, style.css and a .svg file inside static\build folder. However, I'm not sure how do I attach this bundle.js with a HTML div tag as I want to display this react app bundle in a simple HTML/Javascript app.
I looked at this tutorial. But they are adding a dom container inside their like_button.js but i don't have that option since my js file which is bundle.js is getting generated from my react app. Do I need to do something different to generate a bundle.js in such a manner that it can get attached to an HTML div?
I was planning to include the bundle and css like this in my html code as shown below:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>Testing Jan 17</title>
<link rel="stylesheet" href="built/style.css"/>
</head>
<body>
<div id="reactAppDisplay"></div>
<script src="built/bundle.js"></script>
</body>
</html>
But I'm not sure how at the time of generating bundle.js I should attache my app to the id reactAppDisplay so that my react app can be displayed on the web brwser?
All you need do is modify your index.jsx file to look like the following before building:
import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById('reactAppDisplay')
);
this will compile your react app and append the result to the HTML element which id is reactAppDisplay
Related
I am using webpack with react. I have set up config for both production and development. I am getting this error in my src/index.js file:
ERROR in ./src/index.js 11:1
Module parse failed: Unexpected token (11:1)
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
index.js
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);
reportWebVitals();
package.json
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://127.0.0.1:9000",
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.1.2",
"bootstrap": "^5.1.0",
"bootstrap-css-only": "^4.4.1",
"dotenv": "^16.0.3",
"history": "^5.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"react-twitter-login": "^1.5.0",
"reactstrap": "^9.1.4",
"universal-cookie": "^4.0.4",
"web-vitals": "^2.1.4",
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0"
},
"scripts": {
"start": "webpack serve",
"build": "webpack",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.20.2",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.0",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.2",
"node-sass": "^7.0.3",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.3",
"saas": "^1.0.0",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"webpack-dev-server": "^4.11.1"
}
}
webpack.common.js
const path = require("./path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const paths = require("./paths");
module.exports = {
// Where webpack looks to start building the bundle
entry: [paths.src + "/index.js"],
// Where webpack outputs the assets and bundles
output: {
path: paths.build,
filename: "[name].bundle.js",
publicPath: "/",
},
// Customize the webpack build process
plugins: [
// Removes/cleans build folders and unused assets when rebuilding
new CleanWebpackPlugin(),
// Copies files from target to destination folder
new CopyWebpackPlugin({
patterns: [
{
from: paths.public,
to: "assets",
globOptions: {
ignore: ["*.DS_Store"],
},
noErrorOnMissing: true,
},
],
}),
// Generates an HTML file from a template
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
// new HtmlWebpackPlugin({
// title: "webpack Boilerplate",
// favicon: paths.src + "/images/favicon.png",
// template: paths.src + "/template.html", // template file
// filename: "index.html", // output file
// }),
],
// Determine how modules within the project are treated
module: {
rules: [
// JavaScript: Use Babel to transpile JavaScript files
{ test: /\.(js|jsx)$/, use: ["babel-loader"] },
// Images: Copy image files to build folder
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },
// Fonts and SVGs: Inline files
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
],
},
resolve: {
modules: [paths.src, "node_modules"],
extensions: [".js", ".jsx", ".json"],
alias: {
"#": paths.src,
assets: paths.public,
},
},
};
webpack.dev.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common");
module.exports = merge(common, {
// Set the mode to development or production
mode: "development",
// Control how source maps are generated
devtool: "inline-source-map",
// Spin up a server for quick development
devServer: {
historyApiFallback: true,
open: true,
compress: true,
hot: true,
port: 3000,
},
module: {
rules: [
// Styles: Inject CSS into the head with source maps
{
test: /\.(sass|scss|css)$/,
use: [
"style-loader",
{
loader: "css-loader",
options: { sourceMap: true, importLoaders: 1, modules: false },
},
{ loader: "postcss-loader", options: { sourceMap: true } },
{ loader: "sass-loader", options: { sourceMap: true } },
],
},
],
},
});
.babelrc
{
"presets": ["#babel/preset-env","#babel/preset-react", "react"],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
./public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
<App/ > is a react class component
webpack.common.js,webpack.dev.js, webpack.prod.js are all in one folder "config"
Your npm script is not targeting your config file.
"scripts": {
"start": "webpack serve --config webpack.dev.js",
"build": "webpack --config webpack.prod.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
you are missing rule for js/jsx
{ test: /\.(js|jsx)/, loader: "babel-loader", exclude: /node_modules/ },
you have to npm install babel-loader
I am having trouble getting my MERN boilerplate set up. I'm still learning so the answer may be obvious but I can't find an answer for the current version of webpack, react, babel. I am getting this error when I npm run dev:
Module parse failed: Unexpected token (8:2)
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
|
| ReactDOM.render(
> <React.StrictMode>
| <App />
| </React.StrictMode>,
webpack 5.4.0 compiled with 1 error in 231 ms
Which I have figured out means that the loader is not configured; however, I have this :
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../css/index.css';
import App from '../components/App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
home: './client/index.js',
// add pages here with link to the js file for each
},
output: {
path: path.resolve(__dirname, 'client'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react'
]
}
}]
},
{
test: /\\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
}
}
package.json
{
"name": "mern-boilerplate",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.1",
"#testing-library/user-event": "^12.2.0",
"express": "^4.17.1",
"mongoose": "^5.10.13",
"nodemon": "^2.0.6",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"webpack": "webpack",
"dev": "npm run webpack && nodemon --exec babel-node --bin/www",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.12.1",
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"axios": "^0.21.0",
"babel-loader": "^8.1.0",
"body-parser": "^1.19.0",
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
}
}
So, as far as I can tell I have the appropriate #babel/preset-react installed, and the correct webpack dependencies and loaders but webpack hangs with the error at <React.StrictMode>
I am struggling here and would appreciate any help you guys can give me.
Thanks in advance.
Chris
I'm trying to deploy my app to my website but it deploys without errors in console but blank html page. The following are some of my files.
package.json:
{
"name": "name-here",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.13",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-day-picker": "^7.4.8",
"react-device-detect": "^1.12.1",
"react-dom": "^16.13.1",
"react-hook-form": "^5.6.2",
"react-icons": "^3.10.0",
"react-native-vector-icons": "^6.6.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-time-picker": "^4.0.1",
"react-web-vector-icons": "^1.0.2",
"requirejs": "^2.3.6"
},
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"babel-preset-expo": "~8.1.0",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"react-scripts": "^3.4.1",
"ttf-loader": "^1.0.2",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "src/index.js"),
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "bundle.js",
},
devServer: {
contentBase: "./dist",
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
exclude: /node_modules/,
loader: "url-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: "html-loader",
},
],
},
{
test: /\.(woff|woff2|eot|ttf)$/,
exclude: /node_modules/,
loader: "url-loader?limit=100000",
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "./index.html",
}),
],
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
index.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Name here</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '../src/App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Could someone please guide me to a solution? I have generated a build folder and dist folder. It builds successfully.
Your index.html page does not load any js assets. So, it makes sense that you are seeing a blank page.
Might I recommend using create-react-app for bootstrapping a new React project. It gives you a npm run build command, which will create a ready-to-deploy version of your app in the build folder.
My error is :
"ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/cource/React project/webpacktutorial/src/index.js: Unexpected token (7:16)"
I don't know why this error occurs every time I do so may thing for webpack,
I use CSS loader, babel loader or many loaders, but this thing is still not solved.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
webpack.config.js
const path = require( 'path');
module.exports = {
mode: 'none',
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'App.js',
path: path.join(__dirname, '/dist')},
module:{
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}]
}
}
package.json
{
"name": "webpacktutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "webpack-dev-server",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"html-webpack-plugin": "3.2.0",
"react-hot-loader": "^4.11.1",
"webpack": "4.16.2",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5"
}
}
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Try to change Your module section with this, this is more stable option in my opinion:
const path = require( 'path');
module.exports = {
mode: 'none',
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'App.js',
path: path.join(__dirname, '/dist')},
module:{
loaders:[{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}]
}
}
You can try my webpack config
module.exports = {
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
}
};
Full config can be view here
My babel.rc
{
"presets": ["es2015", "react"],
"plugins": [
"transform-es2015-destructuring",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}
My package.json dependency
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "8.2.6",
"babel-loader": "7.1.5",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1"
Source code
I was able to replicate your exact error after creating my own repository using your package.json. I was able to fix the error:
"ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/cource/React project/webpacktutorial/src/index.js: Unexpected token (7:16)"
by adding my own .babelrc at the root of my directory. My .babelrc looks like this:
{
"presets": ["env", "react"]
}
After, I received an error regarding css-loader. To solve this, I did:
npm i -D style-loader css-loader
to get the packages and added another rule to webpack.config.js:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
I have been following a course on Udemy.com and have run into a problem that I am unable to fix. I have webpack installed as well as babel and followed the instructions through a second time to double check that I didn't make a mistake.
When trying to run this code in my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>HELLO!</div>, document.getElementById('root')
);
I get the Error:
ERROR in ./app/index.js
Module parse failed: /Users/Kyle/Documents/React Native Workspace/es6Project/app/index.js Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <div>HELLO!</div>, document.getElementById('root')
| );
|
# multi (webpack)-dev-server/client?http://localhost:3000 ./app/index.js
Here is my package.json:
{
"name": "es6Project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"babel": {
"presets": [
"es2015",
"es2016",
"es2017",
"react"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.0.0",
"react-bootstrap": "^0.31.3",
"react-dom": "^16.0.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
Here is my webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: ['./app/index.js'],
output: {
path: __dirname + '.build',
filename: 'bundle.js'
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
}
})
],
devServer: {
port: 3000,
contentBase: './build',
inline: true
}
}
Your webpack configuration is wrong. The error you are getting is regarding JSX, being unable to be parsed due to misconfiguration.
Also since you are creating a new project, why are you using a plugin that its purpose is to migrate from webpack 1.x versions to 2.x ?
If you use webpack version 2.x modify module.exports to contain:
module: {
rules: [
{
test: /\.(js)$/,
use:[{
loader: 'babel-loader',
query: {
compact: false,
presets: [["es2015", {"modules": false, "loose" : true}], 'react']
}
}]
}
]
}
check your application where you have rendering your app.
check you html file. the code which you have return it is good.
please go thorugh reactjs tutorial point
https://www.tutorialspoint.com/reactjs/reactjs_overview.htm