Handlebars with spfx, Module not found

Question

I am trying to use handlebars in a client webpart using these posts:

https://n8d.at/blog/how-to-use-handlebars-in-sharepoint-framework-projects-spfx/ https://n8d.at/blog/first-handlebars-web-part-in-spfx/

in my gulp.js file, i have this code:

build.configureWebpack.mergeConfig({
   additionalConfiguration: (generatedConfiguration)=> {
         generatedConfiguration.module.rules.push( 
            { test: /\.hbs$/, loader: "handlebars-template-loader" } ); 
       return generatedConfiguration; 
    }
    }); 
 build.initialize(gulp); 

I created a new file under config folder, called copy-static.assets.json, with this code inside:

{"includeExtensions": ["hbs"]}

i have the template on the same level as .ts webpart file, and i reference the template like this:

var compiled = require('./test.hbs'); 

am getting this error when I run gulp serve:

Module not found: Error: Can't resolve './test.hbs' using description file: C:\solutions\mywebpart\package.json . Field 'browser' doesn't contain a valid alias configuration.

Any idea how to solve this?

Answer 1

Try this instead in your gulpfile

const loaderRule = { "use": [{ "loader": "handlebars-template-loader" }], "test": /.hbs/ };

build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push(loaderRule);

return generatedConfiguration;}
});

Answer 2

use this code on gulpfile.js

const loaderConfig = {
    test: /\.hbs/,
    loader: 'handlebars-loader' 
  };
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

  build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
      generatedConfiguration.module.rules.push(loaderConfig);

      return generatedConfiguration;
    }
  });