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'

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

1 个答案: