4

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

来自 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。

4

1 回答 1

0

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'
于 2019-06-24T12:45:00.060 回答