Webpack Compilation Error

I’m using webpack with handlebars-loader. I’ve specified my helpers and partials directory but when I try to compile I am given an error.

/Development/boilerplate/node_modules/handlebars/dist/cjs/handlebars/helpers/helper-missing.js:19
      throw new _exception2['default']('Missing helper: "' + arguments[arguments.length - 1].name + '"');
      ^
Error: Missing helper: "extend"
    at Object.<anonymous> (/Development/boilerplate/node_modules/handlebars/dist/cjs/handlebars/helpers/helper-missing.js:19:13)
    at Object.eval [as main] (eval at createFunctionContext (/Development/boilerplate/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:254:23), <anonymous>:5:92)
    at main (/Development/boilerplate/node_modules/handlebars/dist/cjs/handlebars/runtime.js:175:32)
    at ret (/Development/boilerplate/node_modules/handlebars/dist/cjs/handlebars/runtime.js:178:12)
    at ret (/Development/boilerplate/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:526:21)
    at HandlebarsPlugin.compileEntryFile (/Development/boilerplate/node_modules/handlebars-webpack-plugin/index.js:289:22)
    at entryFilesArray.forEach (/Development/boilerplate/node_modules/handlebars-webpack-plugin/index.js:267:56)
    at Array.forEach (<anonymous>)
    at glob (/Development/boilerplate/node_modules/handlebars-webpack-plugin/index.js:267:29)
    at f (/Development/boilerplate/node_modules/once/once.js:25:25)
    at Glob.<anonymous> (/Development/boilerplate/node_modules/handlebars-webpack-plugin/node_modules/glob/glob.js:133:7)
    at Glob.emit (events.js:182:13)
    at Glob._finish (/Development/boilerplate/node_modules/handlebars-webpack-plugin/node_modules/glob/glob.js:172:8)
    at done (/Development/boilerplate/node_modules/handlebars-webpack-plugin/node_modules/glob/glob.js:159:12)
    at Glob._processReaddir2 (/Development/boilerplate/node_modules/handlebars-webpack-plugin/node_modules/glob/glob.js:409:12)
    at /Development/boilerplate/node_modules/handlebars-webpack-plugin/node_modules/glob/glob.js:346:17

My webpack.config is setup like:

    entry: {
      app: './app/js/main.js'
    },
    resolve: {
      extensions: [
        '.js',
        '.json',
        '.hbs'
      ],
      alias: {
        'handlebars' : resolve( 'node_modules/handlebars/dist/handlebars.min.js' )
      }
    [...]
    test: /\.(handlebars|hbs)(\?.*)?$/,
        loader: 'handlebars-loader',
        options: {
          helperDirs: [
            path.join( __dirname, '../node_modules/handlebars-helpers' ),
            path.join( __dirname, '../node_modules/handlebars-utils' ),
            path.join( __dirname, '../node_modules/handlebars-layouts' ),
            path.join( __dirname, '../helpers' )
    			],
          partialDirs: [
            path.join( __dirname, '../app/views', 'partials' )
          ],
          knownHelpersOnly: false
        }
       [...]

And in my index.hbs I have

{{#extend "default" title="Boilerplate" }}
  {{#content "content"}}
      [...]
  {{/content}}
{{/extend}}

When I remove the extend it renders fine, well it doesn’t throw a compile error. I’ve read where others are actually using js and creating the hbs template inside of js file where entry point is but I am looking to utilize hbs files to be able to keep it separated.

I’ve also used handlebars-webpack-plugin to help with this but that’s for server side rendering. But it doesn’t solve my issue of precompilation of the hbs templates and the helpers

My webpack.config

    [...]
    new HandlebarsPlugin({
      htmlWebpackPlugin: {
        enabled: true,
        prefix: 'html'
      },

      entry: path.join( process.cwd(), 'app', 'views', '*.hbs'),
      output: path.join( process.cwd(), 'dist', '[name].html' ),

      helpers: [
        require( path.join( process.cwd(), 'node_modules/handlebars-helpers' ) ),
        require( path.join( process.cwd(), 'node_modules/handlebars-utils' ) ),
        require( path.join( process.cwd(), 'node_modules/handlebars-layouts' ) )
      ],

      partials: [
        path.join( process.cwd(), 'html', '*', '*.hbs' ),
        path.join( process.cwd(), 'app', 'views', '*', '*.hbs' )
      ]
    }),
   [...]

Am I missing something or is there an issue with Webpack and handlebars-helpers? Any help would be appreciated.

[selenearzola]

I solved yesterday, this is my solution on webpack.config.js:

const path = require('path');

module.exports = {
	mode: 'development',
	entry: path.resolve(__dirname, 'www/js/app.js'),
	output: {
		filename: 'app-bundled.js',
		path: path.resolve(__dirname, 'www/js')
	},
	module: {
		rules: [
		{
			test: /\.hbs$/,
			use: [{
				loader: "handlebars-loader",
				options: {
          helperDirs: path.resolve(__dirname, "./www/js/helpers"),
          partialDirs: path.resolve(__dirname, "./www/js/partials")
        }
      }]
    }
    ]
  }
};

[doowb]

The extend helper mentioned in the original post is from handlebars-layouts, not this library. This library does have an extend helper but it does something different.

I’m going to close this issue since it’s related to a different library.