Connecting React with Phoenix

Yama

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

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

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

As for my config file

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"]
}
});

24 comments

/phoenix #react

0 5228 24

2019-07-15 16:04:24 UTC

Marked As Solved

Show Best Posts
Show All (oldest first)
Show All (newest first)

lucaong

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.

Post #1

Also Liked

peerreynders

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

Post #21

lucaong

Glad we managed to help

Post #16

peerreynders

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.

Post #23

Last Post!

OvermindDL1

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. ^.^;

Post #24