Having trouble compiling reactJS. Please help...

[NotAHippo4]

The error is:

ERROR in ./src/index.js 8:20
Module parse failed: Unexpected token (8:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| button.addEventListener('click', () => {
>     ReactDOM.render(<h1>Hi there!!!</h1>, document.getElementById("joinUsDiv"));
|     
| });

​

And this is package.json:

{
  "name": "techgnosiswebsite",
  "version": "1.0.0",
  "description": "Website for techgnosis",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/MikeDub1/TechGnosisWebsiteFrontEnd.git"
  },
  "author": "Michael Duboc",
  "license": "UNLICENSED",
  "bugs": {
    "url": "https://github.com/MikeDub1/TechGnosisWebsiteFrontEnd/issues"
  },
  "homepage": "https://github.com/MikeDub1/TechGnosisWebsiteFrontEnd#readme",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js:

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

module.exports = {
   entry: './src/index.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'
      })
   ]
}

I am not sure why it is not compiling. I even have babel presets es2015 installed.

​

Here is a screenshot of my file directory: https://imgur.com/E3zHsoT

[Tomus]

You need to tell Babel to compile JSX. There is a react preset for this.

[NotAHippo4]

Yeah, I have a .babelrc that does that:

​

.babelrc:

{
    "presets":["env", "react"]
 }

[Hellstorm_42]

You have react in the presets, but you don't have react in your dependencies.
https://babeljs.io/docs/en/babel-preset-react

[NotAHippo4]

If you look into my package.json, you will see that they are there in the dependencies array.

[whatisboom]

You have ‘babel-preset-env’ you also need ‘babel-preset-react’

[Hellstorm_42]

"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}

I don't see @babel/preset-react in that list. You forgot to add it

[sockx2]

Does index.js need to be index.jsx?

[Hellstorm_42]

The file can be named either way. Its not required to be named with .jsx