Menu
I was following a video tutorial from plural sight. Course name is "Building a Real-time App with React, Flux, Webpack, and Firebase".
Please see below code and attached screen shot of the issue i am having. Webpack is failing when ever i try to re build the files. Can someone please advise of what that issue could be. I'm currently using all the latest libraries.
/*webpack.config.js*/
module.exports = {
entry: {
main: [
'./src/main.js'
]
},
output: {
filename: './public/[name].js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}
/*App.jsx*/
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
messages: [
'hi there how are you ?',
'i am fine, how are you ?'
]
}
}
render() {
var messageNodes = this.state.messages.map((message)=> {
return (
<div>{message}</div>
);
});
return (
<div>{messageNodes}</div>
);
}
}
export default App;
/*main.js*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App/>, getElementById('container'));
/*index.html*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="container"></div>
<script src="public/main.js"></script>
</body>
</html>
/*package.json */
{
"name": "reatapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.0.1",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"webpack": "^1.12.3"
}
}
910
Webpack and Babel are tools for developers that optimize JavaScript applications. Webpack is a module bundler we can use to minify multiple files in a JavaScript project and increase the overall efficiency. A module bundler takes in all the assets and comes up with a single output file.
babel-loader exposes a loader-builder utility that allows users to add custom handling of Babel's configuration for each file that it processes.
If Babel is a translator for JS, you can think of Webpack as a mega-multi-translator that works with all kinds of languages (or assets). For example, Webpack often runs Babel as one of its jobs. Another example, Webpack can collect all your inline CSS styles in your Javascript files and bundle them into one.
sass-loader compiles SASS files to CSS. babel-loader transpiles JS code given the presets. Plugins are the core of Webpack. They can do things that loaders can't. For example, there is a plugin called UglifyJS that minifies and uglifies the output of webpack.
It was solved. The answer was in installing presets npm i --save babel-preset-env babel-preset-react. Then adding another key in the webpack.config.js, in the loader: query: {presets: ['env', 'react'] }. Should be good to go.
193
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
