4

Components aren't rendering because of the Uncaught ReferenceError error. The error is thrown in one of the React API files (see the code in question below). I'm using the react-rails gem and am trying to render a blank component called 'Test'.

The file from React API(line 3)

 'use strict';

 if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
 } else {
  module.exports = require('./cjs/react.development.js');
 }

ERB Rendering Component

<div style="width:100vw">
  <%= react_component('Test') %>
</div>

The Component

import React from "react";
import PropTypes from "prop-types";

export default class Test extends React.Component{

  render(){
    return (
      <div>
        test
      </div>
    )
  }
}

The React API should render 'test' to the (v)dom.

iThompkins
  • 155
  • 1
  • 12
  • Do you have a `.env` file? How are you exporting/loading your environment variables? – Yeysides Jun 22 '19 at 23:45
  • @Yeysides I am facing the same problem? Does it have any relation with .env file? I don't have such file. – Krupa Suthar Jun 24 '19 at 10:49
  • @KrupaSuthar if you want to use `process.env` variables you will need to create a `.env` file at the root of your project and export your environment variables by running source on the file, if not, you will need to export these variables manually with each process. – Yeysides Jun 24 '19 at 11:17
  • But I haven't added that manually there. I am using https://github.com/reactjs/react-rails gem – Krupa Suthar Jun 24 '19 at 11:21
  • @KrupaSuthar Looks like react-rails uses `webpacker`, take a look [here](https://github.com/rails/webpacker/blob/master/docs/env.md) – Yeysides Jun 24 '19 at 12:38

1 Answers1

0

React-rails gem uses webpacker, so I would follow their documentation to make sure you source your environment variables correctly, particularly the portion involving the setup of dotenv files if you don't use webpack-dev-server:

Environment variables are supported out of the box in Webpacker. For example if you run the webpack dev server like so:

FOO=hello BAR=world ./bin/webpack-dev-server

You can then reference these variables in your JavaScript app code with process.env:

console.log(process.env.FOO) // Compiles to console.log("hello")

You may want to store configuration in environment variables via .env files, similar to the dotenv Ruby gem.

Here is what you could do to support a "Ruby-like" dotenv:

yarn add dotenv

// config/webpack/environment.js

...
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const dotenv = require('dotenv')

const dotenvFiles = [
  `.env.${process.env.NODE_ENV}.local`,
  '.env.local',
  `.env.${process.env.NODE_ENV}`,
  '.env'
]
dotenvFiles.forEach((dotenvFile) => {
  dotenv.config({ path: dotenvFile, silent: true })
})

environment.plugins.prepend('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))

module.exports = environment

If you'd like to pass custom variables to the on-demand compiler, use Webpacker::Compiler.env attribute.

Webpacker::Compiler.env['FRONTEND_API_KEY'] = 'your_secret_key'
Yeysides
  • 1,262
  • 1
  • 17
  • 27
  • I apologize for the lateness of this response. I applied the fix you suggested but to no avail. I'm a little lost as to where this 'process' object is being loaded (I'm assuming react) and why it is not being created during development. – iThompkins Jul 01 '19 at 19:32
  • @iThompkins how did you setup your react app initially? Did you use `create-react-app` or something else? – Yeysides Jul 02 '19 at 00:10
  • @Yeysides I have the same issue and I am not creating react only app but I am using https://github.com/reactjs/react-rails to create app with react and rails both, That's why I created rails app first and then added this gem – Krupa Suthar Jul 04 '19 at 12:53
  • @KrupaSuthar try loading your env files with [this](https://github.com/bkeepers/dotenv) – Yeysides Jul 04 '19 at 15:47