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>
Related
I have been trying to run the following code since 1 week now. I have re-written the same code around 4-5 times in case if I missed something. Tried looking for solutions as well but I am unable to detect what exactly the error is?
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
C:\Users\NFC\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
package.json
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^4.5.0"
}
}
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
.babelrc
{
"presets":["env", "react"]
}
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;
Seems you're using webpack-cli v4, try to update your start script from webpack-dev-server --mode development --open --hot to webpack serve. You can check this issue https://github.com/webpack/webpack-dev-server/issues/2424 on webpack-dev-server for more.
I tried to setup my own toolchain to build a React app. I'm using Webpack with Typescript React.
package.json
{
"name": "library2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint '**/*.{tsx,js,ts}'",
"lint:fix": "eslint --fix '**/*.{tsx,js,ts}'",
"start": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"pg": "^8.3.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.9.5"
},
"devDependencies": {
"#babel/cli": "^7.10.4",
"#babel/core": "^7.10.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/node": "^14.0.20",
"#types/react": "^16.9.41",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.1.0",
"#typescript-eslint/parser": "^3.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.21.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^2.5.1",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/App.tsx',
mode: 'development',
module: {
rules: [
{
test: /\.(|ts|tsx|js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react',
],
plugins: [
'#babel/plugin-proposal-class-properties',
],
},
},
},
{ // rules for css
test: /\.(css|scss)$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js',
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hotOnly: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>
App.tsx
import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
render(<Hello />, document.querySelector('#main'));
Hello.tsx
import React from 'react';
import './hello.scss';
export default class Hello extends React.Component {
vark: number;
test() {
this.vark = 1;
}
render() {
return (
<div className="hello">Hello!</div>
);
}
}
I get the following error when webpack builds (npm run start):
ERROR in ./src/Hello.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/JAAI/Desktop/Library2/src/Hello.tsx: Unexpected token (5:6)
3 |
4 | export default class Hello extends React.Component {
> 5 | vark: number;
| ^
6 |
7 | test() {
8 | this.vark = 1;
at Object._raise (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:757:17)
at Object.raiseWithData (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:750:17)
at Object.raise (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:744:17)
at Object.unexpected (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:8834:16)
at Object.parseClassMemberWithIsStatic (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12169:12)
at Object.parseClassMember (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12062:10)
at /Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:12007:14
at Object.withTopicForbiddingContext (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11078:14)
at Object.parseClassBody (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11984:10)
at Object.parseClass (/Users/JAAI/Desktop/Library2/node_modules/#babel/parser/lib/index.js:11958:22)
# ./src/App.tsx 3:0-28 4:41-46
ℹ ｢wdm｣: Failed to compile.
At first I thought this was because the Webpack env and react presets didn't allow for class properties so I included the class properties plugin but the error persisted. Note that if I remove that line it builds successfully.
Webpack Config:-
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;
App.jsx:-
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
package.json
{
"name": "reacttest",
"version": "1.0.0",
"description": "test app",
"main": "main.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "snehasis",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
}
I am starting the server using npm start command as I have added the start script in package.json. I expect to see "Hello World!!!" on the browser at localhost:8080. But I am getting a 404 on index.html on script include index.js.
Any ideas?
I have no problem whatsoever working on the dev env, hot reloading and everything works fine. Trying to make a production build its proving to be quite challenging, getting nothing but a blank page. There seems to be similar questions on here but I'm not using any html as an entry point. Thanks in advance.
package.json
{
"name": "dc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server -d --content-base public --inline --hot --host 0.0.0.0",
"prod": "webpack -p --progress --config prod.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.9.1",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-css-transition-replace": "^1.1.0",
"react-dom": "^0.14.7",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.12.14"
},
"dependencies": {
"axios": "^0.9.1",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"react": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1"
}
}
production config
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : ["./app/App.js"],
output : {
filename: "bundle.js",
publicPath: 'dist/',
path : path.resolve(__dirname, 'dist/')
},
devtool: 'source-map',
devServer: {
contentBase: 'dist/'
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin("styles.css"),
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true,
},
}),
],
module : {
loaders : [
{ test : /\.jsx?$/, loader : 'babel-loader',
query : {
presets : ['react', 'es2015', 'react-hmre']
}
},
{ test: /\.(jpg|png)$/, exclude: /node_modules/, loader: "file?name=images/[name].[ext]"},
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
{ test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") }
]
}
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
I have been working with a bit different solution. What I have been doing is bundling the files through webpack then use a koa server to serve a static file and then have a npm start script which sets NODE_ENV to production. Take a look:
package.json:
{
"name": "react",
"version": "1.0.0",
"description": "some description",
"main": "index.js",
"scripts": {
"test": "test",
"start": "NODE_ENV=production webpack --progress && NODE_ENV=production node server.js",
"dev": "webpack-dev-server --progress --colors --watch",
"build": "webpack --progress --watch"
},
"author": "your_name",
"license": "ISC",
"dependencies":{
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"copy-webpack-plugin": "^1.1.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"image-webpack-loader": "^1.6.3",
"json-loader": "^0.5.4",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"koa": "2.0.0-alpha.3",
"koa-convert": "1.2.0",
"koa-static": "2.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
server.js:
'use strict';
const port = process.env.PORT || 3000;
const Koa = require('koa');
const serve = require('koa-static');
const convert = require('koa-convert');
const app = new Koa();
const _use = app.use;
app.use = (x) => _use.call(app, convert(x));
app.use(serve('./build'));
const server = app.listen(port, function () {
let host = server.address().address;
let port = server.address().port;
console.log('listening at http://%s:%s', host, port);
});
and finaly webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './main.js',
output: { path: __dirname + "/build/", filename: 'bundle.js' },
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!sass?")
},
{
test: /\.json$/,
loader: "json"
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
new ExtractTextPlugin("main.css"),
new CopyWebpackPlugin([
{
from: __dirname + '/index.html',
to: __dirname + '/index.html'
},
])
]
};
If you will run those with an index.html file and an main.js file rendering some react to it it will run on production :) I recently wrote an article about how exactly my solution looks like. Feel free to take a look: https://medium.com/#TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6
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