Cannot use val-loader alongside apply/pug loaders

[ztzven]

Hey there,

I am trying to require a .pug file, exporting to .html, from my .js files like so..

'use strict';
require('./index.pug')

which should generate ./dest/index.html

I have the following webpack config..

{
  test: /\.pug$/,
  loaders: [
    'file-loader?name=[path][name].html?[hash],context=src',
    'val',
    'apply',
    'pug'
  ]
}

When running webpack I get the following error..

ERROR in ./src/index.pug
Module build failed: Error: Cannot find module '!./../node_modules/pug-runtime/index.js'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/*/src/index.pug:1:73)
    at Module._compile (module.js:556:32)
    at Object.loaderContext.exec (/Users/*/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7)
    at Object.module.exports (/Users/*/node_modules/val-loader/index.js:13:15)
 @ ./src/index.js 3:0-22

If I disable val, the following output (index.html) is produced...

var pug = require("!./../node_modules/pug-runtime/index.js");

function template(locals) {
  // ommitted
};
module.exports = template;

module.exports = module.exports.apply(module, [])

require('halp')
😄

[ztzven]

The reason why I would like to use pug-loader to achieve this, rather than pug-html-loader is due to the fact pug-html-loader does not support doing img(src=require('./img.png')).. (as far as I've tested).

[TimothyGu]

Could you test applying 9429786 commit to your pug-loader installation? I believe it should fix the problem, but I'm a bit ambivalent whether or not it should be the right thing to do. Webpack manual's sample code includes the !-prefix.

[ztzven]

Woop woop! That seemed to work nicely. I'll so some more testing and let you know

[ztzven]

Ok.. so require('./index.pug') builds into a .html file nicely (yey!).. and the function returns a string url: '/index.html?[hash]'. Awesome!

A new error arises if I try to do this within index.pug...
link(rel="import" href=require('./import.pug'))

ERROR in ./src/index.pug
Module build failed: /Users/*/src/import.pug:2
link(rel="import" href="/bower_components/polymer/polymer.html")
         ^^^^^^^^
SyntaxError: missing ) after argument list
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Module.template [as exports] (/Users/*/src/index.pug:3:1458)
    at Object.<anonymous> (/Users/*/src/index.pug:6:33)
 @ ./src/index.js 3:10-32

Not sure if this should be a new issue or not.

[TimothyGu]

This is the same issue. Originally, all requires in the Pug template as well as the require('!.../pug-runtime') you were having troubles with are Webpack-require. As you are actually running the template function on the server, the pug-runtime require doesn't work since it is now Node.js-require. I worked around it by removing !, so that the require works on both Webpack- and Node.js-require.

Unfortunately, now you are trying to use Webpack-require in a template that is run in Node.js. Without a way to polyfill Webpack-require when run in Node.js, I don't see a way to fix this :(

[ztzven]

I believe I'm not running the template function on the ??server??
All of this compilation is done during webpack

entry(index.js) > require('./index.pug') > require('./import.pug')

[ztzven]

Ok.. I think I understand what you mean now 👍

Can you think of any other solutions to my problem?

[morriq]

👍

[akuznetsov-gridgain]

Any plans to fix this issue?
We also faced similar problem.

[nva]

+1

[martynovs]

You can try fix from this PR #67