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, '/')
}
},
[...]
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
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.
After setting up of my reactjs environment, my first hello world does not display the proper output.
This is the output after successfully compiled
output after successfully compiled
//This is my package.json file
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot",
"build": "webpack -d && cp src/index.html dist/index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"lodash": "^4.17.5",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"lodash": "^4.17.5",
"react": "^16.3.1",
"react-dom": "^16.3.1"
}
}
//This is my webpack.config.js file
var path = require("path");
var webpack = require('webpack');
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
mode: 'development',
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
performance: {
hints: false
},
module: {
rules: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015"]
}
}
]
}
};
module.exports = config;
// this is my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<p>hello, my name is Oldrick</p>,
document.getElementById('firstapp')
);
//this is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="firstapp"></div>
<script type="/app/bundle.js"></script>
</body>
</html>
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/
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