Я пытаюсь добавить простой контроллер для просмотра, который использует компонент preact в рубиновых рельсах

Я пытаюсь добавить простой контроллер для просмотра, который использует компонент preact в рубиновых рельсах. Он просто показывает hello world, просто базовую программу, просто пытающуюся использовать компонент preact в рельсах.

Для такой вещи не так много возможностей, я искал уже довольно долгое время, но не повезло. Я следую этому https://github.com/UseHover/preact-rails, чтобы выполнить это .

application.html.erb

   <title>Helloworld</title>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
   <%= yield %>
   <%= javascript_pack_tag 'application' %>
  </body>

Вид, в котором я называю компонент.

<%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>

Package.json

{
   "name": "helloworld",
   "private": true,
   "dependencies": {
   "@rails/webpacker": "^4.0.7",
   "preact": "^8.5.2",
   "preact_ujs": "^0.1.1"
  },
   "devDependencies": {
   "webpack-dev-server": "^3.8.1"
 }

}

ошибка:-

Webpacker не может найти приложение в D: / Projects / Ruby Project / helloworld / public / packs / manifest.json. Возможные причины:

  1. Вы хотите установить для webpacker.yml значение compile как true для вашей среды

    если вы не используете webpack -w или webpack-dev-server.

  2. webpack еще не запускался повторно, чтобы отразить обновления.

  3. Вы неправильно настроили файл config / webpacker.yml Webpacker.

  4. Конфигурация вашего веб-пакета не создает манифест.

Ваш манифест содержит:

{
}
Extracted source (around line #10):


  <body>
  <%= yield %>
  <%= javascript_pack_tag 'application' %>

  </body>
  </html>

ruby ruby-on-rails preact
person Saif Khan    schedule 01.10.2019    source источник
comment
ваш javascript_pack_tag должен находиться под ‹head›   -  person Saif chaudhry    schedule 01.10.2019
comment
Все еще не работает, пытались поставить везде.   -  person Saif Khan    schedule 01.10.2019

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте использовать Preact 10 вместо 8. Похоже, что preact-rails использует 10 в своих документах.

person Jason Miller    schedule 01.10.2019

arrow_upward
0
arrow_downward

Это легко сделать с помощью CDN.

<h1>Render by Preact client library using h and render function</h1>
<div id="preact">

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.5.2/preact.dev.js"> 
</script>

<script>
 var Component = window.preact.Component,
 h = window.preact.h,
 render = window.preact.render;

 var PreactApp = function (props){
 return h('h1',
 {className: ''},
 'Hello world!');
  }

 render(PreactApp(),document.getElementById("preact"));
 </script>
person Saif Khan    schedule 14.11.2019