Sourcemaps not generated after Quasar update anymore

RolandCsibrei

I did an update

 @quasar/extras: 1.6.0 → 1.8.2
 quasar: 1.9.10 → 1.12.3
 @quasar/app: 1.6.0 → 1.9.6

Starting the server with quasar dev produces no source maps or the source maps are not picked up by Chrome, like before.

Can anyone help me?

Thanks!

R.

UPDATE:

Source maps are generated, but it shows the transpilled code in Chrome debugger.

quasar.config.js:

 build: {
      scopeHoisting: true,
       vueRouterMode: 'history',
       showProgress: true,
       devtool:"source-map",
      // gzip: true,
      // analyze: true,
      // preloadChunks: false,
      // extractCSS: false,

      // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
      chainWebpack (cfg) {
        cfg.plugins.delete('named-chunks')
      },
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            fix: true,
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        })
      }
    },

babel.config.js:

module.exports = {
  presets: ["@quasar/babel-preset-app"],

  plugins: [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
};

.eslintrc.js

module.exports = {
  root: true,

  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },

  env: {
    browser: true
  },

  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    '@vue/standard'
  ],

  // required to lint *.vue files
  plugins: [
    'vue'
  ],

  globals: {
    'ga': true, // Google Analytics
    'cordova': true,
    '__statics': true,
    'process': true,
    'Capacitor': true,
    'chrome': true
  },

  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow paren-less arrow functions
    'arrow-parens': 'off',
    'one-var': 'off',    
    'import/first': 'off',
    'import/named': 'error',
    'import/namespace': 'error',
    'import/default': 'error',
    'import/export': 'error',
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'import/no-extraneous-dependencies': 'off',
    'prefer-promise-reject-errors': 'off',

    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

mpr

I have the same problem. Until recently debugging of the Quasar App in Chrome worked fine, but now something is going wrong with the source maps.

As far as I can tell, it seems that the update to @quasar/app >= 1.9.0 brought the problem. It’s also not working with @quasar/app 2.0.1 for me.

I tried with different strategies for devtool, without the explicit setting and with ‘source-map’.
(By the way sometimes I see the use of ‘#source-map’. Is the # needed here or not ?)

Debugging works fine in my environment for a very simple Vue app without Quasar, using webpack 4.43.0 and debugging with IntelliJ and Chrome.

Has anyone an idea what is going wrong and/or how to fix it ?

Thanks
Martin

dobbel

sounds like a pretty serious obstacle for debugging for Quasar. I could not find a github issue about this yet. Maybe a good idea to create one.

Allan-EN-GB

We have an issue for it and are looking into it: https://github.com/quasarframework/quasar/issues/7318

mpr

Thanks a lot. It’s good to know that there is already an issue for it. (Sorry I have not found it myself).

Good luck for finding the issue.

Allan-EN-GB

So far it seems it’s related to “auto” import of components.

Setting the value to all seems to resolve the problem - can anyone else confirm this for me please?

Allan-EN-GB

I’ve narrowed down the cause and am making progress. Can confirm it’s definitely auto import related.

Allan-EN-GB

A fix has been PR’d for this: https://github.com/quasarframework/quasar/pull/7328

We’ll be preparing an update early next week all being well which will address this and some other PR’s .

mpr

@Allan-EN-GB Thanks a lot.
I can confirm that using importStrategy: ‘all’ solves the problem immediately.
Looking forward to the update and again thank you very much.

Sacrekin

importStrategy: “all” defeats all the tree shaking, so it is not suitable for me. Also, I am using the --modern switch to bypass Babel & compile in ES6. Does that have an impact?

Sacrekin

One request for the fix: in the sourceMap, please do restore the template. At the moment, in one of the multiple sourceMaps generated, one does reflect my source code but the template code is removed from it.

Allan-EN-GB

importStrategy: “all” is a temp work around to get your source maps working for dev; we’re not suggesting you release a production app with it. Wait for the update next week for that

I’m not sure what you mean about “restore the template”, however, the fix is in place and will stand as it’s the correct fix for this issue. If there is something else that needs changing please file a feature request on GH issues with a detailed explanation of what and why.

No More Posting New Topics!

Sourcemaps not generated after Quasar update anymore