Компоненты React Rails не будут работать Rails 5.2.4 - PullRequest
Новая
       0

Компоненты React Rails не будут работать Rails 5.2.4

0 голосов
/ 06 апреля 2020

Я установил react-rails, так как хочу использовать rails в своем приложении Rails 5.2.4.

Когда я установил его, я в основном получил следующий порядок в моем каталоге app/javascripts/: 

components [directory]
---.keep file
packs [directory]
---applicationCache.js
---hello_react.jsx
---server_rendering.jsx

Внутри каталога компонентов я добавил файл с именем appointments.jsx внутри app\javascripts\components\' which I link to my Appointments controller and views via <% =act_component 'Appointments'%> here is the content of the assignments.jsx` file: 

const Appointments = () => {
    return (
      <div>
        <h1>Hello Appointments</h1>
      </div>
    );
};

Так как я уже связал это с моим индексным представлением через <%= react_component 'Appointments' %> Я ожидал, что это отобразит тег h1 с текст Hello Appointments на нем на моем root (я уже настроил это на моем файле rout.rb), вместо этого я получил ошибки ff на своей консоли: 

Hello World from Webpacker
fromRequireContextWithGlobalFallback.js:21 Error: Cannot find module './Appointments'
    at webpackContextResolve (.*$:13)
    at webpackContext (.*$:8)
    at fromRequireContext.js:13
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js:15)
    at Object.mountComponents (index.js:89)
    at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
    at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
    at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
(anonymous) @ fromRequireContextWithGlobalFallback.js:21
mountComponents @ index.js:89
./node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount @ index.js:149
e.dispatch @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
r.notifyApplicationAfterPageLoad @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
r.pageLoaded @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
(anonymous) @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
fromRequireContextWithGlobalFallback.js:22 ReferenceError: Appointments is not defined
    at eval (eval at ./node_modules/react_ujs/react_ujs/src/getConstructor/fromGlobal.js.module.exports (fromGlobal.js:12), <anonymous>:1:1)
    at ./node_modules/react_ujs/react_ujs/src/getConstructor/fromGlobal.js.module.exports (fromGlobal.js:12)
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js:19)
    at Object.mountComponents (index.js:89)
    at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
    at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
    at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
(anonymous) @ fromRequireContextWithGlobalFallback.js:22
mountComponents @ index.js:89
./node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount @ index.js:149
e.dispatch @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
r.notifyApplicationAfterPageLoad @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
r.pageLoaded @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
(anonymous) @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
index.js:100 [react-rails] Cannot find component: 'Appointments' for element <div data-react-class=​"Appointments" data-react-props=​"{}​" data-react-cache-id=​"Appointments-0">​</div>​
index.js:103 Uncaught Error: Cannot find component: 'Appointments'. Make sure your component is available to render.
    at Object.mountComponents (index.js:103)
    at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
    at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
    at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
mountComponents @ index.js:103
./node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount @ index.js:149
e.dispatch @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6
r.notifyApplicationAfterPageLoad @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
r.pageLoaded @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7
(anonymous) @ turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6

Для записи вот содержание моего application.js файла в каталоге app/packs/: 

console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

Есть идеи, что я здесь не так делаю? Почему текст не отображается на экране?

1 Ответ

0 голосов
/ 06 апреля 2020

Вы экспортировали свой компонент? Т.е. export default Appointments;. Также это может быть проблема чувствительности к регистру, то есть вы называете ее прописными буквами react_component 'Appointments' и имеете appointments.jsx.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...