# Connecting React with Phoenix

**URL:** <https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935>\
**Category:** Questions\
**Tags:** phoenix, react\
**Created:** [July 12, 2019, 4:18pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935 "2019-07-12T16:18:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yama](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/y/c89c15/32.png) [@Yama](https://forum.elixirforum.com/u/Yama)\
**Post date:** [July 12, 2019, 4:18pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/1 "2019-07-12T16:18:57Z")

</div>

I’ve been trying to connect React to my Phoenix project but continue to get an error. The error says

```elixir
Error in ./assets/js/app.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js);
SyntaxError: path -> app.jsx

const HelloReact = () => {
  return <div>Hello World</div>;
}

```

error points to \< in

I feel like this may be a babel problem. I decided to move package.json, webpack.config.js and .babelrc to the top level due to a recommended approach on a guide I was following. Was hoping to get a second look at eyes with how I’ve configured my React. Thank you for all the help.

My .babelrc looks like

```elixir
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread"]
}

```

As for my config file

```elixir
module.exports = (env, options) => ({
 optimization: {
  minimizer: [
   new UglifyJSPlugin({ cache: true parallel: true, sourceMap: false }),
   new OptimizeCSSAssetsPlugin({})
  ]
 },
entry: {
  app: "./assets/js/app.jsx"
},
output: {
  filename: "app.js",
  path: path.resolve(__dirname, "priv/static/js")
},
module: {
  rules: [
   {
     test: /\.(js|jsx)$/,
     exclude: /node_modules/,
     use: {
       loader: "babel-loader"
     }
  },
  {
    test: /\.css$/,
    use: [MiniCSSExtractPlugin.loader, "css-loader"]
  }
 ]
},
plugins: [
   new MiniCssExtractPlugin({ filename: "../css/app.css"}),
   new CopyWebpackPlugin([{ from: "assets/static/", to: "../" }])
],
resolve: {
  extensions: ["*", ".js", ".jsx"]
}
});

```

---

<div class="post-metadata">

**Author:** ![lucaong](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lucaong/32/21794_2.png) [@lucaong](https://forum.elixirforum.com/u/lucaong)\
**Post date:** [July 12, 2019, 4:31pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/2 "2019-07-12T16:31:24Z")

</div>

Most likely a Babel problem indeed, as it seems it’s not transpiling JSX to JS.

The Babel configuration is always giving me headaches, and right now I am not really sure, but isn’t `babel.config.js` supposed to replace `.babelrc`? If I am right about that, your `babel.config.js` will take precedence, and it does not include necessary presets like `@babel/preset-react`. That might be what causes JSX not to be transpiled.

---

<div class="post-metadata">

**Author:** ![wolfiton](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/wolfiton/32/15884_2.png) [@wolfiton](https://forum.elixirforum.com/u/wolfiton)\
**Post date:** [July 12, 2019, 4:41pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/3 "2019-07-12T16:41:17Z")

</div>

If you are new to react use the creat react app it works with npx and the guide can be found here.

[https://facebook.github.io/create-react-app/docs/getting-started](https://facebook.github.io/create-react-app/docs/getting-started)

Also this is very important [https://reactjs.org/blog/2018/10/01/create-react-app-v2.html](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)

---

<div class="post-metadata">

**Author:** ![kokolegorille](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/32/4784_2.png) [@kokolegorille](https://forum.elixirforum.com/u/kokolegorille)\
**Post date:** [July 12, 2019, 4:45pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/4 "2019-07-12T16:45:00Z")

</div>

```elixir
const HelloReact = () => {
  return <div>Hello World</div>;
}

```

Is that your file?

I think You miss this…

```elixir
import React from 'react';

```

Even if it is not visible, You need to import React before using this code

```elixir
<div>...</div>

```

because it uses `React.createElement()` under the hood

---

<div class="post-metadata">

**Author:** ![wolfiton](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/wolfiton/32/15884_2.png) [@wolfiton](https://forum.elixirforum.com/u/wolfiton)\
**Post date:** [July 12, 2019, 4:46pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/5 "2019-07-12T16:46:12Z")

</div>

Also can you post your package.json file to see what packages you installed?

---

<div class="post-metadata">

**Author:** ![wolfiton](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/wolfiton/32/15884_2.png) [@wolfiton](https://forum.elixirforum.com/u/wolfiton)\
**Post date:** [July 12, 2019, 4:49pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/6 "2019-07-12T16:49:25Z")

</div>

Also this tutorial should offer you a complete introduction to react and babel config the right way.

[https://www.valentinog.com/blog/babel/](https://www.valentinog.com/blog/babel/)

---

<div class="post-metadata">

**Author:** ![Yama](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/y/c89c15/32.png) [@Yama](https://forum.elixirforum.com/u/Yama)\
**Post date:** [July 12, 2019, 5:00pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/7 "2019-07-12T17:00:28Z")

</div>

Hm I’ve been trying to look into `babel.config.js` and it doesn’t seem to be a requirement. I may be wrong but thank you for replying. Will continue to look about both files.

---

<div class="post-metadata">

**Author:** ![Yama](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/y/c89c15/32.png) [@Yama](https://forum.elixirforum.com/u/Yama)\
**Post date:** [July 12, 2019, 5:02pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/8 "2019-07-12T17:02:28Z")

</div>

Thank you for replying. Actually, it isn’t my first time using React but every time I try to use it for a project, the initial setup is usually a headache when it comes to webpack. Thank you for providing those linkes. I will take a look especially the tutorial I hope will point me in the right direction. As for the packages I installed, it’s

```elixir
{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "copy-webpack-plugin": "^4.5.0",
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.4.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "4.28.4",
    "webpack-cli": "^3.3.5"
  }
}

```

---

<div class="post-metadata">

**Author:** ![Yama](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/y/c89c15/32.png) [@Yama](https://forum.elixirforum.com/u/Yama)\
**Post date:** [July 12, 2019, 5:04pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/9 "2019-07-12T17:04:00Z")

</div>

I apologize for not copying the code exactly as what I wrote. That is my part that has mislead you. The entire file looks like this

```elixir
import css from "../css/app.css";
import "phoenix_html";
import React from "react";

import ReactDOM from "react-dom";

console.log("I'm getting hit");

const HelloReact = () => {

return <h1>Hello React!</h1>;

};

const root = document.getElementById("root");

ReactDOM.render(<HelloReact />, root);

```

---

<div class="post-metadata">

**Author:** ![krstfk](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/k/c67d28/32.png) [@krstfk](https://forum.elixirforum.com/u/krstfk)\
**Post date:** [July 12, 2019, 5:10pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/10 "2019-07-12T17:10:20Z")

</div>

I may be wrong, but isn’t the return block supposed to be wrapped with parens ie :

```elixir
return (<div>Hello react</div>);

```

?

---

<div class="post-metadata">

**Author:** ![kokolegorille](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/32/4784_2.png) [@kokolegorille](https://forum.elixirforum.com/u/kokolegorille)\
**Post date:** [July 12, 2019, 5:14pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/11 "2019-07-12T17:14:30Z")

</div>

Ok You do import React…

This is how I did for a babel 7.4.3 and React 16.8

I use a babel.config.js with this inside

```elixir
module.exports = api => {
  api.cache(true);

  const presets = [
    [
      "@babel/preset-env",
      {
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
        useBuiltIns: "usage",
        corejs: '3.0.0',
      },
      "@babel/preset-react",
    ],
  ];
  
  const plugins = [

  ];

  return {
    presets,
    plugins
  };
}

```

I think I got this config on the babel site.

> **[Config Files · Babel](https://babeljs.io/docs/config-files/)**
>
> Configuration File Types

You may adapt for your usage.

In webpack.config.js, I have

```elixir
      {
        test: /\.jsx?$/,
        include: SRC_PATH,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          rootMode: "upward",
        },
      },

```

BTW, as a minor note… I put react, react-dom in dependencies, and all @babel… in devDependencies

---

<div class="post-metadata">

**Author:** ![lucaong](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lucaong/32/21794_2.png) [@lucaong](https://forum.elixirforum.com/u/lucaong)\
**Post date:** [July 12, 2019, 5:20pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/12 "2019-07-12T17:20:16Z")

</div>

What happens if you add the `"@babel/preset-env"` and `"@babel/preset-react"` presets to the `babel.config.js`, and remove `.babelrc` entirely?

It really looks to me like `"@babel/preset-react"` is just not applied, and you definitely do not need both a `babel.config.js` and a root `.babelrc`, so you can simplify your setup by only using the former.

---

<div class="post-metadata">

**Author:** ![kokolegorille](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/32/4784_2.png) [@kokolegorille](https://forum.elixirforum.com/u/kokolegorille)\
**Post date:** [July 12, 2019, 5:23pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/13 "2019-07-12T17:23:42Z")

</div>

It is not mandatory to use parens in that case 🙂

---

<div class="post-metadata">

**Author:** ![krstfk](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/k/c67d28/32.png) [@krstfk](https://forum.elixirforum.com/u/krstfk)\
**Post date:** [July 12, 2019, 5:32pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/14 "2019-07-12T17:32:11Z")

</div>

I thought it was because the react component isn’t immediately closed and all the docs seem to wrap those in parens on the react website. Plus, I’ve been bitten by many weird syntax errors while mixing jsx and plain Javascript so I thought it was worth a try. But admittedly, I still don’t have a clear mental model about the jsx syntactic rules (even after having shipped a product that relies a lot on react and has the same configuration as op, yet somehow works).

---

<div class="post-metadata">

**Author:** ![Yama](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/y/c89c15/32.png) [@Yama](https://forum.elixirforum.com/u/Yama)\
**Post date:** [July 12, 2019, 5:33pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/15 "2019-07-12T17:33:24Z")

</div>

Thank you! it seems like it was exactly what everyone has been saying especially @lucaong in regards to using `babel.config.js` instead of `.babelrc`

---

<div class="post-metadata">

**Author:** ![Yama](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/y/c89c15/32.png) [@Yama](https://forum.elixirforum.com/u/Yama)\
**Post date:** [July 12, 2019, 5:34pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/16 "2019-07-12T17:34:39Z")

</div>

You were 100% correct in this one. I didn’t remove `.babelrc` but made the file and copied what was added in @kokolegorille and it started to work. From what I found in the docs, it looks like babel is trying to look for `babel.config.js` file which is what was causing this problem.

---

<div class="post-metadata">

**Author:** ![lucaong](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lucaong/32/21794_2.png) [@lucaong](https://forum.elixirforum.com/u/lucaong)\
**Post date:** [July 12, 2019, 5:36pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/17 "2019-07-12T17:36:16Z")

</div>

Glad we managed to help 🙂 ✅

---

<div class="post-metadata">

**Author:** ![kokolegorille](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/32/4784_2.png) [@kokolegorille](https://forum.elixirforum.com/u/kokolegorille)\
**Post date:** [July 12, 2019, 5:36pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/18 "2019-07-12T17:36:48Z")

</div>

I do remember that upgrading to Babel 7 was painful 🙂

---

<div class="post-metadata">

**Author:** ![Yama](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/y/c89c15/32.png) [@Yama](https://forum.elixirforum.com/u/Yama)\
**Post date:** [July 12, 2019, 5:38pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/19 "2019-07-12T17:38:05Z")

</div>

In my opinion React is cool but weird. The reason being when you use syntactic sugar (I forgot which package helps with it) there is a lot of crazy things you can do. Technically we are writing it in a style but it’s being translated into something different. An example was when I had to bind every function I was making before but now just needing to `name = () => {}`

---

<div class="post-metadata">

**Author:** ![Yama](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/y/c89c15/32.png) [@Yama](https://forum.elixirforum.com/u/Yama)\
**Post date:** [July 12, 2019, 5:39pm UTC](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/20 "2019-07-12T17:39:33Z")

</div>

I’ve tagged your answer as the solution since you first brought it up and it was exactly what you said in regards to replacing `.babelrc` thank you 🙂

[Next page](https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935.md?page=2)