A Vue error hangs the build in dev mode and silently prevents the webserver from starting #8923

wsw70 · 2021-04-16T15:43:52Z

wsw70
Apr 16, 2021

I use the toggle component in my code:

<q-toggle
              v-model="showOnlyActive"
              checked-icon="clear"
              color="green"
              label="show deleted"
              unchecked-icon="clear"
          />

For some reason (the cat maybe), the code turned to (please look at showOnlyActive, there is an extra !)

<q-toggle
              v-model="!showOnlyActive"
              checked-icon="clear"
              color="green"
              label="show deleted"
              unchecked-icon="clear"
          />

When starting quasar dev it hanged right after the build (froze after the └── SPA ████████████████████ 100% done in 4968 ms line) :

quasar dev

 Dev mode.......... spa
 Pkg quasar........ v1.15.4
 Pkg @quasar/app... v2.1.15
 Debugging......... enabled

 Configured browser support (at least 87.91% of global marketshare):
 · Chrome for Android >= 88
 · Firefox for Android >= 85
 · Android >= 81
 · Chrome >= 78
 · Edge >= 85
 · Firefox >= 76
 · iOS >= 10.3
 · Opera >= 69
 · Safari >= 11

 App · Reading quasar.conf.js
 App · Checking listening address availability (0.0.0.0:8080)...
 App · Not transpiling JS
 App · Extending SPA Webpack config
 App · Generating Webpack entry point
 App · Booting up...

 • Compiling:
 └── SPA ████████████████████ 100% done in 4968 ms

I tried quasar build, it output a bunch of errors and after some staring at the code I realized that there was an extra !.

Shouldn't quasar dev be explicit about the fact that there is a problem with the build?

metalsadman · 2021-04-16T16:00:07Z

metalsadman
Apr 16, 2021
Collaborator

Check for template error in your code that vue-loader isn't catching, also try the build command as it tends to catch this type of error.

4 replies

wsw70 Apr 16, 2021
Author

Thanks - I did find the issue when running quasar build, my question/concern was more about the fact that the error was silently skipped with quasar dev.

Now, from your answer I understand that errors in <template> will not be shown with quasar dev, right?

rstoenescu Apr 16, 2021
Maintainer

It means that there might be an underlying bug in vue-loader. Quasar displays all errors and warnings that it receives.

wsw70 Apr 16, 2021
Author

@rstoenescu What I meant is that there is a difference between the behaviour of dev and build. I put the ! back to create an error and I get

quasar build

 Build mode........ spa
 Pkg quasar........ v1.15.4
 Pkg @quasar/app... v2.1.15
 Debugging......... no
 Publishing........ no

 Configured browser support (at least 87.91% of global marketshare):
 · Chrome for Android >= 88
 · Firefox for Android >= 85
 · Android >= 81
 · Chrome >= 78
 · Edge >= 85
 · Firefox >= 76
 · iOS >= 10.3
 · Opera >= 69
 · Safari >= 11

 App · Reading quasar.conf.js
 App · Not transpiling JS
 App · Extending SPA Webpack config
 App · Cleaned build artifact: "D:\Nextcloud\dev-perso\note\front\dist\spa"
 App · Generating Webpack entry point
 App · Compiling with Webpack...

 • Compiling:
 └── SPA ████████████████████ 100% done in 10111 ms


 App · ⚠️  1 error encountered:

./src/components/DisplayNotes.vue?vue&type=template&id=a607649a&scoped=true& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@quasar/app/lib/webpack/loader.auto-im
port-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DisplayNotes.vue?vue&type=template&id=a607649a&scoped=true&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
  SyntaxError: Assigning to rvalue (1:1726)
  1 : var __render__ = function () {with(this){return (allNotes !== null)?_c('div',[_c('q-input',{ref:"filter",attrs:{"label":"Filter notes..."},scopedSlots:_u([{key:"before",fn:function(){return [_c('q-togg
  le',{attrs:{"label":"also filter note content"},model:{value:(filterContent),callback:function ($$v) {filterContent=$$v},expression:"filterContent"}})]},proxy:true}],null,false,460431704),model:{value:(fil
  ter),callback:function ($$v) {filter=$$v},expression:"filter"}}),_c('div',[_c('q-icon',{attrs:{"name":"autorenew"},on:{"click":function($event){Object.keys(allTags).forEach((x) => (allTags[x] = true))}}}),
  _l((Object.entries(allTags)),function([tag, state]){return _c('q-badge',{key:tag,staticClass:"q-ma-sm",attrs:{"outline":!state,"color":"blue","size":"sm"},on:{"click":function($event){return flipTag(tag)}}
  },[_v("\n      "+_s(tag)+"\n    ")])})],2),_c('q-table',{staticClass:"q-pa-md",attrs:{"columns":columns,"data":filteredNotes,"pagination":pagination,"rows-per-page-options":[0],"hide-bottom":"","row-key":"
  filename","table-header-class":"bg-primary text-white text-bold","title":"Notes"},on:{"update:pagination":function($event){pagination=$event}},scopedSlots:_u([{key:"top",fn:function(){return [_c('div',{sta
  ticClass:"col-1 q-table__title"},[_v(_s(filteredNotes.length)+" Notes")]),_c('q-btn',{attrs:{"color":"green","label":"new note"},on:{"click":function($event){return $emit('new-note')}}}),_c('q-btn',{static
  Class:"q-mx-md",attrs:{"color":"blue","label":"reload"},on:{"click":function($event){return $emit('get-list')}}}),_c('q-space'),_c('q-toggle',{attrs:{"checked-icon":"clear","color":"green","label":"show de
  leted","unchecked-icon":"clear"},model:{value:(!alsoShowDeleted),callback:function ($$v) {!alsoShowDeleted=$$v},expression:"!alsoShowDeleted"}})]},proxy:true},{key:"body",fn:function(props){return [_c('q-t
  r',{attrs:{"props":props}},[_c('q-td',[_c('q-btn',{attrs:{"color":"green","icon":"edit","round":"","size":"sm"},on:{"click":function($event){return $emit('edit-note', props.row['id'])}}})],1),_c('q-td',{ke
  y:"title",attrs:{"props":props}},[_v("\n          "+_s(props.row.title)+"\n        ")]),_c('q-td',{key:"tags",attrs:{"props":props}},_l((props.row.tags),function(tag){return _c('span',{key:tag},[_c('q-badg
  e',{staticClass:"q-ma-sm",attrs:{"color":"blue"}},[_v("\n              "+_s(tag)+"\n            ")])],1)}),0),_c('q-td',{key:"modified",attrs:{"props":props}},[_v("\n          "+_s(DateTime.fromISO(props.r
  ow.modified).toRelative())+"\n          "),(isLessThan24hFromNowInThePast(props.row.modified))?_c('q-icon',{attrs:{"color":"red","name":"local_fire_department","size":"sm"}}):_e()],1),_c('q-td',{key:"expir
  es",attrs:{"props":props}},[(isLessThan24hFromNowInTheFuture(props.row.expires))?_c('q-icon',{attrs:{"color":"orange","name":"report_problem","size":"sm"}}):_e(),_v("\n          "+_s(DateTime.fromISO(props
  .row.expires).toRelative())+"\n        ")],1),_c('q-td',[_c('q-btn',{attrs:{"color":"black","icon":"delete","round":"","size":"sm"},on:{"click":function($event){return $emit('delete-note', {
  
  
  
  
  
  
  
  
                                                                                            ^

  - buble.js:2757 Parser.pp$4.raise
    [front]/[vue-template-es2015-compiler]/buble.js:2757:13

  - buble.js:1624 Parser.pp$2.toAssignable
    [front]/[vue-template-es2015-compiler]/buble.js:1624:12

  - buble.js:1930 Parser.pp$3.parseMaybeAssign
    [front]/[vue-template-es2015-compiler]/buble.js:1930:47

  - buble.js:1896 Parser.pp$3.parseExpression
    [front]/[vue-template-es2015-compiler]/buble.js:1896:19

  - buble.js:815 Parser.pp$1.parseStatement
    [front]/[vue-template-es2015-compiler]/buble.js:815:45

  - buble.js:6116 Parser.parseStatement
    [front]/[vue-template-es2015-compiler]/buble.js:6116:31

  - buble.js:1112 Parser.pp$1.parseBlock
    [front]/[vue-template-es2015-compiler]/buble.js:1112:23

  - buble.js:2600 Parser.pp$3.parseFunctionBody
    [front]/[vue-template-es2015-compiler]/buble.js:2600:22

  - buble.js:1219 Parser.pp$1.parseFunction
    [front]/[vue-template-es2015-compiler]/buble.js:1219:8

  - buble.js:2184 Parser.pp$3.parseExprAtom
    [front]/[vue-template-es2015-compiler]/buble.js:2184:17

  - buble.js:6003 Parser.<anonymous>
    [front]/[vue-template-es2015-compiler]/buble.js:6003:24

  - buble.js:6129 Parser.parseExprAtom
    [front]/[vue-template-es2015-compiler]/buble.js:6129:31

  - buble.js:2047 Parser.pp$3.parseExprSubscripts
    [front]/[vue-template-es2015-compiler]/buble.js:2047:19

  - buble.js:2024 Parser.pp$3.parseMaybeUnary
    [front]/[vue-template-es2015-compiler]/buble.js:2024:17

  - buble.js:1966 Parser.pp$3.parseExprOps
    [front]/[vue-template-es2015-compiler]/buble.js:1966:19

  - buble.js:1949 Parser.pp$3.parseMaybeConditional
    [front]/[vue-template-es2015-compiler]/buble.js:1949:19


 @ ./src/components/DisplayNotes.vue?vue&type=template&id=a607649a&scoped=true& 1:0-300 1:0-300
 @ ./src/components/DisplayNotes.vue
 @ ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/
layouts/MainLayout.vue?vue&type=script&lang=js&
 @ ./src/layouts/MainLayout.vue?vue&type=script&lang=js&
 @ ./src/layouts/MainLayout.vue
 @ ./src/router/routes.js
 @ ./src/router/index.js
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js

 App · ⚠️  [FAIL] Build failed with 1 error. Check log above.

and then with quasar dev

quasar dev

 Dev mode.......... spa
 Pkg quasar........ v1.15.4
 Pkg @quasar/app... v2.1.15
 Debugging......... enabled

 Configured browser support (at least 87.91% of global marketshare):
 · Chrome for Android >= 88
 · Firefox for Android >= 85
 · Android >= 81
 · Chrome >= 78
 · Edge >= 85
 · Firefox >= 76
 · iOS >= 10.3
 · Opera >= 69
 · Safari >= 11

 App · Reading quasar.conf.js
 App · Checking listening address availability (0.0.0.0:8080)...
 App · Not transpiling JS
 App · Extending SPA Webpack config
 App · Generating Webpack entry point
 App · Booting up...

 • Compiling:
 └── SPA ████████████████████ 100% done in 5719 ms

(it hangs there, with the CPU spiking on `Node.js`)

If this indeed an issue with Vue I will post it over there, just wanted to make sure as it is something happening between the failed build and the start of the webserver.

metalsadman Apr 16, 2021
Collaborator

Now, from your answer I understand that errors in <template> will not be shown with quasar dev, right?

It's intermittent, as this is handled by vue-loader and out of quasar's reach.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A Vue error hangs the build in dev mode and silently prevents the webserver from starting #8923

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

A Vue error hangs the build in dev mode and silently prevents the webserver from starting #8923

wsw70 Apr 16, 2021

Replies: 1 comment · 4 replies

metalsadman Apr 16, 2021 Collaborator

wsw70 Apr 16, 2021 Author

rstoenescu Apr 16, 2021 Maintainer

wsw70 Apr 16, 2021 Author

metalsadman Apr 16, 2021 Collaborator

wsw70
Apr 16, 2021

Replies: 1 comment 4 replies

metalsadman
Apr 16, 2021
Collaborator

wsw70 Apr 16, 2021
Author

rstoenescu Apr 16, 2021
Maintainer

wsw70 Apr 16, 2021
Author

metalsadman Apr 16, 2021
Collaborator