es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Implementación del cargador de handlebars en la aplicación de Rails

En mi aplicación de Rails intento usar Handlebars. Parte del código proviene de este tutorial (https://medium.com/@jphager2/adding-handlebars-to-a-rails-app-with-webpacker-d246c58e0c38) y parte de la documentación de Webpacker.

Realicé lo siguiente:

yarn add handlebars
yarn add handlebars-loader

app/javascript/quote.hbs

<blockquote>
  {{quoteText}}
  <small>{{quoteAuthor}}</small>
</blockquote>

app/webpacker/packs/application.js

...
const template = require('/app/javascript/quote.hbs');
if (document.readyState === 'ready' || document.readyState !== 'loading') {
  addQuote();
} else {
  document.addEventListener('DOMContentLoaded', addQuote);
}

function addQuote() {
  var quote = {
    quoteText: "If you want to push, then first pull. If you want to go up, first go down",
    quoteAuthor: "Unknown"
  };

  document.body.innerHTML = template(quote);
}
...

config/webpack/environment.js

...
environment.loaders.append('handlebars', {
  test: /\.hbs$/,
  use: [
    {
      loader: 'handlebars-loader',
    },
  ],
})

console.log('environment.loaders:', environment.loaders);
...

Al llamar a una página de la aplicación en el navegador, obtengo el siguiente error:

Error al compilar.

./app/javascript/quote.hbs 1:0
El análisis del módulo ha fallado: Token inesperado (1:0)
Es posible que necesite un cargador adecuado para manejar este tipo de archivo, actualmente no hay cargadores configurados para procesar este archivo. Consulte https://webpack.js.org/concepts#loaders
> <blockquote>
|   {{quoteText}}
|   <small>{{quoteAuthor}}</small>

Cuando llamo a .bin/webpacker obtengo el console.log de environment.js que incluye:

environment.loaders : ConfigList(8) [
...
{ key: 'handlebars', value: { test: /\.hbs$/, use: [Array] } }
...
]

¿Por qué Rails no encuentra el cargador?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Basado en el mensaje de error “Es posible que necesites un cargador adecuado para manejar este tipo de archivo, actualmente no hay cargadores configurados para procesar este archivo”, parece que el cargador de handlebars no está siendo reconocido por la configuración de webpacker.

    Una posible solución es agregar handlebars-loader como una dependencia en el archivo config/webpacker.yml añadiendo la siguiente línea:

      resolved_paths:
        - node_modules
        - app/assets/javascripts
        - app/javascript
      ...
      additional_paths:
        - vendor/node_modules
      ...
      extensions:
        - .ts
        - .tsx
        - .js
        - .jsx
        - .vue
        - .scss
        - .less
        - .svg
        - .hbs # agregar extensión de handlebars aquí
    

    Esto le indicará a webpacker que reconozca la extensión de handlebars como un cargador válido.

    Alternativamente, es posible que el archivo environment.js no se esté cargando correctamente. Verifica que el archivo se esté requiriendo e inicializando correctamente en la configuración de webpacker.

Comments are closed.