_input.charCodeAt is not a function

[dfmartin]

When the website attempts to load the inspector shows the following error: Uncaught TypeError: this._input.charCodeAt is not a function

Here is my webpack config loader statement:

        {test: /\.pug$/, loader: 'pug-loader'},

I am new to webpack, so it may very well be me. I was able to get pug-html-loader working, but would rather stick with the folks that created pug. If it is of any importance, I am using this in an Angular2 app.

[tro3]

I see the same thing, also in an Angular 2 app.

The component:

@Component({
  selector: 'home',
  templateUrl: 'home.component.jade',
  styleUrls: [
    'home.component.css',
  ]
})
export class HomeComponent {}

and webpack config:

{ test: /\.jade$/, loader: 'pug-loader' }`

[fklingler]

You have to use this syntax:

@Component({
    template: require('./home.component.jade')()
})

[jspizziri]

@fklingler, thanks for your answer, fixed my issue. Could you please explain why this is the case?

[fklingler]

Unlike pug-html-loader, the require('file.pug') method does not return a string of the html.

It returns a template function (as indicated, maybe not clearly enough, in the README). This function takes a "locals" object as parameter, so you can pass it variables that are handled in the pug template. Since Angular2 components already handle these variables, you don't have to pass any object, but you still have to call the template function to get the html string, hence the require('file.pug')() syntax.

To have consistency with other loaders, I think it would be great to have an option the loader query to get the string directly instead of the template function.

[jspizziri]

@fklingler, thank you!

[zhekaus]

Guys, Can’t help but ask … is there a way to get rid of require in templates and @Component with this loader or any other? It looks really ugly:

…
@Component({
  selector: 'app-home',
  // templateUrl: './home.component.pug',
  template: require('./home.component.pug')(),

p Home works!
div
    img(src=require('../../assets/img/my-image.jpg'))
    //img(src='../../assets/img/my-image.jpg')