Использование вложенных папок с предварительным рендерингом рельсов

Question

Я пытаюсь настроить react-rails для своего приложения (https://github.com/reactjs/react-rails).

У меня не было проблем с его первоначальной настройкой, но я ожидаю много разных отдельных компонентов, поэтому я хочу аккуратно организовать свою папку /javascript/components.

Итак, у меня есть что-то вроде этого

components
 character
   avatar-selector
     AvatarSelector.tsx
 HomeLogo.tsx

AvatarSelector.tsx экспортирует компонент по умолчанию.

И у меня есть

const componentRequireContext = require.context("components", true);
const ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

в packs/application.js и packs/server-rendering.js

Когда я рендерим компонент HomeLogo, все отлично работает как с предварительным отображением, так и без него. Когда я затем go отрисовываю компонент с react_component('character/avatar-selector/AvatarSelector', avatar_props, prerender: false), он также работает нормально.

Но когда я переключаюсь на prerender: true, это выдает ошибку.

ExecJS::ProgramError: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.>" when prerendering character/avatar-selector/AvatarSelector

У меня уже есть Попытка прямого добавления

const AvatarSelector = require('../components/character/avatar-selector/AvatarSelector')

в мои пакеты и попытка отобразить компонент как AvatarSelector, но я все еще получаю ту же ошибку.

Answer 1

 Regarding Encountered error <ExecJS::ProgramError: Invariant Violation: Element type is invalid: ...:

Я думаю, что одна из основных проблем заключается в том, что при поиске модуля используется try ... catch. Хотя ошибки записываются в консоль, это обычно не помогает, поскольку более поздняя ошибка (например, нарушение инварианта) приведет к фатальной ошибке (срабатывание 500). Если это может быть изменено, чтобы быть немного более преднамеренным, основанным на окружающей среде (вместо того, чтобы просто реагировать на основе исключений или, по крайней мере, выбрасывать, если пойманное исключение не очень конкретно c)

EDIT: Here's something you can do to help with the Invariant Violation bug:

In app/javascripts/packs/server_rendering.js, replace ReactRailsUJS.useContext('require.context('components', true)); with

// So that we don't fall back to the global namespace (which leads to hard to
// parse errors).
function fromRequireContext(reqctx) {
  return function(className) {
    const parts = className.split('.');
    const filename = parts.shift();
    const keys = parts;
    // Load the module:
    let component = reqctx('./' + filename);
    // Then access each key:
    keys.forEach((k) => {
      component = component[k];
    });
    // support `export default`
    if (component.__esModule) {
      component = component.default;
    }
    return component;
  };
}
ReactRailsUJS.getConstructor = fromRequireContext(require.context('components', true));

Ссылка - https://github.com/reactjs/react-rails/issues/264