Uncaught ReferenceError: процесс не определен - React-Rails - PullRequest
Новая
       33

Uncaught ReferenceError: процесс не определен - React-Rails

2 голосов
/ 22 июня 2019

Компоненты не рендерится из-за ошибки Uncaught ReferenceError.Ошибка генерируется в одном из файлов React API (см. Соответствующий код ниже).Я использую самоактивный реактивный рельс и пытаюсь визуализировать пустой компонент с именем «Тест».

Файл из 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 должен выполнить 'test' для (v) dom.

1 Ответ

0 голосов
/ 24 июня 2019

React-rails gem использует webpacker, поэтому я следовал бы за их документацией, чтобы убедиться, что вы правильно указали переменные окружения, особенно ту часть, которая касается настройки файлов dotenv, если вы не используете webpack-dev-server:

Переменные среды поддерживаются "из коробки" в Webpacker.Например, если вы запускаете сервер разработки веб-пакетов следующим образом: 

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

Затем вы можете ссылаться на эти переменные в своем коде приложения JavaScript с помощью process.env: 

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

YouВозможно, вы захотите сохранить конфигурацию в переменных окружения через файлы .env, аналогично гему Ruby dotenv.

Вот что вы можете сделать, чтобы поддержать "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'
...