javascript function as string returned instead of HTML

[DMeganoski]

Perhaps there is something I'm doing wrong, but I am following the documentation and examples, and I cannot understand why I am getting back a string of javascript instead of the template's html.

I am using Laravel 5.3, and the following package: https://github.com/ProAI/laravel-handlebars

The referenced package actually has nothing to do with my current issue, php is compiling the templates just fine. My issue is trying to use them with javascript, Laravel's Elixir and webpack.

The repository suggests the following article to setup the client-side templates: https://medium.com/@greut/sharing-templates-between-php-and-javascript-in-laravel-a5e07b43be24

This suggests using your package in combination with require to compile the templates.

The issue I seem to be having is that after assigning the template to a variable, attempting to render the template with provided variables returns a string of javascript instead of the html of the template.

Here is what I have currently.

Gulpfile.js:

    mix.sass('app.scss')
        .webpack('app.js', 'public/js/' + 'app.js', null, {
            module: {
                loaders: [
                    {
                        test: /\.handlebars$/,
                        loader: "handlebars-loader"
                    }
                ]
            },
        }).version(['css/app.css', 'js/app.js']);

app.js (being compiled by webpack):

var template = require('../../views/test.handlebars');
$(function () {
    var div = document.createElement('div');
    div.innerHTML = template({text: 'Hello from JavaScript.'});
    document.body.appendChild(div);
});

webpack finishes compiling successfully, though instead of seeing the expected 'Hello from Javascript' at the bottom of my page, I see:

var Handlebars = require("E:\\Projects\\client-billing-system\\node_modules\\handlebars\\runtime.js"); function __default(obj) { return obj && (obj.__esModule ? obj["default"] : obj); } module.exports = (Handlebars["default"] || Handlebars).template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var helper; return "
" + container.escapeExpression(((helper = (helper = helpers.text || (depth0 != null ? depth0.text : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"text","hash":{},"data":data}) : helper))) + "

"; },"useData":true});

If I try to eval() this code, I get a require not defined message.

What am I doing wrong?

[mAAdhaTTah]

What does test.handlebars look like?

[DMeganoski]

test.handlebars is just a simple

<p>{{ text }}</p>

[mAAdhaTTah]

Is mix using webpack 1 or 2?

[DMeganoski]

Installed versions say [email protected] and [email protected] under it

[marekkaczkowski]

Same for [email protected].

Edit TL;DR Do not mix loader: { test: ... } with hbs!

Running the template through the loader twice was a root cause: https://github.com/pcardune/handlebars-loader/issues/61#issuecomment-146933684 fixed my issue.

[robincrama]

I see your issue is resolved, does anyone else have the exact same issue without the usage of the hbs loader.

I got the exact same result when requiring the handlebars templates. when i console.log i get:

var Handlebars = require("C:\\Projects\\_git\\basic-orange-packages\\sandbox\\node_modules\\handlebars\\runtime.js"); function __default(obj) { return obj && (obj.__esModule ? obj["default"] : obj); } module.exports = (Handlebars["default"] || Handlebars).template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { return "<div class=\"FilteredList-filters\">\r\n\r\n</div>"; },"useData":true});

"devDependencies": { "@babel/core": "^7.4.0", "@babel/plugin-transform-classes": "^7.4.0", "@babel/preset-env": "^7.4.2", "babel-loader": "^8.0.5", "handlebars": "^4.1.1", "handlebars-loader": "^1.7.1", "jsontosass": "^0.1.1", "webpack": "^4.29.6", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.2.1", "webpack-merge": "^4.2.1" },

module: {
    rules: [
        {
            test: /\.handlebars$/,
            loader: "handlebars-loader"
        },
        {
            test: /\.html$/,
            use: [{ loader: "html-loader" }]
        },
        {
            test: /\.md$/,
            use: [
                {
                    loader: "html-loader"
                },
                {
                    loader: "markdown-loader",
                    options: {
                    }
                }
            ]
        },
        {
            test: /\.(ttf|eot|woff|woff2)$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "fonts/[name].[ext]",
                },
            },
        },
        {
            test: /\.svg$/,
            loader: 'svg-inline-loader'
        }
    ]
},

var filtersTemplate = require("../templates/filters.handlebars");

var html = filtersTemplate(); console.log(html);

[slicksammy]

i had this problem too using webpacker and rails 5. my configuration file was incorrect. i had .hbs in static_assets_extensions in my config/webpacker.yml file. instead i added .hbs to extensions and it worked. i hope this finds the next ppl who will be looking for it