Skip to content

Can't get some Mixins correctly loaded: Empty mixins #118

Open
@juanitopons

Description

@juanitopons

Hi there,

Thank you very much for your loader and work.
I've been quite surprised bundleing my application. I was finding a section of my applications that was not parsing correctly and I didn't know why. Actually, the hole data wasn't being displayed in some layout and i didn't know why.
Looking my application I realise that when compiling PUGS files with pug-loader and extract them with file-loader to JS files before rendering them with my app server, some mixins files where just an empty string ""

Example: mixins.pug --> mixins.js

.pug

mixin rightPart()
  ul.nav.navbar-top-links.navbar-right
  - var isAdmin = locals.loggedUser.admin;
  - var userType = locals.loggedUser.userType;
  - var userReadAlerts = (userType && userType.permissions.alerts.read) || isAdmin;
    if userReadAlerts
      li
        #badge-container(ng-controller="navAlertsController" ng-cloak)
          a.badge-link(href="/alerts")
            span.badge {{activeAlerts.length}}
    li
      .dropdown
        button.btn.btn-dropdown-header.dropdown-toggle(type="button", id="dropdownDashboardUser", data-toggle="dropdown", aria-expanded="false")
          | {{loggedUser.name}} {{loggedUser.lastName}} {{' '}}
          span.fa.arrow
        ul.dropdown-menu.pull-right(role="menu" aria-labelledby="dropdownDashboardUser")
          li(role="presentation")
            .btn.np.bold(ng-click="logout()")=t("LOGOUT.TITLE")

.js

module.exports = function(locals, pug) {
  var pug_html = "",
      pug_mixins = {},
      pug_interp;
  ;
  return pug_html;
};

The real weird thing is that in some cases mixins are compiled correctly for some .pug files. For others, no. I tried nto undestand why this was happening but I ended frustated trying to solve it.

webpack config laoder for pug files: (i tried several variants of the config, even just pug-loader and file-loader but still not working)

{
  test: /\.pug$/,
  exclude: path.resolve('/node_modules/'),
  use: [
    {
      loader: 'file-loader',
      options: {
        outputPath: './new',
        name: '[path][name].js',
      },
    },
    {
      loader: 'string-replace-loader',
      options: {
        multiple: [
          { search: 'function template(locals)', replace: 'module.exports = function(locals, pug)' },
          { search: 'require\\(\\"([^)]+)\\.pug\\"\\)', replace: 'require("$1.js")', flags: 'g' },
          { search: '\\.call\\(this\\, locals\\)', replace: '.call(this, locals, pug)', flags: 'g' },
        ],
      },
    },
    'extract-loader',
    {
      loader: 'babel-loader',
      options: {
        presets: [['@babel/env', { modules: false, targets: { node: 6 } }]],
      },
    },
    {
      loader: 'pug-loader',
      options: {
        doctype: 'js',
        pretty: false,
      },
    },
  ],
},

Thanks for your help in advance.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions