Missing quasar source maps?

nejlyn

Hello!

Ever since I upgraded from 0.17 to v1, when I try to use the javascript debugger in Chrome, the quasar code is minified, which is making it hard to figure out some of my problems. I’m not that familiar with webpack, but I think this means source maps aren’t working properly? I’m launching quasar with “quasar dev”.

Oddly enough, Chrome thinks it is showing me the source map. The subtitle in the code window reads “source mapped from quasar.esm.js” but it’s minified/uglified.

Anyone know what’s going on?

Thanks!
-Jenny

My specs in case it’s helpful:

Mac OSX Mojave
Chrome: Version 75.0.3770.100 (Official Build) (64-bit)

Operating System - Darwin(18.5.0) - darwin/x64
NodeJs - 11.15.0

Global packages
  NPM - 6.9.0
  yarn - Not installed
  @quasar/cli - 1.0.0-rc.2
  cordova - Not installed

Important local packages
  quasar - 1.0.0-rc.5 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
  @quasar/app - 1.0.0-rc.7 -- Quasar Framework App CLI
  @quasar/extras - 1.1.4 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.6 -- Official router for Vue.js 2
  vuex - 3.1.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.4.5 -- Babel compiler core.
  webpack - 4.34.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  *None installed*

metalsadman

@nejlyn try using yarn, delete your node_modules folder then yarn install, also quasar upgrade -i after that.

nejlyn

Thanks for the suggestion! Unfortunately, it didn’t seem to make a difference.

njsteele

im also having this problem. Any suggestions?

erakis

I have the same problem too.

I’ve tried many things like

Removed node_modules and reinstall all
Run quasar upgrade -i
Play with a couple of webpack settings in quasar-conf.js file
Running quasar --debug build before running quasar dev
Remove all global packages yarn/npm related to quasar, quasar/cli, quasar/app, etc…
Put a debugger; call in the created() event of App.vue.
Try with another browser, like Firefox

Nothing work, the debugger is NOT fired. Worst, I’ve also notice that I only see the bundled code on the browser, no source code at all.

Here is my quasar-conf.js -> https://pastebin.com/KMq5RDgt
quasar info -> https://pastebin.com/RVjXRpCu

Could it be related to this bug/fix f241fa28405448aea9e872a23ce2a0cd ? If yes, which version should I use ? And how to properly replace it.

I’m definitely stuck.

Hawkeye64

yes, so it’s not uglified, you were supposed to be able to do a quasar build --debug, but it was broken and no one reported in over a year.
Just added yesterday: https://github.com/quasarframework/quasar/commit/66d0618784ee659f2a4cb54d43459006ae00bacc
It will be in next release…

erakis

Thank you @Hawkeye64,

In the mean time until the next release, what could I do to get debug working because I’m stuck ? Use github repo directly from package.json ?
How much time before releasing the next release ?
I’m a bit lost, what is the difference between quasarand quasar/app ?.

no one reported in over a year.

Does it means that no one debug on the browser side since one year or no one use the version 1.x ?
From which version it stop working, maybe could a downgrade until the next release ?

Hawkeye64

@erakis

I use quasar dev for debugging. The issue is quasar build --debug when you want to build for production and debug that.
I don’t know when the next release will be.
quasar refers to the @quasar/cli that is globally installed. @quasar/app is installed into your project as a devDependency. The cli is used mostly for making a new project. When it’s called to do something other than that, it looks for the @quasar/app in your project and passes off information and @quasar/app takes over. This is how @quasar/cli can still be compatible with v.17 versions.
Again, most developers debug using quarar dev. The only time you need quasar build --debug is when there are issues running after deployment and you need to figure out why.
It’s been in v1 the whole time. I am not sure if v.17 has the same issue as well and it was brought forward into v1

erakis

@Hawkeye64

I’m getting this problem using quasar dev and not quasar build .... The problem is that I’m unable to debug vue file with the code source on the Browser side. It’s like bundled code only…

Even if I put the debugger; keyword in the created event of App.vue, it is not fired at all.

To be more clear, here is what I’ve done :

> yarn global add @quasar/cli
> quasar create test-3

# ESLint, Vuex, Axios, Vue-i18n, IE11 support, yarn, Airbnb, etc...

> cd test-3
> quasar dev

 Dev mode.......... spa
 Pkg quasar........ v1.1.6
 Pkg @quasar/app... v1.1.3
 Debugging......... enabled

 app:quasar-conf Reading quasar.conf.js +0ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +16ms
 app:webpack Extending SPA Webpack config +613ms
 app:generator Generating Webpack entry point +297ms
 app:dev-server Booting up... +19ms


 SPA █████████████████████████ [100%] in ~14s

This is what it look like when browsing the source code on Chrome : https://imgur.com/a/BLyToF4

Could it be related to missing or broken source map ? I’m not really a pro for Webpack stuff related, so I’m kindly stuck.

Note that debugging *.js file work however.

All of that was properly working until I migrate from v0.15 to v1.

I tried on different computer, different OS ((Windows, Linux Arch), same problem.

Is there something I don’t understand about debugging ?

Hawkeye64

I think this really depends on how you did your migration.
Did you create a new project and migrate your source code only?
If so, then I don’t think that would be the problem.
If not, then you probably missed something for configuration.

erakis

@Hawkeye64

In my previous post I explain that I created a fresh new project named test-3. I created it from a new computer, also on a (Linux/Windows), same problem… So the migration issue can be dismissed.

As I wrote on Discord :

I’m now able to debug but what I did not see is that I need to scroll down 202 lines of commented blank code until I could saw the debuggable source code. Also I had found at random the file that contains the real source code of Preference.vue?xxx…

Screenshot: https://imgur.com/a/8n5ROBG

As I remember… this was not like that before v1

Hawkeye64

@erakis
This has nothing to do with Quasar. This is how webpack works. And, they have been busy making things better. I don’t know why your situation is different. Would be nice if you were able to try this on a new system (like Virtualbox ubuntu/windows). Just to make sure it’s not your own issue. I still feel it’s one of your installed globals that needs updating. Or, you migrated from 0.17, but kept some of the 0.17 configuration, instead of using the v1.

erakis

@Hawkeye64 said in Missing quasar source maps?:

Would be nice if you were able to try this on a new system (like Virtualbox ubuntu/windows).

I already did that on my personnal laptop on (Arch Linux) where I never done any Quasar, Webpack, yarn, npm/node or Web dev at all.

I’ve also done the same test on the computer (Windows 10 x64) of one of my coworker (embedded c programmer), same problem as a previously mentionned. By same problem I mean look at the screen shot

This is surely related to Webpack but I wanted to be sure that Quasar was not using it incorrectly.

Anyway… things are not perfect for debugging *.Vue file but I will live with that. I’m just surprise that no one else has noticed this problem this problem easily reproducible.

Thank you for your help and patience @Hawkeye64

Hawkeye64

@erakis
The fact of the matter is that this is a localized issue. No one is having the same issue. I regularly debug js and vue files without issues. So, why is it happening to you? No ideas.
Hit me up on discord and I can show you images that look like what you should have.

zoao2

I have the same problem, and I have to put in quasar-conf.js, the section ‘extendWebpack’, like this:
extendWebpack (cfg) {
cfg.devtool = ‘source-map’;
cfg.module.rules.push( …

No More Posting New Topics!

Missing quasar source maps?