pugjs / pug-loader Goto Github PK
View Code? Open in Web Editor NEWPug loader module for Webpack
License: MIT License
Pug loader module for Webpack
License: MIT License
When an included pug file is changed, the compilation process is not triggered.
The problem does not occur when using import in the stylus-loader for example.
1. git clone https://github.com/FranzSkuffka/pug-html-loader-bug
2. npm i
3. npm run dev
4. change https://github.com/FranzSkuffka/pug-html-loader-bug/blob/master/src/yo.pug
5. ???
6. no profit
`Module build failed: Error: Cannot find module 'pug-walk' from '/Users/removed/workspace/projectNameRemoved/node_modules/pug/lib'
This appears to happen on modulePaths.walk = nodeResolve("pug-walk", {basedir: dirname(modulePaths.pug)});
Hey there,
It looks like after 0.6.0, non-inlined includes can have the wrong context if the include is in an 'each' block. For example, this jade:
each highlight in highlights
li
include highlight
Expanded to:
for (var $index = 0, $$l = $$obj.length; $index < $$l; $index++) {
var highlight = $$obj[$index];
buf.push("<li>" + (null == (jade_interp = __webpack_require__(81).call(this, locals)) ? "" : jade_interp) + "</li>");
But the include is being called with "locals" only and doesn't have the 'highlight' variable in scope anymore. The documentation for jade doesn't say what the exact behavior of the include is, but there are a lot of snippets on the internet that imply the include will have the full scope of the parent including the variable you are looping over. And that's how I was using it.
I'm happy to change my code if rather than fixing this you can think of another way of getting proper partial support with jade-loader.
Thanks!
content in pug file:
if user.token
p hello
running pug like this:
let template = require('pug!templates/menuNotification.pug');
getting error:
Module build failed: Error: /Users/admin/projects/gfwhitelabels/webpack/node_modules/pug-loader/index.js!/Users/admin/projects/gfwhitelabels/webpack/src/templates/menuNotification.pug:5:1
3| function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;;var locals_for_with = (locals || {});(function (user) {if (user.token) {
4| pug_html = pug_html + "\u003Cli class=\"nav-item notification notification-bell text-center\"\u003E\u003Ca href=\"#\"\u003E\u003Ci class=\"fa fa-bell-o\"\u003E\u003Cspan class=\"count-notific\"\u003E5\u003C\u002Fspan\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cdiv class=\"list-container notification-container\"\u003E\u003Cul class=\"submenu list-unstyled\"\u003E \u003Cli class=\"clearfix title nav-link\"\u003E\u003Cspan class=\"pull-left\"\u003E\u003Cb\u003E5 pending \u003C\u002Fb\u003E comments\u003C\u002Fspan\u003E\u003Ca class=\"pull-right\" href=\"#\"\u003E view all\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli class=\"clearfix nav-link\"\u003E\u003Cspan class=\"pull-left\"\u003EMaria Kravchuk wrote...\u003C\u002Fspan\u003E\u003Ci class=\"pull-right\"\u003Ejust now\u003C\u002Fi\u003E\u003C\u002Fli\u003E\u003Cli class=\"clearfix nav-link\"\u003E\u003Cspan class=\"pull-left\"\u003EMaria Kravchuk wrote...\u003C\u002Fspan\u003E\u003Ci class=\"pull-right\"\u003Ejust now\u003C\u002Fi\u003E\u003C\u002Fli\u003E\u003Cli class=\"clearfix nav-link\"\u003E\u003Cspan class=\"pull-left\"\u003EMaria Kravchuk wrote...\u003C\u002Fspan\u003E\u003Ci class=\"pull-right\"\u003Ejust now\u003C\u002Fi\u003E\u003C\u002Fli\u003E\u003Cli class=\"clearfix nav-link\"\u003E\u003Cspan class=\"pull-left\"\u003EMaria Kravchuk wrote...\u003C\u002Fspan\u003E\u003Ci class=\"pull-right\"\u003Ejust now\u003C\u002Fi\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fdiv\u003E\u003C\u002Fli\u003E";
> 5| }}.call(this,"user" in locals_for_with?locals_for_with.user:typeof user!=="undefined"?user:undefined));;return pug_html;};
6| module.exports = template;
unexpected text "}}.ca"
at makeError (/Users/admin/projects/gfwhitelabels/webpack/node_modules/pug-error/index.js:32:13)
at Lexer.error (/Users/admin/projects/gfwhitelabels/webpack/node_modules/pug-lexer/index.js:58:15)
looks like pug generate template functions with .call and there is no way to
-redacted-
Hello, i changed jade-loader to pug-loader, and my build doesn'to work now:
webpack config: http://pastebin.com/CWVx3v2S
Run:
./node_modules/.bin/webpack --progress --watch --inline -p --devtool
Code:
main.js:
var a = require('pug/timeline.pug')({
table: 'table___3AgIg',
date: 'date___2SiYk'
});
timeline.pug:
div(class=`${table} ${date}`)
Console:
ERROR in main.bundle.js from UglifyJs
SyntaxError: Unexpected character '`' [../~/pug-loader?{"pretty":true}!./pug/timeline.pug:4,0]
Tests:
YES:
div(class=table)
//- <div class="table___3AgIg"></div>
div(class=table + ' ' + date)
//- <div class="table___3AgIg date___2SiYk"></div>
div(class=`${'str'}`)
//- <div class="str"></div>
NO:
div(class="#{table} #{date}")
//- <div class="#{table} #{date}"></div>
div(class='#{table} #{date}')
//- <div class="#{table} #{date}"></div>
div(class=`#{table} #{date}`)
//- <div class="#{table} #{date}"></div>
div(class="${table} ${date}")
//- <div class="${table} ${date}"></div>
div(class='${table} ${date}')
//- <div class="${table} ${date}"></div>
ERROR: WHY ?????
div(class=`${table} ${date}`)
SyntaxError: Unexpected character '`' [../~/pug-loader?{"pretty":true}!./pug/timeline.pug:4,0]
And funny thing:
node pug_test.js
:
var pug = require('pug');
var html = pug.renderFile('./src/pug/timeline.pug', {
table: 'table___3AgIg',
date: 'date___2SiYk'
});
console.dir(html);
Outputs:
'<div class="table___3AgIg date___2SiYk"></div>'
This problem occurs only when im using -p
parameter http://webpack.github.io/docs/cli.html#production-shortcut-p
When including a .pug file as a template in HtmlWebpackPlugin:
plugins: [
new HtmlWebpackPlugin({
template: '!!pug!./app/index.pug'
})
]
//- index.pug
doctype html
html
head
title Page Title
body
h1 Pug Template
include partial.pug
//- partial.pug
h2 This was included from partial.pug
Executing webpack-dev-server throws
ERROR in ./app/partial.pug
Module parse failed: /path/to/pug-loader--bug/app/partial.pug Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:3)
But if I either add a mixin to partial.pug:
h2 This was included from partial.pug
mixin m
p
Or add a loader to webpack.config.js:
module: {
loaders: [
{
test: /\.pug$/,
loader: 'pug'
}
]
}
everything works.
Simply requiring index.pug in a javascript file works properly, mixin or no mixin.
To summarize:
--- | Loader | Mixin |
---|---|---|
Breaks | X | X |
Works | V | X |
Works | X | V |
Works | V | V |
How can mere presence of a mixin make or break include? I have no idea.
Test repo
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')
😄
As of now, getFileContent
cannot process absolute paths like include /base
.
In jade, include /base
is resolved relative to options.basedir
, see https://github.com/visionmedia/jade/blob/master/lib/parser.js#L466-L469.
So it is actually taken from options.basedir
, that we take as correct.
In jade-loader
, it is converted to .//base
in the first line of getFileContent
:
function getFileContent(context, request) {
request = /^~/.test(request) ? request.substr(1) : "./" + request;
...and taken from the current folder, that's wrong.
Hi guys.
This loader is very good. But I really want to combine this with https://github.com/teux/ng-cache-loader but this loader only accept string, how can i config this to return string to use like this. Thanks !
{test: /\.jade/, loader: "jade-loader!ng-cache?prefix=[dir]/[dir]"},
Is it possible to resolve 'em like CSS @import
ones?
via webpack
When the jade template inside the "include" keyword, "jade-loader" module is called 2 times; I hide 171 lines of code, "jade-loader" module to load the normal jade template. You can test according to the following steps:
1、git clone https://github.com/fengxinming/koa-demo
2、npm install
3、npm run dev or npm run build
Hey there, thanks for the loader,
I get the following warning when running Webpack with this loader.
WARNING in ./~/jade/lib/runtime.js
Module not found: Error: Cannot resolve module 'fs' in /Users/Username/Dev/www/project/node_modules/jade/lib
@ ./~/jade/lib/runtime.js 180:18-31
I think found a possible solution which I think you actually gave @sokra. https://gitter.im/webpack/webpack/archives/2014/08/26 looks like you need to add
"browser": { "fs": false }
https://github.com/kangax/fabric.js/blob/master/package.json#L17-L21
Could be alos that I screwed something up, thanks in advance for any help
When requiring CSS modules (ex: - styles = require('!css?modules!./styles.css')
), it seems that what's returned to Jade/Pug is the output CSS string, not the object with original classname keys. Is there a way to ensure that the module map is returned to jade?
I am trying to use jade-loader in combination with html-loader to be able to omit requires in jade. I have tried a few things, none of them worked.
By default jade-loader works when using img(src=require("../../../../assets/images/imac.png") alt="computer")
, with the following webpack config:
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/app.js'
],
context: path.resolve(__dirname + "/client"),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
// placed here so we know that it is done before transpiling
preLoaders: [
{ test: /\.js$/, loader: "eslint-loader", exclude: [/node_modules/, /\.config\.js/, /\.conf\.js/ ] }
],
loaders: [
{ test: /\.html$/, loader: 'raw' },
{ test: /\.jade$/, loader: 'jade-loader' },
{ test: /\.less$/, loader: 'style!css!less' },
{ test: /\.css/, loader: 'style!css' },
{ test: /\.(png|jpg|jpeg|svg)$/, loader: 'file' },
{ test: /\.js$/, loader: 'babel?stage=1', exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
]
},
eslint: {
configFile: './.eslintrc'
}
};
If I add the html-loader ({ test: /\.jade$/, loader: 'html-loader!jade-loader' }
) which is supposed to require sources by default, I keep getting the 'Error: Module not found'. The console logs all the paths that it tried, all relative to the current working file.
I tried to give it some context, with context: path.resolve(__dirname + "/client")
. It didn't work either.
I also tried to combine with the raw loader: raw-loader!html-loader!jade-loader
. I don't get the error but the wepback output that is served is not my app at all, but instead something along the lines of:
var jade = require(/......) ....
Do you have any idea ?
Thanks for your help
It generates a template function like what is in https://jsbin.com/garepe/1/edit?js,console
I'm assuming the self
is missing there when it is actually parsing the variables in the template.
I've been attempting to upgrade from jade-loader
to pug-loader
, but trying to include
a nested template generates broken tags that look to be created from the raw JS template function, instead of the expected HTML output.
// index.pug
doctype html
html
head
body
#loading
include ./components/Spinner/fouc-spinner.pug
#root
// ./components/Spinner/fouc-spinner.pug
.spinner-grid-fouc
.spinner-cube.spinner-cube1
.spinner-cube.spinner-cube2
.spinner-cube.spinner-cube3
.spinner-cube.spinner-cube4
.spinner-cube.spinner-cube5
.spinner-cube.spinner-cube6
.spinner-cube.spinner-cube7
.spinner-cube.spinner-cube8
.spinner-cube.spinner-cube9
becomes:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="loading"><var>pug = require("!./../../../node_modules/pug-runtime/index.js");</var><function>template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;var pug_indent = [];</function><pug_html>= pug_html + "\n\u003Cdiv class=\"spinner-grid-fouc\"\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube1\"\u003E\u003C\u002Fdiv\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube2\"\u003E\u003C\u002Fdiv\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube3\"\u003E\u003C\u002Fdiv\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube4\"\u003E\u003C\u002Fdiv\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube5\"\u003E\u003C\u002Fdiv\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube6\"\u003E\u003C\u002Fdiv\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube7\"\u003E\u003C\u002Fdiv\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube8\"\u003E\u003C\u002Fdiv\u003E\n \u003Cdiv class=\"spinner-cube spinner-cube9\"\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fdiv\u003E";;return pug_html;};</pug_html><module class="exports">= template;</module>
</div>
<div id="root"></div>
</body>
</html>
img(src=require("./my/image.png"))
is fine but what about background-image:url(...) ?
div(style='background-image:url(require("./my/image.png))')
does not seem to work 😞
There are bunch of bugs and PRs that are not merged.
Hello, my problem :
I do :
const template = require('../templates/home')
But i have this error in the browser console :
home.pug?46b2:10Uncaught TypeError: Cannot read property 'length' of undefined
It's on :
if ('number' == typeof pug_obj0.length) [....]
In this example you would expect that myScopedVar
is available in low_level_template.pug
.
for myScopedVar in [1, 2, 3]
include low_level_template
But it's not. That's a huge deal for me because that's how it works in your node module used for expressjs. That's also how most people assume it should work 1 2. Also that's how jadeify does it.
Here is a testcase example (please follow the steps from readme.md) and watch the browser console output. The problem that the isomorphic_template gets compiled with this line:
for (var pug_index0 = 0, pug_length0 = pug_obj0.length; pug_index0 < pug_length0; pug_index0++) {
var myScopedVar = pug_obj0[pug_index0];
pug_html = pug_html + (null == (pug_interp = __webpack_require__(9).call(this, locals)) ? "" : pug_interp);
}
it's clear to see that myScopedVar
is set but not provided to the module 9 (which is the low_level_template.pug
file). Jadeify would "inline" this template so the var scope is still present.
With jade being renamed to pug, it seems appropriate the loader do such as well. Thoughts?
ERROR in ./src/index.pug
Module build failed: Error: Cannot find module '/Users/studentIvan/projects/frontend/src/node_modules/pug-runtime/index.js'
Why it searching node_modules not in webpack config directory?
I just trying to use jade-loader, and it works very well, with auto replacement, in this configuration:
{
test: /\.pug/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].html'
}
},
{
loader: 'extract-loader'
},
{
loader: 'apply-loader'
},
{
loader: 'jade-loader',
options: {
pretty: true,
root: path.resolve(__dirname, 'src')
}
},
]
}
the same configuration with pug-loader:
ERROR in ./src/index.pug
Module build failed: Error: Cannot find module '/Users/studentIvan/projects/frontend/src/node_modules/pug-runtime/index.js'
The real node_modules places inside /Users/studentIvan/projects/frontend/
Doesn't seem like this loader supports jade's extends [name]
inheritance..
doctype 5
html
body
<h1>Test</h1>
block content
extends one
block content
p Hello!
console.log( require('./two.jade')() );
Webpack complains that it can't find module two.jade.
What is the recommended approach here?
For now, I switched to a grunt task that compiles each template using jade -c
& then lets webpack eat the precompiled templates.
I'm new to webpack and it would be great if the docs included an example config.
For instance:
html
resulting on an HTML file?locals
?Thank you
Any reason why it is using the very old jade 0.28.x?
I wanna pass json data and function to pug, so in webpack.config.js
{
test:/\.pug$/,
exclude: ['/node_modules/'],
loader: 'pug',
query: {
locals: {bb:function(str){return str + '444';},aa:'666'},
pretty: true
}
},
in pug files
p!= locals.aa
the p tag will get nothing
so how to pass data to pug, and that will be OK in gulp-jade
, help ,thx
Is it possible convert relative path to absolute url?
meta(property='og:image', content=require("./assets/facebook.png"))
to
<meta property="og:image" content="http://example.com/static/facebook.png" />
extends ./layout //DOESNOT WORK
extends ./layout.jade //WORKS
BUT no problem with .pug
If I have layout2.pug then both of the following works
extends ./layout2
extends ./layout2.pug
Is there some specification as to how a leading /
is handled in extends
or include
statements?
Currently it looks as if the loaderUtils.urlToRequest
method resolves /views/layout.jade
to .//views/layout.jade
, rather than views/layout.jade
The latter would presumably correctly resolve using the modulesDirectories
lookup sequence?
Terrific plugin, and I have immense thanks for your creating it. I am having a bit of trouble of using it. I have included it as a loader and requiring it in my index.js. http://stackoverflow.com/questions/32633472/how-does-one-target-a-template-function-in-webpack-using-jade-loader-for-instan
Perhaps we can put in a bit more detail of how to use it. I would be more than happy to pay for more documentation. Feel free to reach out.
How to import a component by simple import of .pug file? I need all styles and js files to be automatically connected.
This is likely a config issue, but I'm new to Webpack and haven't been able to figure it out after a few days. I'd appreciate some help! Let me know if this isn't the appropriate venue, or if additional details would be helpful.
Packages:
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
// ...
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".json", ".js", ".jade" ],
root: [ path.join(__dirname, 'src/js'), path.join(__dirname, 'node_modules') ],
modulesDirectories: ['node_modules'],
},
module: {
loaders: [
{ test: /\.json$/, loader: "json-loader" },
{ test: /modernizr/, loader: "imports?this=>window!exports?window.Modernizr" },
{ text: /\.jade$/, loader: "jade-loader" }
]
}
// ...
};
With a completely empty entry file, I get the following error when trying to run webpack.
ERROR in ./~/jade/lib/runtime.js
Module build failed: Error: unexpected token "indent"
at MyParser.Parser.parseExpr (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:252:15)
at MyParser.Parser.parse (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:122:25)
at parse (/Users/name/project/code/assets/node_modules/jade/lib/index.js:104:21)
at Object.exports.compileClientWithDependenciesTracked (/Users/name/project/code/assets/node_modules/jade/lib/index.js:256:16)
at Object.exports.compileClient (/Users/name/project/code/assets/node_modules/jade/lib/index.js:289:18)
at run (/Users/name/project/code/assets/node_modules/jade-loader/index.js:170:24)
at Object.module.exports (/Users/name/project/code/assets/node_modules/jade-loader/index.js:167:2)
@ ./entry.js 1:11-85
If I actually require a jade file within entry.js, I get a different error:
ERROR in ./entry.js
Module build failed: Error: unexpected text ;
var
at Object.Lexer.fail (/Users/name/project/code/assets/node_modules/jade/lib/lexer.js:871:11)
at Object.Lexer.next (/Users/name/project/code/assets/node_modules/jade/lib/lexer.js:930:15)
at Object.Lexer.lookahead (/Users/name/project/code/assets/node_modules/jade/lib/lexer.js:113:46)
at MyParser.Parser.lookahead (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:102:23)
at MyParser.Parser.peek (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:79:17)
at MyParser.Parser.tag (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:752:22)
at MyParser.Parser.parseTag (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:738:17)
at MyParser.Parser.parseExpr (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:211:21)
at MyParser.Parser.parse (/Users/name/project/code/assets/node_modules/jade/lib/parser.js:122:25)
at parse (/Users/name/project/code/assets/node_modules/jade/lib/index.js:104:21)
However, if I comment out the jade loader line in webpack.config.js
and require the jade file with the inline syntax require('jade!template.jade')
-- everything works okay.
Any idea what's up?
Using this loader how can I make some vairable accessible to all pug/jade files. For example in express app I could do:
app.locals.assetPath = path.resolve('public/assets');
and the variable assetPath
would be available in all jade files. But with webpack I am not able to do the same.
In my webpack.config.js
I tried following but could not get work:
{
test: /.pug$/,
loader: 'pug',
query: {
root: path.join(__dirname, 'src/app'),
/*globals: {assetPath: '/hard/coded/value'}*/ //WILL NOT WORK
/*locals: {assetPath: '/hard/coded/value'}*/ //WILL NOT WORK
/*locals: {assetPath: '/hard/coded/value'}, globals: ['assetPath']*/ //WILL NOT WORK
}
Is there an option for this? I'd like <img/>
and <br/>
tags etc...
Using the following webpack configuration, I am unable to use the provided global variables within the pug
template file. This may be a misuse of the globals
object, but coming from a previous Gulp pipeline, provided data was done in a similar nature with success.
Pug loader
{
test:/\.pug$/,
loader: 'pug-loader',
query: {
globals: {
foo: "bar"
}
}
}
HTML Webpack plugin
var htmlWebpackPlugin = new HtmlWebpackPlugin({
template: './src/index.pug',
inject: 'body',
hash: true
})
Template
doctype html
html(lang="en")
head
body
div Foo value: #{foo}
Consider the following template:
include mixins
+mixin
include _partial
Usually, _partial.jade
may also use mixins. No need to reenclude.
However, with jade-loader
it's not the case. _partial
must include mixins
too, otherwise things break.
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.
test.txt
The attachment template file
image src not handled any way. I want to use file-loader with it (like in stylus-loader)
If I have a file list.layout.pug and extending this file from another like:
extends ./list.layout // DOES NOT WORK
extends ./list.layout.pug //WORKS
The peer dependency jade@^1.7.0 included from jade-loader will no longer be automatically installed to fulfill the peerDependency in npm 3+. Your application will need to depend on it explicitly.
Not sure the best solution, but probably needs to be updated soon to work properly with npm 3.
// var.jade
-var path='test';
// meta.jade
include ./var.jade;
// index.jade
doctype html
html
head
include ./meta.jade
body
include ./header
// header.jade
p #{path}
[REDACTED]/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
r.forEach(function(r) {
^
TypeError: undefined is not a function
at [REDACTED]/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81:5
at Array.reduce (native)
at LoadersList.match ([REDACTED]/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:80:27)
at [REDACTED]/node_modules/webpack/lib/NormalModuleFactory.js:111:68
at [REDACTED]/node_modules/webpack/node_modules/async/lib/async.js:726:13
at [REDACTED]/node_modules/webpack/node_modules/async/lib/async.js:52:16
at done ([REDACTED]/node_modules/webpack/node_modules/async/lib/async.js:246:17)
at [REDACTED]/node_modules/webpack/node_modules/async/lib/async.js:44:16
at [REDACTED]/node_modules/webpack/node_modules/async/lib/async.js:723:17
at [REDACTED]/node_modules/webpack/node_modules/async/lib/async.js:167:37
at [REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:28:24
at onResolved ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:39:10)
at [REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:123:21
at [REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:191:15
at applyPluginsParallelBailResult.createInnerCallback.log ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:104:30)
at loggingCallbackWrapper ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
at [REDACTED]/node_modules/webpack/node_modules/tapable/lib/Tapable.js:134:6
at innerCallback ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:90:37)
at loggingCallbackWrapper ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
at [REDACTED]/node_modules/webpack/node_modules/tapable/lib/Tapable.js:134:6
at Tapable.<anonymous> ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryDescriptionFileFieldAliasPlugin.js:101:26)
at [REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryDescriptionFileFieldAliasPlugin.js:52:26
at Storage.provide ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
at CachedInputFileSystem.readFile ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
at findDescriptionFile ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryDescriptionFileFieldAliasPlugin.js:16:23)
at [REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryDescriptionFileFieldAliasPlugin.js:22:13
at Storage.provide ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
at CachedInputFileSystem.readFile ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
at findDescriptionFile ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryDescriptionFileFieldAliasPlugin.js:16:23)
at [REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryDescriptionFileFieldAliasPlugin.js:22:13
at Storage.finished ([REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at [REDACTED]/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:76:16
at fs.js:263:20
at FSReqWrap.oncomplete (fs.js:95:15)
Hi! I'm using this for a simple Vue application, with the simplest possible stock webpack settings, and am not able to use pug-loader effectively. I can confirm the dep is there in node_modules
, as well as the pug peer dep.
What am I missing?
This is my webpack.config.js (paths altered, but barely)
var webpack = require("webpack");
var path = require("path");
module.exports = {
entry: 'path/to/assets/js/src/entry.ts',
output: {
path: path.resolve('path/to/assets/js/dist'),
filename: "app.js"
},
resolve: {
root: ['path/to/assets/js/src','path/to/assets','./node_modules'],
extensions:['','.js','.pug'],
alias: {
"vue$": path.resolve("./node_modules/vue/dist/vue.common.js"),
"templates": path.resolve("../path/to/templates")
}
},
module: {
loaders: [
{test: /\.pug$/, loader: 'pug-loader', query: {root: path.resolve("../path/to/templates")}},
{test: /\.ts$/, loader: 'ts-loader'}
]
},
plugins: [
/* //uncomment to uglify
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
dead_code: true,
conditionals: true,
comparisons: true,
evaluate: true,
booleans: true,
unused: true,
loops: true,
hoist_funs: true,
cascade: true,
if_return: true,
join_vars: true
},
mangle: {
toplevel: true,
sort: true,
eval: true,
properties: true
},
sourcemaps: false
})*///, //uncomment this to do vendoring. See https://www.npmjs.com/package/webpack-split-by-path for docs
//new SplitByPathPlugin([
// { name: 'vendor', path: path.join(__dirname, 'node_modules')},
// ], { manifest: 'app-entry'}
// )
]};
when i use pug-loader load .jade get result without collapseWhitespace, but i need result with collapseWhitespace, help?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.