Quasar Framework

cd

@dobbel Trying many things; going through many threads to see if I can get to the bottom of this, but always good to share in case anyone else is experiencing the same issue.

Seems more specifically related to the TS linting configuration; seems like it’s not jiving with the Quasar config file.

Other paths I’m checking:

https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/issues/453

https://forum.quasar-framework.org/topic/5397/huge-compilation-time-with-quasar-cli-typescript/5

BTW, you an see from my earlier post, I have already tried changing the node runtime heap configuration.

cd

Not sure what changed, but issue is popping up again.

Seems like the memoryLimit config is being ignored now.

i ｢wds｣: Project is running at http://0.0.0.0:8080/
i ｢wds｣: webpack output is served from
 App · Opening default browser at http://localhost:8080


<--- Last few GCs --->

[12232:000001950A921120]    41179 ms: Mark-sweep (reduce) 2044.3 (2052.0) -> 2043.2 (2053.0) MB, 695.9 / 0.0 ms  (average mu = 0.100, current mu = 0.015) allocation failure scavenge might not succeed
[12232:000001950A921120]    41871 ms: Mark-sweep (reduce) 2044.4 (2055.3) -> 2043.4 (2055.5) MB, 682.5 / 0.0 ms  (average mu = 0.059, current mu = 0.014) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF67788058F napi_wrap+109311
 2: 00007FF6778252B6 v8::internal::OrderedHashTable<v8::internal::OrderedHashSet,1>::NumberOfElementsOffset+33302
 3: 00007FF677826086 node::OnFatalError+294
 4: 00007FF6780F150E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF6780D638D v8::SharedArrayBuffer::Externalize+781
 6: 00007FF677F8081C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1516
 7: 00007FF677F8BB5A v8::internal::Heap::ProtectUnprotectedMemoryChunks+1258
 8: 00007FF677F88D09 v8::internal::Heap::PageFlagsAreConsistent+2457
 9: 00007FF677F7D931 v8::internal::Heap::CollectGarbage+2033
10: 00007FF677F7BB35 v8::internal::Heap::AllocateExternalBackingStore+1317
11: 00007FF677F9BF27 v8::internal::Factory::NewFillerObject+183
12: 00007FF677CCBFB1 v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1409
13: 00007FF678179EBD v8::internal::SetupIsolateDelegate::SetupHeap+463949
14: 00007FF678113F9D v8::internal::SetupIsolateDelegate::SetupHeap+46381
15: 00000232CFEB7249

cd

@dobbel I was running 12.x and only updated to 14.x to see if this was related to node (some Stackoverflow had indicated issues with node versions in the past).

Seems to be working OK so far, but thanks for the heads up; first thing I’ll try is to downgrade if I run into issues

cd

Facing this issue and unsure how to proceed.

(VS Code on Windows 10)

i ｢wds｣: Project is running at http://0.0.0.0:8080/
i ｢wds｣: webpack output is served from 
 App · Opening default browser at http://localhost:8080


<--- Last few GCs --->

[22388:0000019F8DA1A760]    46355 ms: Mark-sweep (reduce) 2044.5 (2052.1) -> 2043.7 (2053.3) MB, 888.4 / 0.0 ms  (average mu = 0.139, current mu = 0.011) allocation failure scavenge might not succeed
[22388:0000019F8DA1A760]    47207 ms: Mark-sweep (reduce) 2044.8 (2052.3) -> 2043.9 (2052.8) MB, 844.9 / 0.0 ms  (average mu = 0.079, current mu = 0.009) allocation failure scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF7E46F058F napi_wrap+109311
 2: 00007FF7E46952B6 v8::internal::OrderedHashTable<v8::internal::OrderedHashSet,1>::NumberOfElementsOffset+33302
 3: 00007FF7E4696086 node::OnFatalError+294
 4: 00007FF7E4F6150E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF7E4F4638D v8::SharedArrayBuffer::Externalize+781
 6: 00007FF7E4DF081C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1516
 7: 00007FF7E4DFBB5A v8::internal::Heap::ProtectUnprotectedMemoryChunks+1258
 8: 00007FF7E4DF8D09 v8::internal::Heap::PageFlagsAreConsistent+2457
 9: 00007FF7E4DED931 v8::internal::Heap::CollectGarbage+2033
10: 00007FF7E4DEBB35 v8::internal::Heap::AllocateExternalBackingStore+1317
11: 00007FF7E4E0BF27 v8::internal::Factory::NewFillerObject+183
12: 00007FF7E4B3BFB1 v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1409
13: 00007FF7E4FE9EBD v8::internal::SetupIsolateDelegate::SetupHeap+463949
14: 00007FF7E4F7EA86 v8::internal::SetupIsolateDelegate::SetupHeap+24598
15: 00007FF7E4F7E5EF v8::internal::SetupIsolateDelegate::SetupHeap+23423
16: 00007FF7E5068343 v8::internal::SetupIsolateDelegate::SetupHeap+981203
17: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
18: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
19: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
20: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
21: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
22: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
23: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
24: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
25: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
26: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
27: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
28: 00007FF7E4F828A2 v8::internal::SetupIsolateDelegate::SetupHeap+40498
29: 0000013B351B83D9

I updated my package.json like so:

  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./",
    "test": "echo \"No test specified\" && exit 0",
    "dev": "quasar dev"
  },

And ran:

npm run dev --max-old-space-size=8192

npm --max-old-space-size=8192 run dev

Project builds, everything runs, but it seems to crash on the TS linting is my guess (project is TypeScript).

Also set a Windows Environment Variable NODE_OPTIONS set to --max-old-space-size=8192

Running npm run lint works fine; no issues:

npm run lint

> proto1@0.0.1 lint C:\Users\me\Code\proto1
> eslint --ext .js,.ts,.vue ./

node version: 14.5.4
npm version: 6.14.10

UPDATE: Solved the issue by updating quasar.conf.js

Change this:

  return {
    // https://quasar.dev/quasar-cli/supporting-ts
    supportTS: {
      tsCheckerConfig: {
        eslint: true,
      }
    },

to

  return {
    // https://quasar.dev/quasar-cli/supporting-ts
    supportTS: {
      tsCheckerConfig: {
        eslint: {
            enabled: true,
            memoryLimit: 8192
        }
      }
    }

Found the reference information here: https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

Once fixed, it’s possible to run normal quasar dev

Hope this is helpful for others.

cd

@sylnsr : Same issue; spent a whole day on this…

Wasn’t clear at all how the store was supposed to be accessed from code.

cd

This is an interesting topic.

@rstoenescu is there a specific design reason to not support slots?

Imagine a case where I have a main app layout and depending on the specific view, I’d like the right drawer to render different functionality. For example, if I am editing a Contact entity versus an Event entity. A right drawer might render different context specific views for the different entities.

With slots, it would be possible to include the Contact specific right drawer contents in pages/Contact.vue and the Event specific right drawer contents in pages/Event.vue and encapsulate the logic without writing another component.

I understand that there are workarounds as @Martin proposed and other ways of handling it, but it seems like it would be so straightforward to simply use Vue slot behavior to accomplish, no?

cd

@cd

Latest posts made by cd