pugjs / pug-loader Goto Github PK

View Code? Open in Web Editor NEW

425.0 13.0 119.0 45 KB

Pug loader module for Webpack

License: MIT License

JavaScript 100.00%

pug-loader's Introduction

pug-loader

Pug loader for webpack.

Usage

var template = require("pug-loader!./file.pug");
// => returns file.pug content as template function

// or, if you've bound .pug to pug-loader
var template = require("./file.pug");

var locals = { /* ... */ };

var html = template(locals);
// => the rendered HTML

For more information on how to use webpack loaders, check the official documentation.

In order to obtain the rendered HTML at compile time, combine this loader with apply-loader:

var html = require("apply-loader!pug-loader!./file.pug");
// => the HTML is rendered at compile time

Legacy `.jade` files

pug-loader fully supports .jade files. Just use pug-loader with .jade files as you would with a .pug file.

Includes

If you are using includes, you must make sure that .pug (and if needed for legacy files, .jade) is bound to pug-loader. Check the webpack documentation on how to do that for CLI and for configuration files.

Options

The following options are available to be set for the loader. They are all mapped directly to Pug options, unless pointed out otherwise.

doctype
- Unlike Pug, it defaults to "html" if not set
globals
self
plugins
- Note that you cannot specify any Pug plugins implementing read or resolve hooks, as those are reserved for the loader
pretty
filters
root
- webpack uses its own file resolving mechanism, so while it is functionally equivalent to the Pug option with the same name, it is implemented differently

Embedded resources

Try to use require for all your embedded resources, to process them with webpack.

div
  img(src=require("./my/image.png"))

Remember, you need to configure loaders for these file types too. You might be interested in the file loader.

License

MIT

pug-loader's People

Contributors

Stargazers

Watchers

Forkers

justmoon sandwich99 forivall zalad dmvk kmalakoff craga89 akre54 craftzdog coobaha actano let4be colelawrence akvadrako st44100 muratcorlu ty3uk ntotten pmowrer kevinsimper bostonncity bivihoba carrot emilnordh nathanhleung-forks csxphil simbo kaelig tdzienniak densebrain antpaw akkuma db-murphy bleech vladcalm tk-archer ortoo schleumer samogot indooorsman pinpickle dumconstantin simon04 artisin kucharskimaciej gastonite christianhg etheryte isnan909 dralc nicholaslee119 carduz tusbar leenty codecombat bpiwowar devanb ceidion stungkit gao-jx zzdumeng tatianapost thecsea piprees leemove ubunteroz sachiotomita dennispassway terrorizer1980 rmw-lib deedw dvem newagebegins m10 nes-si orbit-love spence-s abdihaikal tokino omtg vdh valentyi-macpaw aporlando akturatech csrobot tsuzuki557 creativspeed moteesh-reddy ztrehagem rittyan althomppdx ofertorio romancow yarsento nilivo mrdarcymurphy profesor08 isabella232 dantheman827 dustin-ruetz

pug-loader's Issues

How can i treat jade-loader to return string instead of template function

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]"},

Cannot resolve module 'pug-loader'

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'}
		// )
	]};

Self closed tags?

Is there an option for this? I'd like <img/> and <br/> tags etc...

Allow to pass doctype option

about collapseWhitespace

when i use pug-loader load .jade get result without collapseWhitespace, but i need result with collapseWhitespace, help?

how about `include require('text.md')` ?

via webpack

Variable not shared

//  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}

Increase documentation

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.

Rename to pug

With jade being renamed to pug, it seems appropriate the loader do such as well. Thoughts?

"jade-loader" is called continuous 2 times

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

Can you NPM Publish v2.2.0?

Variables defined inside template don't work

-redacted-

[globals] query object doesn't seem to work for template usage

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}

Handle `extends` and `Includes` keywords

Is it possible to resolve 'em like CSS @import ones?

undefined is not a function

[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)

Incompatible include handling

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.

Include breaks inside a template with HtmlWebpackPlugin

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

Cannot read property 'length' of undefined (of pug_obj0.length)

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) [....]

Doesnot support multiple dots in file name while extending

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

npm 3 peerDependencies

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.

Embedded resource with absolute url path (for Open Graph)

Is it possible convert relative path to absolute url?

meta(property='og:image', content=require("./assets/facebook.png"))

<meta property="og:image" content="http://example.com/static/facebook.png" />

Broken with npm 2

`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)});

Change not triggered when included file is updated.

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

Including other templates returns broken JS instead of HTML in 2.1.0

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>

Example

I'm new to webpack and it would be great if the docs included an example config.

For instance:

How do I save the html resulting on an HTML file?
How do I config the var locals?

Thank you

Require modules by default (img src)

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

Update jade version

Any reason why it is using the very old jade 0.28.x?

is this library still maintained?

There are bunch of bugs and PRs that are not merged.

extends/include root handling (basedir)

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?

Template Inheritance

Doesn't seem like this loader supports jade's extends [name] inheritance..

one.jade

doctype 5
html
    body
        <h1>Test</h1>
        block content

two.jade

extends one

block content
    p Hello!

project.js

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.

Fails with absolute paths

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.

[BUG] Template scope variables are not passed to the include template

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.

URA Error: the "filename" option is required to use includes and extends with "relative" paths

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/

Locals not being passed through correctly

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.

Cannot resolve module 'fs'

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

broken include inside EACH block

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!

Requiring CSS modules

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?

if conditions seems not work

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

Using the "jade-loader" module loading jade file error, using the "jade" module compiler will not complain, test the template as follows

test.txt
The attachment template file

Cannot use val-loader alongside apply/pug loaders

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')
😄

Module build failed

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 1.9.8
jade-loader 0.7.1
jade 1.9.2

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?

cannot pass data or loacals to pug

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

img(src="./local/image.png")

image src not handled any way. I want to use file-loader with it (like in stylus-loader)

Make variable accessible in all pug files

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
      }

Stackoverflow

import of component

How to import a component by simple import of .pug file? I need all styles and js files to be automatically connected.

Background image

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 😞

Doesnot support legacy *.jade in include when ommiting extension

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

使用jade-loader报错，见截图，我直接用gulp-jade编译jade文件没有问题，可以编译成js

SyntaxError: Unexpected character '`'

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

_input.charCodeAt is not a function

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.