未捕获的 ReferenceError：未定义进程 - React-Rails

Question

由于 Uncaught ReferenceError 错误，组件未呈现。该错误在 React API 文件之一中引发（请参阅下面有问题的代码）。我正在使用 react-rails gem 并尝试渲染一个名为“Test”的空白组件。

来自 React API 的文件（第 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 渲染组件

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

组件

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

export default class Test extends React.Component{

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

React API 应该将“测试”呈现给 (v)dom。

Answer 1

React-rails gem 使用webpacker，所以我会按照他们的文档来确保你正确地获取环境变量，特别是如果你不使用 webpack-dev-server 涉及到设置 dotenv 文件的部分：

Webpacker 开箱即用地支持环境变量。为了 例如，如果你像这样运行 webpack 开发服务器：

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

然后您可以使用 process.env 在您的 JavaScript 应用代码中引用这些变量：

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

您可能希望通过 .env 文件将配置存储在环境变量中，类似于 dotenv Ruby gem。

以下是支持“类 Ruby”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

如果您想将自定义变量传递给按需编译器，请使用Webpacker::Compiler.env 属性。

Webpacker::Compiler.env['FRONTEND_API_KEY'] = 'your_secret_key'