Upgrade @ quasar/app webpack v4.1.0， Resulting in compiling twice every startup

[wenbinwumei]

What happened?

I just upgraded the project's Quasar to v2.17.7 and Quasar/app webpack to v4.1.0. After adjusting the relevant configurations, I found that it compiles twice every time it starts

What did you expect to happen?

Tell me where the configuration is problematic or how to solve it

Reproduction URL

localhost:8080

How to reproduce?

/* eslint-env node */

/*

• This file runs in a Node context (it's NOT transpiled by Babel), so use only
• the ES6 features that are supported by your Node version. https://node.green/
  */

// Configuration for your app
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js
import path from 'path'
import {defineConfig} from '#q-app/wrappers'

export default defineConfig((ctx) => {
return {
// https://v2.quasar.dev/quasar-cli-webpack/supporting-ts
supportTS: false,

    // https://v2.quasar.dev/quasar-cli-webpack/prefetch-feature
    // preFetch: true,

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-webpack/boot-files
    boot: [
        'axios',
        'bus',
        'directive',
        'permission',
        'plugin',
        'theme',
        'version',
    ],

    // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
    css: [
        'app.scss'
    ],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
        // 'ionicons-v4',
        // 'mdi-v5',
        // 'fontawesome-v6',
        // 'eva-icons',
        // 'themify',
        // 'line-awesome',
        // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

        // 'roboto-font', // optional, you are not bound to it
        'material-icons', // optional, you are not bound to it
    ],

    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
    build: {
        vueRouterMode: 'hash', // available values: 'hash', 'history'

        // transpile: false,
        publicPath: '/admin',

        // Add dependencies for transpiling with Babel (Array of string/regex)
        // (from node_modules, which are by default not transpiled).
        // Applies only if "transpile" is set to true.
        // transpileDependencies: [],

        // rtl: true, // https://quasar.dev/options/rtl-support
        // preloadChunks: true,
        // showProgress: false,
        // gzip: true,
        // analyze: true,

        // Options below are automatically set depending on the env, set them if you want to override
        extractCSS: false,
        extendWebpack(cfg) {
            cfg.resolve.alias = {
                ...cfg.resolve.alias,
                '@': path.resolve(__dirname, 'src')
            }
        },
        // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
        // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain

        chainWebpack(chain) {
            chain.resolve.symlinks(false)
            chain.resolve.alias.set('vue', path.resolve('./node_modules/vue'))
        }

    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-devServer
    devServer: {
        port: ctx.mode.spa ? 8080 : (ctx.mode.capacitor ? 9000 : 9090),
        open: true, // opens browser window automatically
    },

    // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
    framework: {
        config: {},

        iconSet: 'material-icons', // Quasar icon set
        lang: 'zh-CN', // Quasar language pack

        // For special cases outside of where the auto-import strategy can have an impact
        // (like functional components as one of the examples),
        // you can manually specify Quasar components/directives to be available everywhere:
        //
        // components: [],
        // directives: [],

        // Quasar plugins
        plugins: [
            'Notify',
            'Cookies',
            'SessionStorage',
            'LocalStorage',
            'Loading',
            'LoadingBar',
            'Dialog',
            'AppFullscreen',
        ]
    },

    animations: 'all', // --- includes all animations
    // https://quasar.dev/options/animations
    // animations: [],

    // https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
    ssr: {
        pwa: false,

        // manualStoreHydration: true,
        // manualPostHydrationTrigger: true,

        prodPort: 3000, // The default port that the production server should use
                        // (gets superseded if process.env.PORT is specified at runtime)

        maxAge: 1000 * 60 * 60 * 24 * 30,
        // Tell browser when a file from the server should expire from cache (in ms)


        chainWebpackWebserver(/* chain */) {
        },


        middlewares: [
            ctx.prod ? 'compression' : '',
            'render' // keep this as last one
        ]
    },

    // https://v2.quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa
    pwa: {
        workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
        workboxOptions: {}, // only for GenerateSW

        // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
        // if using workbox in InjectManifest mode

        chainWebpackCustomSW(/* chain */) {
        },


        manifest: {
            name: `Quasar App`,
            short_name: `Quasar App`,
            description: `A Quasar Project`,
            display: 'standalone',
            orientation: 'portrait',
            background_color: '#ffffff',
            theme_color: '#027be3',
            icons: [
                {
                    src: 'icons/icon-128x128.png',
                    sizes: '128x128',
                    type: 'image/png'
                },
                {
                    src: 'icons/icon-192x192.png',
                    sizes: '192x192',
                    type: 'image/png'
                },
                {
                    src: 'icons/icon-256x256.png',
                    sizes: '256x256',
                    type: 'image/png'
                },
                {
                    src: 'icons/icon-384x384.png',
                    sizes: '384x384',
                    type: 'image/png'
                },
                {
                    src: 'icons/icon-512x512.png',
                    sizes: '512x512',
                    type: 'image/png'
                }
            ]
        }
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-cordova-apps/configuring-cordova
    cordova: {
        // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-capacitor-apps/configuring-capacitor
    capacitor: {
        hideSplashscreen: true
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
    electron: {
        bundler: 'packager', // 'packager' or 'builder'

        packager: {
            // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

            // OS X / Mac App Store
            // appBundleId: '',
            // appCategoryType: '',
            // osxSign: '',
            // protocol: 'myapp://path',

            // Windows only
            // win32metadata: { ... }
        },

        builder: {
            // https://www.electron.build/configuration/configuration

            appId: 'zhfz-v6-admin'
        },

        // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain

        chainWebpackMain(/* chain */) {
        },


        chainWebpackPreload(/* chain */) {
        },

    }
}

});

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Chrome

Quasar info output

"C:\Program Files\nodejs\npm.cmd" run dev

> admin-v6@0.0.1 dev
> quasar dev


 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

 App • Using quasar.config.js in "esm" format
 App •  TIP  • 🚀  You (or an AE) specified an explicit quasar.config file > devServer > port. It is recommended to use a different devServer > port for each Quasar mode to avoid browser cache issues. Example: ctx.mode.ssr ? 9100 : ...
 App • Using .env files: .env, .env.dev, .env.local.dev
 App •  WAIT  • Compiling of "SPA UI" by Webpack in progress...
 App •  DONE  • "SPA UI" compiled with success by Webpack • 101588ms

 » Reported at............... 2025/2/17 17:16:27
 » App dir................... E:\Work\Project\admin-v6
 » App URL................... http://192.168.43.1:8080/admin/
                              http://192.168.61.1:8080/admin/
                              http://192.168.1.200:8080/admin/
                              http://localhost:8080/admin/
                              http://172.26.192.1:8080/admin/
                              http://172.24.0.1:8080/admin/
 » Dev mode.................. spa
 » Pkg quasar................ v2.17.7
 » Pkg @quasar/app-webpack... v4.1.0
 » Webpack transpiled JS..... yes (Babel)

 App •  WAIT  • Compiling of "SPA UI" by Webpack in progress...
 App • Opening default browser at http://localhost:8080/admin/

 App •  DONE  • "SPA UI" compiled with success by Webpack • 86818ms

 » Reported at............... 2025/2/17 17:17:55
 » App dir................... E:\Work\Project\admin-v6
 » App URL................... http://192.168.43.1:8080/admin/
                              http://192.168.61.1:8080/admin/
                              http://192.168.1.200:8080/admin/
                              http://localhost:8080/admin/
                              http://172.26.192.1:8080/admin/
                              http://172.24.0.1:8080/admin/
 » Dev mode.................. spa
 » Pkg quasar................ v2.17.7
 » Pkg @quasar/app-webpack... v4.1.0
 » Webpack transpiled JS..... yes (Babel)

Relevant log output

Additional context

No response

[github-actions]

Hi @wenbinwumei! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, CodeSandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[wenbinwumei]

I created another empty project and upgraded the version to the latest version, but the log still shows that it needs to be loaded twice. What's going on

[wenbinwumei]

Isn't there anyone there

[drgrice1]

I am seeing the same thing. This happens with a default quasar project created with npm init quasar@latest. I chose App with Quasar CLI, let's go, the default project folder, Typescript for the script type, Quasar App CLI with Webpack, the default package name, product name, and project description, Composition API with <script setup> for the Vue component style, Sass with SCSS syntax for the CSS preprocessor, selected Linting (ESLint), State Management (Pinia), and axios for the features, added Prettier for code formatting, and chose Yes, use npm for installing the project dependencies. When I run quasar dev the project builds twice.

I don't think you really need a reproduction URL for this. Just try what I described.

[flaviodonze]

Same here with webpack 4.2.0 and quasar 2.18.1:

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
	   Y8b

 App • Using quasar.config.ts in "ts" format
 App •  TIP  • 🚀  You (or an AE) specified an explicit quasar.config file > devServer > port. It is recommended to use a different devServer > port for each Quasar mode to avoid browser cache issues. Example: ctx.mode.ssr ? 9100 : ...
 App •  WAIT  • Compiling of "SPA UI" by Webpack in progress...
 App •  DONE  • "SPA UI" compiled with success by Webpack • 44785ms

 » Reported at............... 7.5.2025 15:36:03
 » App dir................... (REMOVED)
 » App URL................... http://[::1]:9096/comp/
 » Dev mode.................. spa
 » Pkg quasar................ v2.18.1
 » Pkg @quasar/app-webpack... v4.2.0
 » Webpack transpiled JS..... yes (Babel)

 App •  WAIT  • Compiling of "SPA UI" by Webpack in progress...
 App •  DONE  • "SPA UI" compiled with success by Webpack • 17908ms

 » Reported at............... 7.5.2025 15:36:21
 » App dir................... (REMOVED)
 » App URL................... http://[::1]:9096/comp/
 » Dev mode.................. spa
 » Pkg quasar................ v2.18.1
 » Pkg @quasar/app-webpack... v4.2.0
 » Webpack transpiled JS..... yes (Babel)

[DouglasCalora]

I have the same issue, any news?

[DouglasCalora]

I'm using app-webpack 4.2.0

[arquirupim]

same issue in app-webpack4.2.0

[wenbinwumei]

Using the latest version of app-vite, there are no such issues. How to solve problems like app-webpack and who knows how to notify the author

[arquirupim]

I was see same issue when I use uncorrected proxy object in app-vite, app-webpack
After change my project to app-vite and fix proxy setting, I didn't see problem