Connecting React with Phoenix

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

1 Like

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.

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

{
  "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"
  }
}

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

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);

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

return (<div>Hello react</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

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.

You may adapt for your usage.

In webpack.config.js, I have

      {
        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

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.

It is not mandatory to use parens in that case :slight_smile:

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).

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

1 Like

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.

1 Like

Glad we managed to help :slight_smile: :white_check_mark:

2 Likes

I do remember that upgrading to Babel 7 was painful :slight_smile:

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 = () => {}

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 :slight_smile:

1 Like

I wish I was able to have 2 correct answers. @lucaong called it out in the beginning but your code example (same file) also helped plus the link provided. I haven’t build webpack from scratch in almost a year but yup, this upgrade is a little headache lol Feels like it went from pure Webpack -> .babelrc -> babel.config.js I wonder what is the next file we will be asked to add :smiley: Again thank you for the help on this one.

1 Like

For future reference:

$ mix phx.new react_demo --no-ecto

* creating react_demo/config/config.exs
...
* creating react_demo/assets/static/robots.txt

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd react_demo

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server

$ cd react_demo

react_demo$ mix phx.server
Compiling 12 files (.ex)
Generated react_demo app
[info] Running ReactDemoWeb.Endpoint with cowboy 2.6.3 at 0.0.0.0:4000 (http)
[info] Access ReactDemoWeb.Endpoint at http://localhost:4000

Webpack is watching the files…

Hash: 1fc94cc9b786e491ad40
Version: webpack 4.4.0
Time: 513ms
Built at: 7/12/2019 1:08:54 PM
                Asset       Size       Chunks             Chunk Names
       ../css/app.css   10.6 KiB  ./js/app.js  [emitted]  ./js/app.js
               app.js   7.26 KiB  ./js/app.js  [emitted]  ./js/app.js
       ../favicon.ico   1.23 KiB               [emitted]  
../images/phoenix.png   13.6 KiB               [emitted]  
        ../robots.txt  202 bytes               [emitted]  
   [0] multi ./js/app.js 28 bytes {./js/app.js} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {./js/app.js} [built]
[./css/app.css] 39 bytes {./js/app.js} [built]
[./js/app.js] 493 bytes {./js/app.js} [built]
    + 2 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css:
    [./node_modules/css-loader/dist/cjs.js!./css/app.css] 284 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/phoenix.css] 10.9 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

Check in the browser http://localhost:4000/ to see the “Phoenix Framework” page.

^C
BREAK: (a)bort (c)ontinue (p)roc info (i)nfo (l)oaded
       (v)ersion (k)ill (D)b-tables (d)istribution
a

react_demo $ cd assets

assets $ npm i -g npm-check-updates
.npm-global/bin/npm-check-updates -> .npm-global/lib/node_modules/npm-check-updates/bin/npm-check-updates
.npm-global/bin/ncu -> .npm-global/lib/node_modules/npm-check-updates/bin/ncu
+ npm-check-updates@3.1.18
added 260 packages from 118 contributors in 8.122s

assets $ ncu -u

Upgrading react_demo/assets/package.json
[====================] 12/12 100%

 @babel/core                          ^7.0.0  →  ^7.5.4 
 @babel/preset-env                    ^7.0.0  →  ^7.5.4 
 babel-loader                         ^8.0.0  →  ^8.0.6 
 copy-webpack-plugin                  ^4.5.0  →  ^5.0.3 
 css-loader                           ^2.1.1  →  ^3.0.0 
 mini-css-extract-plugin              ^0.4.0  →  ^0.7.0 
 optimize-css-assets-webpack-plugin   ^4.0.0  →  ^5.0.3 
 uglifyjs-webpack-plugin              ^1.2.4  →  ^2.1.3 
 webpack                               4.4.0  →  4.35.3 
 webpack-cli                         ^2.0.10  →  ^3.3.5 

Run npm install to install new versions.

assets $ npm i

npm WARN assets No description

added 119 packages from 103 contributors, removed 596 packages, updated 72 packages, moved 3 packages and audited 8034 packages in 17.606s
found 63 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

assets $ npm i -D  @babel/preset-react

npm WARN assets No description

+ @babel/preset-react@7.0.0
added 7 packages from 1 contributor and audited 8056 packages in 4.55s
found 63 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

assets $ npm i -P react react-dom

npm WARN assets No description

+ react@16.8.6
+ react-dom@16.8.6
added 5 packages and audited 8082 packages in 4.779s
found 63 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
assets $ 

Delete assets/.babelrc

assets $ rm .babelrc

Create assets/babel.config.js

module.exports = function (api) {
  api.cache(true);

  const presets = [
    '@babel/preset-env',
    '@babel/preset-react',
  ]
  const plugins = [
  ]

  return {
    presets,
    plugins
  };
}

Modify assets/webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, /* add 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: 'static/', to: '../' }])
  ]
});

Modify assets/js/app.js:

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import css from "../css/app.css"

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"

// Import local files
//
// Local files can be imported directly using relative paths, for example:
// import socket from "./socket"

import React from 'react'
import ReactDOM from 'react-dom'

const App = ({ title }) =>
  <div>{title}</div>

const title = "Hello World!"

ReactDOM.render(
    <App title={title} />,
  document.getElementById('app')
)

Replace contents of react_demo/lib/react_demo_web/templates/page/index.html.eex with

<div id="app"></div>

$ cd ..

react_demo $ mix phx.server

Compiling 1 file (.ex)
[info] Running ReactDemoWeb.Endpoint with cowboy 2.6.3 at 0.0.0.0:4000 (http)
[info] Access ReactDemoWeb.Endpoint at http://localhost:4000

webpack is watching the files…

Hash: 422aabb9c911039eccdd
Version: webpack 4.35.3
Time: 683ms
Built at: 07/12/2019 2:00:54 PM
                Asset       Size       Chunks             Chunk Names
       ../css/app.css   10.6 KiB  ./js/app.js  [emitted]  ./js/app.js
       ../favicon.ico   1.23 KiB               [emitted]  
../images/phoenix.png   13.6 KiB               [emitted]  
        ../robots.txt  202 bytes               [emitted]  
               app.js    911 KiB  ./js/app.js  [emitted]  ./js/app.js
Entrypoint ./js/app.js = ../css/app.css app.js
[0] multi ./js/app.js 28 bytes {./js/app.js} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {./js/app.js} [built]
[./css/app.css] 39 bytes {./js/app.js} [built]
[./js/app.js] 790 bytes {./js/app.js} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {./js/app.js} [built]
    + 13 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./css/app.css] 282 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/phoenix.css] 10.9 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

Looking at http://localhost:4000/ you should see:

The resulting assets/package.json:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "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": "^5.0.3",
    "css-loader": "^3.0.0",
    "mini-css-extract-plugin": "^0.7.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "webpack": "4.35.3",
    "webpack-cli": "^3.3.5"
  }
}
3 Likes

I thought babel 7 needed also in webpack.config.js, js loader as mentionned in the previous link to babel config… but it seems not.

options: {
  rootMode: "upward",
}

If I understand it correctly:

  • webpack is using assets/ as the root directory
  • therefore assets/babel.config.js is in the root directory
  • the default is rootMode: "root"
  • so it “just works”

"upward" is necessary when your configuration file in a parent directory is controlling the configuration of multiple Node.js projects below it.

2 Likes

The purpose of binding is to get this to point to the class object rather than the global this. That’s part of Javascript’s weird this handling and has nothing to do with React. ^.^;

1 Like