How do I enable debug in jade loader about webpack HOT 8 CLOSED

Can you provide more details?

What message do you see? What would you expect?

from webpack.

I am using wpt dev-server.sh

What I see:
- when the jade compile fails, no errors/warnings are shown
- the web pack build succeeds
- in the browser the html body is empty

What I would like to see:
- show all error/warning messages of the jade compile
- if the jade compile fails, then the web pack build should also fail stating which jade file failed

On a related topic: it is also difficult to trace javascript errors, it would save me a lot of time if this could be improved as well
- What I see:
- firebug/chrome dev. tools report errors with a line number in the bundle, and because in debug mode all code is in a string inside an eval statement, the bundle line number just indicates in which file the error occurs. But I get no info about the
actual line number in the source file.
- What I would like to see:
- firebug/chrome dev. tools report the line number of my source file

Thanks,

Kavaro

Op 14-nov.-2012, om 23:14 heeft Tobias Koppers het volgende geschreven:

Can you provide more details?

What message do you see? What would you expect?

—
Reply to this email directly or view it on GitHub.

from webpack.

show all error/warning messages of the jade compile
if the jade compile fails, then the web pack build should also fail stating which jade file failed

I tried it with a(a=a, which make the webpack build fail in cause of a Error from the jade-loader. The Error is weird, in cause of the way jade works. It converts the source code into a function and "evals" it. A syntax error in jade source causes a syntax error in the function's javascript. :(

firebug/chrome dev. tools report the line number of my source file

This should be so. (I fixed a bug in the jade-loader and it should be so for jade also)
You need to have the dev tools open while opening the site.

The evaling with //@ sourceURL=... should do the trick. Chrome version? Firebug version?

In Chrome dev tools it looks like this:

Uncaught ReferenceError: !C:\Users\Sokrates\temp\testapp\app\test.jade:2
    1| h1 Hello World
  > 2| a(a=a

a is not defined 

webpack-module:///./~/jade-loader!./app/test.jade:28

webpack-module:///./~/jade-loader!./app/test.jade:28 is a clickable link which opens the "Source" tab with the compiled "test.jade" source only. On the left side is a hierachie with all loaded webpack modules.

from webpack.

How do I install your fix ?

Have changed my package.json devDependencies to the following:

    "devDependencies": {
        "wpt": "0.5.x",
        "webpack": "0.8.x",
        "webpack-dev-server": "0.8.x",
        "enhanced-require": "0.4.x",
        "coffee-loader": "0.2.x",
        "jade-loader": "0.2.2",  // NEW JADE LOADER ???
        "json-loader": "0.2.x",
        "raw-loader": "0.2.x",
        "express": "3.0.x"
    },

followed by 'npm install'

Introduced the error: a(a=a,

The html body is now empty, so, for sure there is a jade error, however dev-server.sh does not fail and there are no error messages.
I gues I am not using the right versions.
Can you check the above package.json and see what I am missing ?

On the issue about javascript source files:
- I have firebug open when loading, so, this should not be the issue.
- In chrome I am able to see the line number by expanding the given error message, so, this is fine

However in firebug I get the following message: (the error is ReferenceError: doesnotexist, this error occurs in ../../app.js line 15, however I don't see the source line number), I am using firefox 16.0.2

"Resuming debugger: error during debugging loop: TypeError: firstViewRangeElement is null"
ReferenceError: doesnotexist is not defined

(15 out of range 3)
Error: Argument 'tapController' is not a function, got undefined
assertArg@http://localhost:8081/assets/dev.bundle.js:1010
assertArgFn@http://localhost:8081/assets/dev.bundle.js:1021
@http://localhost:8081/assets/dev.bundle.js:4655
@http://localhost:8081/assets/dev.bundle.js:4237
forEach@http://localhost:8081/assets/dev.bundle.js:154
nodeLinkFn@http://localhost:8081/assets/dev.bundle.js:4222
compositeLinkFn@http://localhost:8081/assets/dev.bundle.js:3871
@http://localhost:8081/assets/dev.bundle.js:3783
@http://localhost:8081/assets/dev.bundle.js:969
@http://localhost:8081/assets/dev.bundle.js:7845
@http://localhost:8081/assets/dev.bundle.js:7925
@http://localhost:8081/assets/dev.bundle.js:967
invoke@http://localhost:8081/assets/dev.bundle.js:2825
bootstrap@http://localhost:8081/assets/dev.bundle.js:966
angularInit@http://localhost:8081/assets/dev.bundle.js:941
@http://localhost:8081/assets/dev.bundle.js:14434
trigger@http://localhost:8081/assets/dev.bundle.js:1732
@http://localhost:8081/assets/dev.bundle.js:1967
forEach@http://localhost:8081/assets/dev.bundle.js:147
@http://localhost:8081/assets/dev.bundle.js:1966
(5563 out of range 3)

Op 15-nov.-2012, om 09:26 heeft Tobias Koppers het volgende geschreven:

show all error/warning messages of the jade compile
if the jade compile fails, then the web pack build should also fail stating which jade file failed

I tried it with a(a=a, which make the webpack build fail in cause of a Error from the jade-loader. The Error is weird, in cause of the way jade works. It converts the source code into a function and "evals" it. A syntax error in jade source causes a syntax error in the function's javascript. :(

firebug/chrome dev. tools report the line number of my source file

This should be so. (I fixed a bug in the jade-loader and it should be so for jade also)
You need to have the dev tools open while opening the site.

The evaling with //@ sourceURL=... should do the trick. Chrome version? Firebug version?

In Chrome dev tools it looks like this:

Uncaught ReferenceError: !C:\Users\Sokrates\temp\testapp\app\test.jade:2
1| h1 Hello World

2| a(a=a

a is not defined

webpack-module:///.//jade-loader!./app/test.jade:28
webpack-module:///.//jade-loader!./app/test.jade:28 is a clickable link which opens the "Source" tab with the compiled "test.jade" source only. On the left side is a hierachie with all loaded webpack modules.

—
Reply to this email directly or view it on GitHub.

from webpack.

ok something seem to be buggy...

maybe this applies here: http://code.google.com/p/fbug/issues/detail?id=2198

You can disable the "eval" stuff with

wpt enable customWebpackOptions

and add these lines to webpackOptionsDevServer.js

options.debug = false;
options.includeFilenames = true; // this include filenames in comments

or use chrome for debugging

npm ls

[email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │   ├─┬ [email protected]
│ │   │ └── [email protected]
│ │   ├── [email protected]
│ │   ├─┬ [email protected]
│ │   │ ├── [email protected]
│ │   │ ├── [email protected]
│ │   │ └── [email protected]
│ │   └── [email protected]
│ ├── [email protected]
│ └── [email protected]
└─┬ [email protected]
  ├── [email protected]
  ├── [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  └─┬ [email protected]
    └── [email protected]

from webpack.

Seem to be a firebug bug: http://groups.google.com/group/firebug/browse_thread/thread/8632fe7e6a7e1c4f

Your package.json is ok, you can even leave it 0.2.x.

Unfortually npm update --dev do not work :(, so you have to npm uninstall jade-loader && npm install (bug in npm?)

from webpack.

Thx for the super fast responses.

There indeed seems to be a firebug bug :-)
Will switch to chrome until firefox fixes this issue, no problem .

Tried the new jade-loader using a fresh install with the latest wpt:
- sudo npm install wpt -g
- wpt create test-app
- cd test-app
- npm install
- edit _template/index.jade to introduce error: a(a=a,
- dev-server.sh
- The build stops with an error, great
Next I tried the following:
- remove the error from _template/index.jade
- edit app/body.jade (which is by default required from _template/index.jade)
- introduce the same error in app/body.jade: a(a=a,
- dev-server.sh
- In this case the build succeeds and no error message is given. Chrome dev.tools show an empty body tag, which confirms there should have been an error.
I gues this explains why I was not able to get the same error messages as you. I was introducing errors in body.jade and not in index.jade

Any ideas why an error in body.jade does not cause an error message and stop the build.

Op 15-nov.-2012, om 13:50 heeft Tobias Koppers het volgende geschreven:

Seem to be a firebug bug: http://groups.google.com/group/firebug/browse_thread/thread/8632fe7e6a7e1c4f

Your package.json is ok, you can even leave it 0.2.x.

Unfortually npm update --dev do not work :(, so you have to npm uninstall jade-loader && npm install (bug in npm?)

—
Reply to this email directly or view it on GitHub.

from webpack.

ah ok...

Now I see the problem...

First you should not edit any file in _template ;)... app/body.jade is the right place, BUT app/body.jade and app/head.jade are not build with webpack they are build with enhanced-require while starting the dev-server and I ignored any error because the files are optional.

// _template/index.jade
- try {
!= require("../app/body.jade")(locals)
- } catch(e) {}

I'll replace this with file existance detection, so it fail if a error in the jade occurs.

I thought you did something like

// app/app.js
var template = require("./test.jade");
document.write(template());

To update to a new wpt version run:

npm uninstall wpt && npm install
wpt init

from webpack.