I went through a React Introduction found on Microsoft Virtual Academy and downloaded the code found in the associated GitHub repo. At this point I'm just trying to have my simple Index.html page create an empty React Div Tag.
However i'm having trouble establishing my environmentI installed node.js, downloaded the start code from github, did my npm install and upon compile got the error "Breaking Change: Its's not longer allowed to omit the '-loader' when using loaders. You need to specify the file-loader instead of file. I fixed this error by changing the webpack.config.js .html loader under module from "file?name=[name].[ext]" to "file-loader?name=[name].[ext]".
However upon doing that I received an error stating "Conflict: Multiple assets emit to the same filename" error when compiling. I fixed this error by changing the output filename in the webpack.config.js from bundle.js to [name].js.
Then it compiled fine but when looking at it in the browser I noticed that there was an error stating "the server has not found anything matching the requested URI" and mentions bundle.js.
I have tried changing the call in my Index.html to app.js but also get the same error. I have tried clearing out the code in my app.js so it is completely empty and still get the requested URI error. Below is my very simple code...
webpackag.config.js`var path = require('path');
var webpack = require('webpack');
module.exports = {
context: path.join(__dirname, 'app'),
entry: {
javascript: './app.js',
html: './index.html'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.html$/,
loader: "file-loader?name=[name].[ext]",
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
}
]
},
devServer: {
historyApiFallback: true
}
};
Code for Index.html...`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pizza Bot Manager</title>
<link rel="stylesheet" href="/app/app.css">
</head>
<body>
<div id="main">
</div>
<script src="./app.js"></script>
</body>
</html>
App.Js code below...
var React = require('react');
var ReactDom = require('react-dom');
var App = React.createClass({
render: function() {
return (
<div>
</div>
)
}
});
ReactDOM.render(<App />, Document.getElementById("main"));
` Very new to React so if anyone has any suggestions on how to resolve this error I would really appreciate it
via kuruption213
No comments:
Post a Comment