Menu
I had this working, can't remember what I changed and now the page loads but no react is rendered onto the screen. Not sure where the error is. No errors occur when I run webpack -m followed by npm start
webapp folder is like this...
here are the important files
webpack
module.exports = {
entry: './app/App.js',
output: {
path: './public',
filename: 'bundle.js',
},
devServer: {
inline:true,
contentBase: './public',
port: 3333
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}
package.json
{
"name": "newaccount",
"version": "1.0.0",
"description": "a form submission for new accounts",
"main": "App.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "---",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"html-webpack-plugin": "^2.24.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
.babelrc
{
"presets": [
"es2015",
"react"
]
}
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Testing extends Component {
render() {
return (
<div>
<h3>JUST A TEST</h3>
</div>
)
}
}
ReactDOM.render(<Testing />, document.getElementById('app'));
I have ever tried making the Component Testing an ES6 const like...
const Testing = () => return <div><h3>JUST A TEST</h3></div>
and still can't get anything to show up on the localhost:3333 or the full path from my computer.
Thanks for any help
600
I was able to get your example to run by doing three things.
First, add an HTMLWebpackConfiguration at the top of webpack.config.js. Then, add an index.html page in /app. Finally, make sure the configuration is pointed to the HTML file. The final webpack.config.js looks like this:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: __dirname + '/app/App.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js',
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
inline:true,
contentBase: './public',
port: 3333
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}
The app/index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app"></div>
</html>
Sources of info:
https://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app-5f804d729d3b#.f4sslv7ub
Invariant Violation: _registerComponent(...): Target container is not a DOM element
http://javascriptplayground.com/blog/2016/07/webpack-html-plugin/
71
I was having the same problem. You might want to revisit this solution.
After checking the webpack-dev-server documentation, I realized I needed to specify the devServer collection of properties in webpack config. You have already done this in your example, which was 7 months prior to my reply. Example from their docs:
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
This resolved my case where index.html was not even loaded (per the browser network debug list).
I did not need to add HTMLWebpackConfiguration anywhere.
https://webpack.js.org/configuration/dev-server/
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
