Error loading Handlebars partial with webpack + handlebars-loader

Viewed 2239

The Problem

(Note: Both my file structure and webpack config follow the description of this problem.)

I am using a Handlebars partial, called labels.hdbs, inside of my template main.hdbs, like so:

  <div class="panel-heading text-center">
    <div class="user-info">
      <div class="name small text-muted">
        <strong>{{requester.name}}</strong> ({{requester.email}})
      </div>
    </div>
    {{> labels requester}}
  </div>

However, when I run webpack, I receive the following error:

WARNING in ./src/templates/main.hdbs Module build failed: Error: Partial './src/templates/labels' not found

Versions

* webpack: 1.12.13
* handlebars-loader: 1.5.0
* handlebars: 4.0.5

File Structure

This is a paired down depiction of my file structure.

.
├── dist
├── lib
├── src 
|   ├── javascripts
|   |   └── index.js
|   └── templates
|       ├── main.hdbs
|       ├── labels.hdbs
|       └── helpers
├── webpack.config.js
├── node_modules
└── package.json

Webpack Config

I am using the handlebars-loader module, and have set both the rootRelative and helperDirs options appropriately (I think!):

    /* eslint-env node */
    var path = require('path');
    var webpack = require('webpack');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    var extractStyles = new ExtractTextPlugin('main.css');
    var HtmlWebpackPlugin = require('html-webpack-plugin');

    var externalAssets = {
      css: [...],
      js: [
        'https://cdn.jsdelivr.net/g/lodash@4.14.0,handlebarsjs@4.0.5,jquery@3.1.0',
        'https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js'
      ]
    }

    module.exports = {
      progress: true,
      entry: {
        app: ['./src/javascripts/index.js', './src/stylesheets/app.scss']
      },
      output: {
        path: './dist/assets',
        filename: 'main.js',
        sourceMapFilename: '[file].map'
      },
      module: {
        preLoaders: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader'
          }
        ],
        loaders: [
          {
            test: /\.(gif|jpe?g|png|svg|woff2?|ttf|eot)$/,
            loader: 'url-loader?limit=10000&name=[name].[ext]'
          },
          {
            test: /\.scss$/,
            loader: extractStyles.extract("style", ["css?sourceMap&root=" + path.resolve('./dist/assets'), "sass?sourceMap"])
          },
          {
            test: /\.json$/,
            exclude: path.resolve(__dirname, './src/translations'),
            loader: 'json-loader'
          },
          {
            test: /\.json$/,
            include: path.resolve(__dirname, './src/translations'),
            loader: 'translations-loader',
            query: {
              runtime: 'handlebars'
            }
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
              presets: ['env'],
              plugins: ['transform-async-to-generator']
            }
          },
          {
            test: /\.(handlebars|hd?bs)$/,
            loader: 'handlebars-loader',
            query: {
              extensions: ['handlebars', 'hdbs', 'hbs'],
              runtime: 'handlebars',
              inlineRequires: '\/images\/',
              rootRelative: './src/templates/',
              helperDirs: [ 
                path.resolve(__dirname, './src/templates/helpers')
              ]
            }
          }
        ]
      },
      resolveLoader: {
        modulesDirectories: ['./lib/loaders', 'node_modules']
      },
      resolve: {
        modulesDirectories: ['node_modules', './lib/javascripts'],
        alias: {
          'app_manifest': path.join(__dirname, './dist/manifest.json')
        },
        extensions: ['', '.js']
      },
      externalAssets: externalAssets,
      externals: {
        handlebars: 'Handlebars',
        jquery: 'jQuery',
        lodash: '_',
        zendesk_app_framework_sdk: 'ZAFClient'
      },
      devtool: '#eval',
      plugins: [
        extractStyles,
        new HtmlWebpackPlugin({
          warning: 'AUTOMATICALLY GENERATED FROM ./lib/templates/layout.hdbs - DO NOT MODIFY THIS FILE DIRECTLY',
          vendorCss: externalAssets.css,
          vendorJs: externalAssets.js,
          template: '!!handlebars!./lib/templates/layout.hdbs'
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            drop_debugger: false,
            warnings: false
          }
        })
      ]
    };
0 Answers
Related