Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Improve SSR debugging with SourceMap

See original GitHub issue

Vue.js version

2.x.x

Reproduction Link

Because it is a ssr issue and hard to provide a running demo online, please see Steps to reproduce

Steps to reproduce

clone the https://github.com/vuejs/vue-hackernews-2.0.git repostory
edit file src/\components/ItemList.vue to cause an error. For example:

// ...
import Spinner from './Spinner.vue'
import Item from './Item.vue'
import { watchList } from '../store/api'
// abc is a undeclared variable that can cause a ReferenceError
console.log(abc)
// ...

then run npm run build, npm run start in command line
open browser and navigate to http://localhost:8080
the command line will report some error info as below:

error during render : /
ReferenceError: abc is not defined
    at Object.module.exports.exports.default.props (__vue_ssr_bundle__:388:13)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.__vue_styles__ (__vue_ssr_bundle__:994:19)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.module.exports (__vue_ssr_bundle__:866:83)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:650:80)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.exports.default.name (__vue_ssr_bundle__:224:66)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)

What is Expected?

The error info in the command line should include the specific file path and line number, for example:

ReferenceError: abc is not defined
    at src/components/ItemList.vue (26:13)
    ...

What is actually happening?

Error info dose not include the file path and line number that cause the error to produce…

I know it is the bundle render that cause the error hard to locate. And is there any solution, like soucemap, that can solve this debug issuse with bundle render?

Issue Analytics

State:
Created 7 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

14reactions

yyx990803commented, Feb 14, 2017

Implemented and will ship in 2.2.

8reactions

thkdogcommented, Apr 21, 2017

First of all, devtool: 'sourcemap' has to be added to webpack.config to enable source map output, which is not documented clearly. And I have maps:[] output in the bundle file, but I still get unclear error from node output. It’s not what I expected…

2017-04-21 16:08:32,168 GET /sample/ssr status 204 (rt: 25ms)
[Vue warn]: Error in data():
(found in <Root>)
Cannot read property 'text' of undefined
TypeError: Cannot read property 'text' of undefined
    at Vue$2.data (main.js:303:30)
    at Vue$2.mergedInstanceDataFn (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:1025:20)
    at getData (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:2751:17)
    at initData (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:2720:7)
    at initState (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:2661:5)
    at Vue$2.Vue._init (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:3752:5)
    at new Vue$2 (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:3845:8)
    at Object.<anonymous> (public/error/404/entry-ssr.js:5:12)
    at __webpack_require__ (webpack:/webpack/bootstrap 4db82d0f851ec15f529c:19:0)
    at main.js:67:18