search

jaeming / vue-cli-plugin-pug

Vue CLI 3 plugin to add pug templating to your components
44 stars 5 forks source link

Vue watcher hangs after a Pug template error #3

Closed ssipos90 closed 5 years ago

ssipos90 commented 5 years ago

Hi,

I've been really enjoying this plugin but this glitch keeps nagging my workflow. From time to time, I make a syntax error (various reasons) and the compiler stops watching. I'm running node:10-alpine docker image on the latest vue ... stack.

// package.json
{
  "dependencies": {
    ...
    "vue": "^2.5.22",
    "vue-router": "^3.0.2",
    "vuetify": "^1.4.2",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    ...
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-cli-plugin-vuetify": "^0.4.6",
    "vue-template-compiler": "^2.5.22",
    "vuetify-loader": "^1.1.1"
  }
}

For example, I was building this template for a spinner loader thing and my IDE auto-completed indeterminate with an =, from the development flow, I hit alt-tab, IDE saves, watcher compiles and:

<template lang="pug">
  v-layout(justify-space-around)
    v-progress-circular(width="5" size="150" indeterminate=)
</template>
 10% building 0/1 modules 1 active ...e/node/app/src/views/import/Loading.vue(node:16) UnhandledPromiseRejectionWarning: Error: Pug:3:58
    1|
    2| v-layout(justify-space-around)
  > 3|   v-progress-circular(width="5" size="150" indeterminate=)
----------------------------------------------------------------^
    4|

Syntax Error: Unexpected token
    at makeError (/home/node/app/node_modules/pug-error/index.js:32:13)
    at Lexer.error (/home/node/app/node_modules/pug-lexer/index.js:59:15)
    at Lexer.assertExpression (/home/node/app/node_modules/pug-lexer/index.js:87:12)
    at Lexer.attributeValue (/home/node/app/node_modules/pug-lexer/index.js:1253:10)
    at Lexer.attribute (/home/node/app/node_modules/pug-lexer/index.js:1114:30)
    at Lexer.attrs (/home/node/app/node_modules/pug-lexer/index.js:1279:20)
    at Lexer.callLexerFunction (/home/node/app/node_modules/pug-lexer/index.js:1456:23)
    at Lexer.advance (/home/node/app/node_modules/pug-lexer/index.js:1493:15)
    at Lexer.callLexerFunction (/home/node/app/node_modules/pug-lexer/index.js:1456:23)
    at Lexer.getTokens (/home/node/app/node_modules/pug-lexer/index.js:1512:12)
    at lex (/home/node/app/node_modules/pug-lexer/index.js:12:42)
    at Object.lex (/home/node/app/node_modules/pug/lib/index.js:99:27)
    at Function.loadString [as string] (/home/node/app/node_modules/pug-load/index.js:44:24)
    at compileBody (/home/node/app/node_modules/pug/lib/index.js:86:18)
    at Object.exports.compile (/home/node/app/node_modules/pug/lib/index.js:242:16)
    at Object.module.exports (/home/node/app/node_modules/vuetify-loader/lib/loader.js:43:42)
(node:16) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:16) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

And the watcher hangs. I need to restart the docker container which means I need to C^c, run docker-compose restart front, docker-compose logs -f front and wait for the compilation (thanks to Webpack4 it's significantly less). Sometimes the socket doesn't reconnect and I need to refresh... 20 times per day :(

Thanks!

ssipos90 commented 5 years ago

IDK if this is a plugin error or a pug compiler error, but it seems more linked to the watcher...

jaeming commented 5 years ago

@ssipos90 Thanks for the report. I haven't been able to reproduce this issue. I can replicate the error but the watcher recovers fine after correcting.

My guess is this issue originates somewhere between docker and Webpack.

This is an unrelated question, but I'm actually kind of curious about the use case of running docker with Vue on the front-end. I've only used it with back-ends like Express and full-stack frameworks like Rails. Yarn is pretty good at doing a proper lock file these days and any CI can initiate a build script.

Getting back on track, since I'm NOT able to reproduce this, do you by chance have a public repo or at least docker-file (and docker-compose file) you can share and I'll have a go at debugging it? This might not be something I can fix with this plugin but I hate to close the issue until I can confirm for sure.

Let me know, thanks!

ssipos90 commented 5 years ago

There you go:

version: '3.7'

services:
  front:
    image: node:10-alpine
    command: ["npm", "run", "serve", "--", "--port=8080", "--host=0.0.0.0"] # vue-cli-service serve
    port:
      - 8080:8080
    working_dir: /home/node/app
    volumes:
      - ./vue/project/path:/home/node/app
ssipos90 commented 5 years ago

IMO, it's probably not from your plugin, but pug or vue-pug something, because errors in .vue files do recover fine.

ssipos90 commented 5 years ago

Although, I can't reproduce it now anymore, but I have updated my NPM packages recently. Let me check what I've changed in GIT and get back to you.

edit

{
...
-    "vue-template-compiler": "^2.5.22",
-    "vuetify-loader": "^1.1.1"
+    "vue-template-compiler": "^2.6.6",
+    "vuetify-loader": "^1.2.1"
...
}

edit2

Also I did an npm audit fix which bumped everything so I guess it's been fixed somewhere in the black hole (node_modules).

edit3

Don't get me wrong, I actually tried debugging the code, but couldn't manage to localize it because async stuff happens.

jaeming commented 5 years ago

glad you were able to solve this btw. Probably a short-lived bug in one of those packages then. Maybe only showed up with pug too. I'm going to close this issue in that case. Let me know if you have any more issues.