I can't figure out why dev server does't want reload page in a browser. My system is OSX.
webpack.config.js
const path = require("path");
module.exports = {
entry: {
//context: path.resolve("dev", "js"),
main: path.resolve("dev", "js", "app.js")
},
output: {
path: path.resolve(__dirname, "public"),
publicPath: path.resolve(__dirname, "public"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
},
devServer: {
contentBase: path.resolve(__dirname, "public"),
watchContentBase: true,
port: 9090,
hot: true,
inline: true,
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
}
package.json
{
"name": "react-sap",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"server": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"webpack": "^3.5.5",
"jquery": "^3.2.1"
}
}
index.html at the "public" directory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack2</title>
<script src="/main.js" defer></script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
After changing app.js I have to manually reload page to see changes. Help plz. I am pretty sure there are simple solution here
P.S. Sorry for my english)
install the module and pass it as a plugin.
https://webpack.js.org/guides/hot-module-replacement/
Related
I have no idea anymore. After updating node.js and webpack, I cannot set reload devServer.
I try with:
mode: "development",
static:
hot: true
and a few more things from google. What am I doing wrong or where is the error? There are no errors in the console. I want to configure webpack to write in ES6, nothing else.
package.json
{
"name": "calc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot",
"build": "webpack -d"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.19.3",
"#babel/preset-env": "^7.19.3",
"babel-loader": "^8.2.5",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
}
}
webpack.config.js
const path = require("path");
const entryPath = ".";
module.exports = {
mode: "development",
entry: `./${entryPath}/js/app.js`,
output: {
filename: "out.js",
path: path.resolve(__dirname, `${entryPath}/build`),
},
r: {
static: path.join(__dirname, `${entryPath}`),
hot: true,
compress: true,
port: 3001,
open: true,
headers: { "Access-Control-Allow-Origin": "*" },
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
],
},
};
directory structure
Node.js version: v18.9.0
NPM version: 8.19.1
Thanks for the answer.
Please provide your webpack verison.
For webpack 5 use
devServer: {
watchFiles: ['src/**/*.php', 'public/**/*'],
}
See details here https://webpack.js.org/configuration/dev-server/#devserverwatchfiles
I am doing some React book examples.
I get following error with below config after running npm run start:
Cannot GET /
package.json
{
"name": "typescript",
"version": "1.0.0",
"description": "",
"main": "zadanie1.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.0"
},
"devDependencies": {
"ts-loader": "^9.3.1",
"typescript": "^4.8.3"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"sourceMap": true,
"removeComments": true
},
}
webpack.config.js
const path = require('path');
module.exports = {
entry: {
main: path.join(__dirname, 'zadanie1.ts'),
},
output: {
filename: "zadanie1.js",
path: __dirname,
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="zadanie1.js" type="text/javascript"></script>
</body>
</html>
zadanie1.ts
document.write("Hello World!");
I have added publicPath: "/" to webpack.config.js but nothing changed.
This example seems pretty easy but somehow this does not work.
Book is from 2021 (it might be outdated in some places as React is changing alot)
I had to add following section into webpack.config.js
[...]
devServer: {
static: {
directory: path.join(__dirname, '/')
}
},
[...]
Im trying to configure webpack for React.
But when i ran "npm run start" i got this error in VSC console:
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
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
| import App from "./components/App";
|
> ReactDOM.render(<App />, document.getElementById("app"));
|
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.export = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx"],
},
module: {
rules: [
{
test: /\.js|\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.html$/,
use: [{ loader: "html-loader" }],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html",
}),
],
devServer: {
static: path.join(__dirname, "dist"),
compress: true,
port: 3000,
},
};
Index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("app"));
Package.json:
{
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"name": "curso-webpack-react",
"description": "",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"prettier": "2.4.1",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/platzi/curso-webpack-react.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/platzi/curso-webpack-react/issues"
},
"homepage": "https://github.com/platzi/curso-webpack-react#readme"
}
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I don't know what to try anymore.
Iv tried to change test: /\.(.js|jsx)$/, to test: /\.js$|jsx/, or test: /\.js|\.jsx$/, but no results.
Iv also tried others solutions to the same problems that iv saw in others stackoverflow publications, but no results tho.
Below is my piece of code for webpack:
module.exports = env => {
return {
entry: './src/index.js',
devtool: "inline-source-map",
output: {
path: path.join(__dirname, 'src'),
filename: 'index.html',
publicPath: path.join(__dirname, 'src'),
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
node: {
fs: "empty"
},
devServer: {
compress: true,
inline: true,
contentBase: './',
port: '8080',
disableHostCheck: true
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
query: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
},
},
{
test: /\.s?css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}
]
},
resolve: {
extensions: ['.js','.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.HashedModuleIdsPlugin(),
]
}
}
Also here is my package.json :
"dependencies": {
"#reactioncommerce/components": "^0.65.1",
"#reactioncommerce/components-context": "^1.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-scripts": "2.1.8",
"reacto-form": "0.0.2",
"styled-components": "^3.4.10"
},
"scripts": {
"start": "webpack --mode development --open --hot",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/preset-env": "^7.4.2",
"react-router-dom": "^5.0.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
THe problem here is that the code compiles correctly and shows no error at all , but doesn't show the line : output is served from localhost:8080
And hence I don't know wether it is actually running or not.But I guess there is some issue with output path or something.Can somebody please point me in the right direction here. Thanks in advance.
Edit :
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
</body>
</html>
The issue is that your input and output are the same. entry should be the path to your(s) entry in your source code, it's your input. output defines options as to where your bundled file will be saved. These are two different files! You write your source code, then you build it into your bundle.
What is recommended is to have /src for your source code and /dist for your product code. Your directory should look like:
/src
/index.js
/index.html
... rest of your source code
/dist
/bundle.js <-- will be generated by webpack
To have this, your webpack config object must look like:
{
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// ...
},
// ...
}
Also, your index.html must reference the bundled file, but don't worry - that is being taken care of by html-webpack-module! Simply don't link any script in /src/index.html!
A very simple React.js app gives this warning:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <div data-reactid="
(server) <div data-reactid="
The problem is that I don't use any server rendering, what I'm aware of. Here is my package.json file:
{
"name": "mprea",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"start": "NODE_ENV=development webpack-dev-server",
"build": "webpack --progress --colors",
"deploy": "NODE_ENV=production webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"css-loader": "~0.23.0",
"exports-loader": "^0.6.2",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4",
"fs": "0.0.2",
"html-webpack-plugin": "^2.7.1",
"imports-loader": "^0.6.5",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"react-bootstrap": "^0.28.1",
"react-router": "^1.0.3",
"react-transform-hmr": "~1.0.1",
"style-loader": "~0.13.0",
"url-loader": "^0.5.6",
"webpack": "~1.12.12",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.7.3"
},
"dependencies": {
"react-dom": "~0.14.6",
"react": "~0.14.6",
"bootstrap": "^3.3.5",
"history": "^1.17.0",
"jquery": "^2.2.0",
"bootstrap-webpack": "0.0.5"
}
}
Here is my webpack file:
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var merge = require('webpack-merge');
var TARGET = process.env.npm_lifecycle_event;
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
process.env.BABEL_ENV = TARGET;
var output_path = ROOT_PATH.concat(process.env.NODE_ENV === 'production' ? '/dist' : '/build');
var common = {
entry: APP_PATH,
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: output_path,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: APP_PATH
},
{
test: /\.jsx?$/,
loaders: ['babel'],
include: APP_PATH
},
{
test: /\.json?$/,
loaders: ['file'],
include: APP_PATH
},
{ test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }
]
},
plugins: [
new HtmlwebpackPlugin({
title: 'test.se',
template: './app/app.html',
output: {path: ROOT_PATH + '/build',
filename: 'app.html'}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
if(TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
host: process.env.HOST,
port: process.env.PORT
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
}
else {
module.exports = common;
}
The warning is displayed even if I build the production variant and with different web servers.
Here is the html-file:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body><div id="app">
</div>
<script src="bundle.js"></script>
</body>
</html>
And finally, the index.jsx file:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Testing!</div>
, document.getElementById('app'));
What am I doing wrong?
Thanks
Check your HTML file that is output by the HTMLwebpackPlugin, the plugin automatically includes the script tag requiring your bundle, if you have this in your source HTML template as you show above it will be in the outputted HTML file twice causing the error you are getting.
You can disable the atomactic injection of your bundle by setting "inject" to false as below:
new HtmlwebpackPlugin({
title: 'test.se',
template: './app/app.html',
inject: false,
output: {path: ROOT_PATH + '/build',
filename: 'app.html'}
}),
You can read more at: https://github.com/ampedandwired/html-webpack-plugin#configuration