I am a react beginner to start learning.
Please check this link, it is a ReactJs environment setup tutorial. I just followed it, and on the last step when I start the server, I'm getting the following errors:
This is my package.json
{
"name": "pacakge",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
}
}
And this is my webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
Replace:
output: {
path:'./',
filename: 'index.js',
},
with:
output: {
path: __dirname + '/',
filename: 'index.js',
},
or better:
path = require('path')
...
output: {
path: path.resolve(__dirname, '/'),
filename: 'index.js',
},
Related
I'am creating a new project. As I completed installing npm packages and ran the basic setup, all worked fine, except, when I made changes in my code and saved the file and moved to browser to see the changes, the page was not reloaded in the browser. I have to refresh page manually to see the new changes.
Here is my package.json file :
{
"name": "resume",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/preset-react": "^7.12.10",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.5.1",
"webpack": "^5.12.2",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"
}
}
Here is my webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { web } = require('webpack')
module.exports = {
mode: 'development',
devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, './dist'),
open: true,
compress: true,
hot: true,
port: 8080,
},
target: 'web',
// entry: {
// main: path.resolve(__dirname, './src/index.js'),
// },
// output: {
// path: path.resolve(__dirname, './dist'),
// filename: '[name].bundle.js',
// },
module: {
rules: [
// JavaScript
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack Boilerplate',
template: path.resolve('./index.html'),
filename: 'index.html', // output file
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
}
I searched the web and it seems like the problem is with webpack-dev-server, but I'am not sure. Plz help.
Update webpack-dev-server version to 4.0.0-beta.0 I had the same issue too.
I have a basic React app (2 small pages and a redux store), which is supposed to be very light. But when building the final bundle, webpack tells me that the bundle is 1.12 MiB, while the recommended limit is 244 KiB. Yet, I have made optimisations, with Terser plugin & code splitting.
Here is my webpack.config.js:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = () => {
const env = require("dotenv").config({ path: __dirname + "/.env" });
return {
mode: "development",
entry: "./src/Index.js",
output: {
path: path.join(__dirname, "./dist"),
filename: "[name].[hash].bundle.js",
publicPath: "/",
},
resolve: {
extensions: [".js", "jsx", ".json"],
alias: {
components: path.resolve(__dirname, "src/components/"),
pages: path.resolve(__dirname, "src/pages/"),
store: path.resolve(__dirname, "src/store/"),
src: path.resolve(__dirname, "src/"),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: { loader: "babel-loader" },
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
{ test: /\.html$/, use: [{ loader: "html-loader" }] },
],
},
devServer: {
historyApiFallback: true,
port: 3000,
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new Dotenv(),
],
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: { chunks: "all" },
},
};
};
And here is my package.json:
{
"name": "app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.10.3",
"#babel/plugin-transform-runtime": "^7.10.3",
"#babel/preset-env": "^7.10.3",
"#babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
"dotenv-webpack": "^1.8.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"terser-webpack-plugin": "^3.0.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
How to fix this?
Package.json this is my package json file.
I have already install npm install --save-dev babel-loader babel-core in my app
/* Package.json*/
{
"name": "tripdetail",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.4",
"webpack-dev-server": "^2.7.1"
},
"dependencies": {
"eslint": "^4.4.1"
},
"description": ""
}
.babelrc this is my babelrc file. I have also configured it by this code -
/*.babelrc */
{
"presets": ["es2015", "es2016", "react"]
}
webpack.config.js this is my webpack config js file. I have also configure module and tested but it is not working.
/webconfig.js code/
'use strict';
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ["css-loader", "sass-loader"],
publicPath: '/dist',
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
)
}]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
stats: 'errors-only',
open: true
},
plugins: [new HtmlWebpackPlugin({
title: 'tripDetailPage',
hash: true,
minify: {
collapseWhitespace: false
},
template: './src/index.html'
}), new ExtractTextPlugin({
filename: "tripDetail.css",
disable: false,
allChunks: true
})]
}
app.js
const css = require('./app.scss');
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
//e('div', null, 'Hello Worlddddd'),
document.getElementById('root')
);
Compiletion ERROR
ERROR in ./src/app.js
Module parse failed: E:\trip-react\src\app.js Unexpected token (10:3)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <div>Hello</div>,
| //e('div', null, 'Hello Worlddddd'),
| document.getElementById('root')
# multi (webpack)-dev-server/client?http://localhost:9000 ./src/app.js
webpack: Failed to compile.
ERROR in ./src/app.js
Have you tried renaming that file to /src/app.jsx ?
Check out resolve.extensions and module.loaders, in your webpack.config.js file -- both should refer to .jsx files.
This error is related to webpack.config.js. Rules was wrongly putted in this file. Here is my correct webconfig.
'use strict';
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ["css-loader", "sass-loader"],
publicPath: '/dist',
})
},
{
test:/\.js$/,
use:'babel-loader',
exclude:/node_modules/
},
{
test:/\.jsx$/,
use:'babel-loader',
exclude:/node_modules/
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
stats: 'errors-only',
open: true
},
plugins: [new HtmlWebpackPlugin({
title: 'tripDetailPage',
hash: true,
minify: {
collapseWhitespace: false
},
template: './src/index.html'
}), new ExtractTextPlugin({
filename: "tripDetail.css",
disable: false,
allChunks: true
}),]
}
So webpack isn't updating any changes I make or rebundling build.js with changes. Pretty frustrating issue. Not sure what the deal is. Could really use some help! Thanks! Code is below.
webpack.config.js
var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");
var config = {
watch: true,
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/only-dev-server',
DEV + "/App.jsx"
],
output: {
path: OUTPUT,
filename: "build.js"
},
module: {
loaders: [{
include: DEV,
loaders: ["react-hot", "babel"],
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
module.exports = config;
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"react": "^15.2.0",
"react-dom": "^15.2.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
I ran ./node_modules/.bin/webpack to get the initial build.
Let me know if you need more information. Thanks again.
React-Hot-Loader can be very specific in its configuration. I would try the minimal successful configuration for React Hot Loader (taking care to use similar pathing and not via variable initialization with path.resolve) :
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/App.jsx'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}]
}
};
Very simple app here. Started with the demo found here, and modified it to use Babel 6. The problem I have is that the output of webpack puts my HTML files in a subdirectory of the output Dist directory.
Starting with this file structure:
Test|
|package.json
|webpack.config.js
|app|
|index.html
|js|
|app.js
|greeting.js
What I end up with after running webpack is this in my dist directory:
dist|
|app.js
|app|
|index.html
Seems odd to me. What I want is this:
dist|
|index.html
|app|
|app.js
Here's the webpack.config.js file:
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
}
],
}
}
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.html",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"file-loader": "^0.8.5",
"react-dom": "^0.14.8",
"webpack": "^1.12.14"
},
"dependencies": {
"react": "^0.14.8"
}
}
I'm close to getting this where I can get to the next step. How do I get webpack to pack the output like I want?
I'm new to webpack, so I don't know if this is the best solution, but this should work (output.path and file loader have been modified) :
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist/app",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=../[name].[ext]",
}
],
}
};
According to the documentation, the context option is only used to resolve the entry point.
One way to do it, is get the htmlwepackplugin, and adjust your config as below. this would also inject the script build, so you dont have to have it on your index.html ;)
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist/app",
},
module: {
plugins: [
new HtmlWebpackPlugin({filename: '../index.html', template: './test/app/index.html', chunksSortMode: 'none'}),
],
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
}
],
}
}