Using Handlebars with webpack warning require.extentions not supported

[stevewillard]

Is there any way to remove or disable these warnings when loading Handlebars with Webpack?

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.

WARNING in ./~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.

[kpdecker]

I would recommend precompiling using something like handlebars-loader and utilizing the handlebars/runtime module. Otherwise you should use one of the client-side builds via bower as those do not have any of this node-specific code.

[trusktr]

I would recommend precompiling using something like handlebars-loader and utilizing the handlebars/runtime module.

@kpdecker How would we do that? I've got handlebars 1.3.0 and handlebars-loader ^1.0.2 both installed, then I have an AMD module that looks like this:

define([
  'hbs!path/to/template' // path/to/template.hbs
],
function(template) {
  // ...
});

and in webpack config I have:

{
  resolveLoader: {
    fallback: path.join(__dirname, 'node_modules'),
    alias: {
      'hbs': 'handlebars-loader'
    }
  },
}

so that the hbs! maps to the handlebars-loader. Then when I run webpack, I get those familiar warnings:

WARNING in /some/absolute/path/~/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.

What am I missing? What am I supposed to do with handlebars/runtime?

[trusktr]

Alright, so adding an alias for handlebars seems to have gotten rid of the warnings:

{
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    fallback: path.join(__dirname, 'node_modules'),
    alias: {
      'handlebars': 'handlebars/runtime.js'
    }
  },
  resolveLoader: {
    fallback: path.join(__dirname, 'node_modules'),
    alias: {
      'hbs': 'handlebars-loader'
    }
  }
}

That seems to be the trick, but I still have other errors to figure out before anything can even run, then I'll know if this works.

[seeliang]

Hi , @kpdecker,

thank you for your feedback.
it's kind of working.

i am having the same issue, it's quite interesting that if i add @trusktr 's "resolve" section ('handlebars/runtime.js') run webpack and i will get the "Handlebars.compile is not a function"

Did i missed anything?

many thanks

[kpdecker]

The runtime does not include the compiler. You'll need to precompile your template, which is the best practice. If you absolutely need to compile templates on the client and are fine with the cost (startup and file size), then you'll want to alias handlebars to something like handlebars/dist/handlebars.js

[seeliang]

Thanks @kpdecker ,
i will try that

[kpdecker]

I've also filed #1102 to see if this can be made cleaner for people who do want the whole runtime.

[blakedietz]

@kpdecker @seeliang: I just want to let others know that aliasing handlebars works.

 resolve:
  {
    alias: {
      'handlebars' : 'handlebars/dist/handlebars.js'
    }
  },

Thanks @kpdecker.

[seyfer]

For others looking here

This is the best solution I have found
https://github.com/valtech-nyc/brookjs/blob/master/packages/brookjs/webpack.config.js#L39-L43
here pcardune/handlebars-loader#110 (comment)

Thanks to @mAAdhaTTah

UPD:

//fix handlebars warnings
config.resolve.alias = {
    ...config.resolve.alias,
    'handlebars/runtime': 'handlebars/dist/cjs/handlebars.runtime',
    'handlebars': 'handlebars/dist/cjs/handlebars.runtime',
};

[danieldanielecki]

const nodeExternals = require('webpack-node-externals');
module.exports = {
  externals: [nodeExternals()]
}

Also does works.

[richardebrain]

Hi , @kpdecker,

thank you for your feedback. it's kind of working.

i am having the same issue, it's quite interesting that if i add @trusktr 's "resolve" section ('handlebars/runtime.js') run webpack and i will get the "Handlebars.compile is not a function"

Did i missed anything?

many thanks

were you able to fix handlebars is not a function , i am getting this.viewEngine.renderView is not a function and i am using nextjs approuter

[bhargavaprabu]

For others looking here

This is the best solution I have found https://github.com/valtech-nyc/brookjs/blob/master/packages/brookjs/webpack.config.js#L39-L43 here pcardune/handlebars-loader#110 (comment)

Thanks to @mAAdhaTTah

UPD:

//fix handlebars warnings
config.resolve.alias = {
    ...config.resolve.alias,
    'handlebars/runtime': 'handlebars/dist/cjs/handlebars.runtime',
    'handlebars': 'handlebars/dist/cjs/handlebars.runtime',
};

Thanks @seyfer. This worked for me.

config.resolve.alias = {
     ...config.resolve.alias,
     'handlebars/runtime': 'handlebars/dist/cjs/handlebars.runtime',
     'handlebars': 'handlebars/dist/cjs/handlebars',
};

for next.config.ts

webpack(config) {
    config.resolve.alias = {
      ...config.resolve.alias,
      "handlebars/runtime": "handlebars/dist/cjs/handlebars.runtime",
      handlebars: "handlebars/dist/cjs/handlebars",
    };

    return config;
},