I'm trying to set a webpack4 and React boilerplate, but facing issue rendering the index.html. For example, when I updated the title of the index.html and the index.html in /dist folder is not updated, and only title is rendered while nothing in index.js is rendered. Please help take a look with below details in my project.
package.json
{
"name": "react-webpack-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"redux-immutable-state-invariant": "1.2.3",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"bootstrap": "^4.1.1",
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-redux": "^5.0.7",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"redux": "3.5.2",
"redux-thunk": "2.0.1"
}
}
webpack.config.js:
// state rules for babel loader
// This plugin will generate html files with scripts injected
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader" // it will look for .babelrc
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000
}
}
}
]
},
plugins: [htmlPlugin]
};
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>React 2</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
index.js:
import React from "react";
import {ReactDOM} from 'react-dom';
console.log('loading index js');
const App = () => {
return (
<div>
<h3>Our Application Is Alive</h3>
<p>This isn’t reality. This — is fantasy.</p>
<p>Yes I am quoting Star Trek I cant help it.</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('index'));
After build, the ./dist/index.html is not updated, see content:
<!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>React and Webpack4</title>
</head>
<body>
<section id="index"></section>
<script type="text/javascript" src="main.js"></script></body>
</html>
below are found in compilation message:
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html]
327 bytes {0} [built]
The webpack config needs to have an entry and optional output (req for multiple entries). It doesn't know which entries need to be added to index.html.
As as example in the docs:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist'
}
}
It will add the index.js to your index.html file.
As i just reported here https://github.com/jantimon/html-webpack-plugin/issues/1259
the property syntax is "fileName" and not "filename"
This is a meaningless error in webpack 4, runing with an earlier version of webpack like 3.0.7 or ignoring the error with stats: {
children: false,
}
will fix this https://github.com/jantimon/html-webpack-plugin/issues/895
Related
My React app throws 404 errors in production when accessing static files (stylesheets, utilities, and more). The development environment works fine. After debugging for several days and further research I believe it's a webpack pathing issue as my understanding of build path and webpack.output is still lacking despite my research on webpack.js.org. After referencing other posts, I still can't grasp this final concept for bundling applications. All help is appreciated. See below for Things tried, and Posts referenced, and Notes for my process. Thank you.
Things tried:
Added "homepage" property in package.json pointing to "https://my_ghub_username.github.io/project_repo/"
Changed "homepage" property to "."
Changing React router to <HashRouter/> ensuring it imported correctly.
Pushed my latest changes to main before deploying my app to GH pages again
Added package.json scripts to pre-deploy, deploy, && build
Posts/Guides Referenced
How to deploy a React app to GitHub Pages
https://create-react-app.dev/docs/deployment/#github-pages-https-pagesgithubcom
Can't deploy webpack to gh-pages (react app)
I attached snippets of relevant code package.json(I), webpack.dev/prod/common.js(II), index.html(III), file tree(IV), and errors(V) in chrome tools.
(I)
{
"name": "digital-nomad",
"version": "1.2.2",
"description": "An immersive experience to experience life in major cities!",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"build": "webpack --config webpack.prod.js",
"start": "webpack serve --config webpack.dev.js"
},
"homepage": ".",
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"gh-pages": "^3.1.0",
"googleapis": "^64.0.0",
"inline-source-map": "^0.6.2",
"mini-css-extract-plugin": "^1.3.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"webpack-cli": "^4.1.0",
"webpack-merge": "^5.4.1"
},
"devDependencies": {
"css-loader": "^5.0.0",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.2.0",
"webpack-dev-server": "^3.11.0"
}
}
(IIA)
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './',
compress: true,
open: true,
port: 8080,
watchContentBase: true,
historyApiFallback: true,
}
})
(IIB)
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: "production",
devtool: "source-map",
})
(IIC)
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
title: 'Production',
template: __dirname + '/index.html',
filename: 'index.html',
inject: 'body',
favicon: "favicon.png"
})
module.exports = {
entry: path.resolve(__dirname, "src", "index.jsx" ),
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: './'
},
module: {
rules: [
{ test: /\.jsx?$/, exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: { presets: ['#babel/env', '#babel/react'] }
},
},
{ test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' }
},
'css-loader'
],
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),
HTMLWebpackPluginConfig
],
resolve: {
extensions: [".js", ".jsx", ".css", "*"]
},
performance: {
hints: false
},
stats: {
errorDetails: true,
warnings: true,
colors: true,
},
};
(III)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<!-- youtube video API -->
<script rel='preload' src="https://www.youtube.com/iframe_api"></script>
<!-- youtube data API -->
<script rel='preload' src="https://apis.google.com/js/api.js"></script>
<script defer src="./src/utils/YTVideoAPI.js"></script>
<script defer src="./src/utils/YTDataAPI.js"></script>
<script src="/dist/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="./src/stylesheets/player.css">
<link rel="stylesheet" type="text/css" href="./src/stylesheets/root.css">
<link rel="stylesheet" type="text/css" href="./src/stylesheets/controls.css">
<title>Digital Nomad</title>
</head>
<body>.
<div id="root"></div>
</body>
</html>
(IV)
FileTree
(V)
GET https://username.github.io/project_name/src/stylesheets/player.css net::ERR_ABORTED 404
Note
I tried my hand over the past couple of days with alternative solutions like utilizing a 404 page to redirect to my app while still using Browser router as a potential solution but not understanding this last aspect of webpack is killing me since I know I can use webpack to my advantage. ( I really want to better conceptualize webpack pathing to improve existing apps ).
Lastly, any feedback on code quality, convention, and implementation is extremely welcome.
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.
So I´m using reactstrap and i´ve already installed the dependencies Bootstrap and Reactstrap. I also pasted the CDN´s in the html file.
I think the problem may be with the webpack config, but I´m not sure.
I´m trying to render a button but it doesnt show up with its styles, only a basic html button.
So this is the what I have:
App.jsx:
import React from 'react'
import { Button } from 'reactstrap';
class App extends React.Component {
render() {
return (
<div>
<Button></Button>
</div>
)
}
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './component/App';
//import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
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>myDesk</title>
</head>
<body>
<div id='root'></div>
<!-- Main version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js"></script>
<!-- All optional dependencies version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
</body>
</html>
Webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
entry: './assets/src/index.js'
},
output: {
path: __dirname + './assets/src/index.html',
filename: 'bundle.js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.(js|jsx)$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: 'assets/src/index.html'
})
]
};
package.json:
{
"name": "example",
"private": true,
"version": "0.0.0",
"description": "a Sails application",
"keywords": [],
"dependencies": {
"#sailshq/connect-redis": "^3.2.1",
"#sailshq/lodash": "^3.10.3",
"#sailshq/socket.io-redis": "^5.2.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"reactstrap": "^8.0.1",
"sails": "^1.2.3",
"sails-hook-apianalytics": "^2.0.3",
"sails-hook-organics": "^0.16.0",
"sails-hook-orm": "^2.1.1",
"sails-hook-sockets": "^2.0.0",
"sails-mongo": "^1.0.1"
},
"devDependencies": {
"eslint": "5.16.0",
"#babel/cli": "^7.5.0",
"#babel/core": "^7.5.4",
"#babel/preset-env": "^7.5.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"grunt": "1.0.4",
"html-webpack-plugin": "^3.2.0",
"htmlhint": "0.11.0",
"lesshint": "6.3.6",
"npm-run-all": "^4.1.5",
"rimraf": "^2.6.3",
"sails-hook-grunt": "^4.0.0",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
},
"scripts": {
"start": "NODE_ENV=production node app.js",
"start:server": "nodemon app.js",
"start:client": "webpack-dev-server --mode development --open",
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
"lint": "./node_modules/eslint/bin/eslint.js . --max-warnings=0 --report-unused-disable-directives && echo '✔ Your .js files look good.'",
"custom-tests": "echo \"(No other custom tests yet.)\" && echo"
},
"main": "app.js",
"repository": {
"type": "git",
"url": "git://github.com/michalruzicka/example.git"
},
"author": "michalruzicka",
"license": "",
"engines": {
"node": "^10.15"
}
}
Please notice that I´ve commented the import bootsrap from the index.js becouse it leads to the following error:
ERROR in ./assets/src/index.js
Module not found: Error: Can't resolve 'style-loader'
I'm trying to setup a react web app with webpack 4, but I can't make it working, I get "Uncaught Invariant Violation: Target container is not a DOM element." console error.
I spent last 2 days trying everything and I've read all similar problems here in stackoverflow but nothing worked for me.
It should be a stupid bug (a typo or bad config) but I can't see it, for some reason it can't find my html file or div element with 'app' id.
My project structure:
This is the generated html by html webpack plugin:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
My html template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id='app'></div>
</body>
</html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
App.js:
import React from 'react';
const App = () => {
return (
<div>
{'foobar'}
</div>
);
};
export default App;
webpack config:
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebPackPlugin({
template: `./src/index.html`,
filename: `index.html`
})
]
};
I copied the code you provided with the same file structure (not including the jest and eslint files) you had and it successfully ran. Therefore, it's probably the inconsistencies in your webpack or babel versions that's causing the bug. Maybe you can try looking at my package.json compared to yours. Hope this helps!
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"http-server": "^0.11.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I found the solution.
I was importing a component from one of my ui projects in App.js, I removed it an now is working fine.
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?