Importing template from jade file

[nishants]

I used create-react-app to create a new react app that also uses Redux.
I imported the pug template as

import template from './help-modal.pug';

On importing the pug template, it gives a string instead of a function and fails saying that .call is not defined.
Following is the snippet for parent container :

class HelpModal extends React.Component{
  render(){
    const {
        showModal,
        closeModal
        } = this.props;
    return template.call(this, {
      showModal,
      closeModal
    });

  }
}

const mapStateToProps = ({helpModal})=> helpModal;

const mapDispatchToProps = (dispatch)=> ({
  closeModal: ()=> closeModal(dispatch)
});

I also see compile warning

  Line 1:  Definition for rule 'jsx-a11y/accessible-emoji' was not found                    jsx-a11y/accessible-emoji
  Line 1:  Definition for rule 'jsx-a11y/alt-text' was not found                            jsx-a11y/alt-text
  Line 1:  Definition for rule 'jsx-a11y/aria-activedescendant-has-tabindex' was not found  jsx-a11y/aria-activedescendant-has-tabindex
  Line 1:  Definition for rule 'jsx-a11y/iframe-has-title' was not found                    jsx-a11y/iframe-has-title
  Line 1:  Definition for rule 'jsx-a11y/no-distracting-elements' was not found             jsx-a11y/no-distracting-elements
  Line 1:  Definition for rule 'jsx-a11y/no-redundant-roles' was not found                  jsx-a11y/no-redundant-roles

[nishants]

I also tried ejecting the project and defining loader as :

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

Doesn't work either.

[nishants]

It worked after I did :

{ test: /\.pug$/, use: [require.resolve('babel-loader'), require.resolve('pug-as-jsx-loader')] },