reactjs - 未捕获的 ReferenceError : process is not defined - 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 文件设置的部分:

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

然后，您可以使用 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'