I have been looking at examples of how to use the handlebars-loader with webpack but none seem to be working with webpack 4.
Error
ERROR in ./src/templates/property-list-item.hbs
Module build failed: TypeError: Cannot read property 'handlebarsLoader' of undefined
at getLoaderConfig (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:24:37)
at Object.module.exports (/Users/Sam/Desktop/mettamware/Public/js/node_modules/handlebars-loader/index.js:32:15)
@ ./src/property-list.js 5:0-58 40:23-31
@ ./src/app.js
When I look in node_modeules/handlerbars-loader/index.js
, the offending function is this
function getLoaderConfig(loaderContext) {
var query = loaderUtils.getOptions(loaderContext) || {};
var configKey = query.config || 'handlebarsLoader';
var config = loaderContext.options[configKey] || {};
delete query.config;
return assign({}, config, query);
}
My webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.hbs$/,
use: [{
loader: "handlebars-loader",
options: {
helperDirs: path.resolve(__dirname, "./src/helpers")
}
}]
}
]
},
node: {
fs: 'empty'
}
};
If anyone can help I would greatly appreciate it. I've been searching for hours for a solution and have tried lots to things but am not getting anywhere.
In Webpack 4 loaderContext.options
has been replaced with loaderContext.rootConfig
.
This commit has already been made to the handlebars-loader
package to make it compatible with Webpack 4 however this has not been released yet.
For the time being I have uninstalled handlebars-loader
and am using this fork.
Run these two commands.
npm uninstall handlebars-loader
npm install @icetee/handlebars-loader
In webpack.config.js
, replace
loader: "handlebars-loader"
with
loader: "@icetee/handlebars-loader"