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.
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'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
The webpack in my project runs successfully but when I reach to the desired port, it shows me the directory files. You can look at the image for the same.
My webpack.config.js
const path = require('path');
module.exports = {
entry: './app/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
inline: true,
port: 8100
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
}
package.json
{
"name": "react_router",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "vinay",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^2.0.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
main.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
ReactDOM.render(<App />, document.getElementById('root'));
app.js
import React, {Component} from 'react';
import {Router, Route, Link, IndexRoute, hashHistory, browserHistory} from 'react-router';
const App = () => <h1>Hello World</h1>
export default App
output==>
Any help would be appreciated.
edited answer:
I was able to get it to work:
1) create the actual dist directory under the root folder
2) make your output in your webpack.config.js look like this:
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
it will tell webpack from where to serve your application.
3) add the following script to your package.json
"build": "webpack -p"
it will build the bundle.js file
also, you will need an index.html file in your dist directory that looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Application<title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
then, you run your build script and after that you can run the webpack server and it should work
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'm trying to put together a react application with the minimum tools. My electron will load 'hello react' with the following:
Note the links in react script are wrong because stackoverflow wont allow the fb.me
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title text="">Electron / Reactjs</title>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<h1> Hello electron root</h1>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
Yet if I pull the CDN script tags out, the hello, react doesn't load and i have no errors in dev console or terminal. Here is my package json and my webpack (both in root directory)
package json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "My Template Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"babel": {
"presets": ["es2015", "stage-0", "react"]
},
"repository": {
"type": "git",
"url": "https://github.com/jtlindsey/<project-name>.git"
},
"author": "J Travis Lindsey",
"license": "Apache-2.0",
"bugs": "https://github.com/jtlindsey/<project-name>/issues",
"homepage": "https://github.com/jtlindsey/<project-name>#readme",
"devDependencies": {
"electron-packager": "^7.1.0",
"electron-prebuilt": "^1.2.5",
"express": "^4.14.0",
"file-loader": "^0.9.0",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.0",
"webpack-target-electron-renderer": "^0.4.0"
},
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"flux": "^2.1.1",
"react": "^15.1.0",
"react-dom": "^15.1.0"
}
}
webpack.config.js
module.exports = {
context: __dirname + '/,
entry: [
'babel-polyfill',
'./index.js',
html: "./index.html",
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]"
}
]
},
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
plugins: []
};
The package.json has a lot more in it that I'm making use of because of things I don't understand. I have seen the react electron template but there isn't enough documentation there for me to know what is necessary to use react flux and electron and what is for productivity, rapid development, css, etc.
Can someone provide a full example of what to add to a basic electron app to use with React and Flux? Maybe a slim hello world example with no styling?
I've been able to get a react web app working. And I've been able to build an electron app. But I'm going in circles trying to build an electron app using react and flux from npm rather than a CDN like I would do with a web app. What am i missing?
Here's everything you need for the simplest React application.
<div id="app"></div>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script>
ReactDOM.render(
React.createElement('h1', null, 'Hello world'),
document.getElementById('app');
);
</script>
Once that works, then start to integrate the other parts you'll need.
Start by moving the script tag out to a separate file and use Webpack to bundle it.
// src/app.js
ReactDOM.render(
React.createElement('h1', null, 'Hello world'),
document.getElementById('app');
);
You'll need a Webpack config that looks something like this.
// webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
};
Run webpack to build the bundle and add a script tag that references bundle.js to your index.html file.
Once this is working you can focus on getting the Babel transform to work. You'll need to augment your Webpack config with the Babel loader.
module.exports = {
entry: './src/app.js',
// ...
module: {
loaders: [
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: { presets: ['es2015', 'react'] }
]
}
};
At this point you should be able to convert your app.js file to use JSX and ES6 and Babel will convert it so that bundle.js is ready to be run in Electron.