CODEWITHSUNDEEP
reactjs
Bartek
Bartek

Reputation: 15599

Compiling React with Webpack 4.x and Babel 8.x

I believe I am suffering from the velocity of changes within the Babel/React/Javascript world, as I try to connect the dots as to why this is not working.

I am trying to render a React component, but I can't seem to get the appropriate babel loader to do what it's supposed to do. First, the error:


SyntaxError: /Users/...../assets/js/index.js: Unexpected token (11:6)

   9 |   render() {
  10 |     return {
> 11 |       <ReactAutocomplete
     |       ^
  12 |         items={[
  13 |           { id: 'foo', value: 'bar' },
  14 |         ]}

Here's my webpack config


var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,
  entry: './app/assets/js/index',
  output: {
      path: path.resolve('./app/assets/webpack_bundles/'),
      filename: "[name]-[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/env", "@babel/react"]
          }
        }
      }
    ]
  },
  plugins: [
    new BundleTracker({filename: 'webpack-stats.json'})
  ]
}

And the relevant libraries I've installed from package.json

    "react": "^16.9.0",
    "react-autocomplete": "^1.8.1",
    "react-dom": "^16.9.0"
    "@babel/core": "^7.6.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-react": "^7.14.3",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.39.3",
    "webpack-bundle-analyzer": "^3.4.1",
    "webpack-bundle-tracker": "^0.4.2-beta",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"

I have no .babelrc file currently, but I did at one point.

Thank you!

Upvotes: 0

Views: 49

Answers (1)

Ashok Gadri
Ashok Gadri

Reputation: 518

In render return you're passing the JSX in the object while it needs to be jsx in parenthesis

render(){
    return (
        <ReactAutocomplete />
    )
}

Upvotes: 1

Related Questions