In my rails app I try to use handlebars. Some code is from this tutorial (https://medium.com/@jphager2/adding-handlebars-to-a-rails-app-with-webpacker-d246c58e0c38) some from the webpacker docs.
I did
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);
...
When calling a page of the app in the browser, I get the following error:
Failed to compile.
./app/javascript/quote.hbs 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <blockquote>
| {{quoteText}}
| <small>{{quoteAuthor}}</small>
When I call .bin/webpacker I get the console.log from environment.js which includes
environment.loaders : ConfigList(8) [
...
{ key: 'handlebars', value: { test: /\.hbs$/, use: [Array] } }
...
]
Why does rails not find the loader?