CODEWITHSUNDEEP
javascriptreactjswebpackbabeljs
jtoepfer
jtoepfer

Reputation: 325

Creating hello world reactjs app

I'm working through a basic Hello World React app. I'm working with webpack/babel, but upon building the project I'm getting an error, i'm also supplying the versions of the dependencies that I'm using.

index.js

var React = require('react');
var ReactDom = require('react-dom');
require('./index.css');

class App extends React.Component {
   render() {
     return (
       <div>
          Hello World!
       </div>
     )
   }
 }

 ReactDom.render( <App/>, document.getElementById('app') );

package.json

 {
   "name": "github-battle",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "create": "webpack"
   },
   "babel": {
     "presents": [
       "env",
       "react"
     ]
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
   },
   "devDependencies": {
      "babel-core": "^6.25.0",
      "babel-loader": "^7.0.0",
      "babel-preset-env": "^1.5.2",
      "babel-preset-react": "^6.24.1",
      "css-loader": "^0.28.4",
      "html-webpack-plugin": "^2.28.0",
      "style-loader": "^0.18.2",
      "webpack": "^2.6.1",
      "webpack-dev-server": "^2.4.5"
   }
}

webpack.config.js

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: { loader: 'babel-loader', options: { presents: ['env', 'react'] } } },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Github Battle',
      template: './app/index.html'
    })
  ]
}

Error:

ERROR in Error: Child compilation failed: Module build failed: ReferenceError: [BABEL] C:\workspaces\javascript\git hub-battle\node_modules\lodash\lodash.js: Unknown option: C:\workspaces\javascript\github-battle\package.json.presents. Check out http://babeljs.io/doc s/usage/options/ for more information about options. A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example: Invalid: { presets: [{option: value}] } Valid: { presets: [['presetName', {option: value}]] } For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.

`

If there is more information you need about my hello world project please ask, i'm more than willing to try to work through this issue.

Upvotes: 1

Views: 174

Answers (2)

Isaac B
Isaac B

Reputation: 755

From your error, it looks like a Babel configuration issue.

I took a look at a simple React project of mine that had this set of babel devDependencies:

"devDependencies": {
    "babel-core": "^6.24.0",
    "babel-plugin-syntax-flow": "^6.18.0",
    "babel-preset-latest": "^6.24.0",
    "babel-preset-react": "^6.23.0",
}

Perhaps you need to set the "babel-preset-latest" option.

Upvotes: 0

Kerumen
Kerumen

Reputation: 4341

You should check the official way to init a React app, create-react-app. It handles all the tooling for you hence allows you to bootstrap an app very quickly and easily.

Upvotes: 1

Related Questions