app-webpack error when "quasar build -m bex" after upgrading to @quasar/app-webpack-v3.4.6

[swtanggara]

What happened?

Yesterday I was upgrading to @quasar/app-webpack-v3.4.6 and quasar-v2.6.2.

Before upgrading I was able to build BEX and the dist directory contains Packaged subdirectory which is contains chrome and firefox subdirectories.

After upgraded, I saw errors on build outputs below.

 Build mode................ bex
 Pkg quasar................ v2.6.2
 Pkg @quasar/app-webpack... v3.4.6
 Pkg webpack............... v5
 Debugging................. no
 Publishing................ no

 Configured browser support (>= 87.51% of global marketshare):
 · Chrome for Android >= 99
 · Firefox for Android >= 96
 · Android >= 99
 · Chrome >= 90
 · Edge >= 96
 · Firefox >= 89
 · iOS >= 12.2-12.5
 · Opera >= 79
 · Safari >= 13.1

{
  dev: false,
  prod: true,
  mode: { bex: true },
  modeName: 'bex',
  target: {},
  targetName: undefined,
  emulator: undefined,
  arch: {},
  archName: undefined,
  bundler: {},
  bundlerName: undefined,
  debug: false,
  publish: undefined,
  vueDevtools: false
}
 App • Chaining "Renderer" Webpack config
 App • Chaining "Main" Webpack config
 App • Cleaned build artifact: "XXX\src\dist\bex"
 App •  WAIT  • Compiling of "Renderer" in progress...
 App •  WAIT  • Compiling of "Main" in progress...
 App •  DONE  • "Main" compiled with success • 11472ms
 App •  DONE  • "Renderer" compiled with success • 15440ms
  TypeError: Cannot read properties of undefined (reading 'sync')
  
  - plugin.bex-packager.js:45 BexPackager.setupDirectories
    [src]/[@quasar]/app-webpack/lib/webpack/bex/plugin.bex-packager.js:45:16
  
  - plugin.bex-packager.js:20
    [src]/[@quasar]/app-webpack/lib/webpack/bex/plugin.bex-packager.js:20:14


  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [src]/[tapable]/lib/Hook.js:18:14

  - Compiler.js:498
    [src]/[webpack]/lib/Compiler.js:498:23

  - Compiler.js:906 Compiler.emitRecords
    [src]/[webpack]/lib/Compiler.js:906:5

  - Compiler.js:490
    [src]/[webpack]/lib/Compiler.js:490:11

  - Compiler.js:872
    [src]/[webpack]/lib/Compiler.js:872:14


  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [src]/[tapable]/lib/Hook.js:18:14

And Packaged directory did not created by build command.

This issue is confirmed because when I tried to create new BEX project with yarn create quasar, then quasar mode add bex and quasar build -m bex, I saw the same error.

What did you expect to happen?

I expected to be able to publish the browser extension from Packaged directory, which is not created by latest version of @quasar/app-webpack-v3.4.6.

Reproduction URL

local

How to reproduce?

1. Create a new quasar project by executing yarn create quasar
2. Add BEX mode by executing quasar mode add bex
3. Build prod BEX with command quasar build -m bex
4. You'll see the errors.

Flavour

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

Areas

BEX Mode

Platforms/Browsers

No response

Quasar info output

Operating System - Windows_NT(10.0.22000) - win32/x64
NodeJs - 16.14.0

Global packages
  NPM - 8.3.1
  yarn - 1.22.18
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.5.1
  cordova - Not installed

Important local packages
  quasar - 2.6.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.4.6 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.13.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  pinia - 2.0.12 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.8 -- Babel compiler core.
  webpack - 5.70.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 - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - XXXXXXX
  Ethernet 2 - xx.xx.xx.xx
  Ethernet 3 - xx.xx.xx.xx
  Wi-Fi - xx.xx.xx.xx
  vEthernet (WSL) - xx.xx.xx.xx

Relevant log output

Build mode................ bex
 Pkg quasar................ v2.6.2
 Pkg @quasar/app-webpack... v3.4.6
 Pkg webpack............... v5
 Debugging................. no
 Publishing................ no

 Configured browser support (>= 87.51% of global marketshare):
 · Chrome for Android >= 99
 · Firefox for Android >= 96
 · Android >= 99
 · Chrome >= 90
 · Edge >= 96
 · Firefox >= 89
 · iOS >= 12.2-12.5
 · Opera >= 79
 · Safari >= 13.1

{
  dev: false,
  prod: true,
  mode: { bex: true },
  modeName: 'bex',
  target: {},
  targetName: undefined,
  emulator: undefined,
  arch: {},
  archName: undefined,
  bundler: {},
  bundlerName: undefined,
  debug: false,
  publish: undefined,
  vueDevtools: false
}
 App • Chaining "Renderer" Webpack config
 App • Chaining "Main" Webpack config
 App • Cleaned build artifact: "XXX\src\dist\bex"
 App •  WAIT  • Compiling of "Renderer" in progress...
 App •  WAIT  • Compiling of "Main" in progress...
 App •  DONE  • "Main" compiled with success • 11472ms
 App •  DONE  • "Renderer" compiled with success • 15440ms
  TypeError: Cannot read properties of undefined (reading 'sync')
  
  - plugin.bex-packager.js:45 BexPackager.setupDirectories
    [src]/[@quasar]/app-webpack/lib/webpack/bex/plugin.bex-packager.js:45:16
  
  - plugin.bex-packager.js:20
    [src]/[@quasar]/app-webpack/lib/webpack/bex/plugin.bex-packager.js:20:14


  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [src]/[tapable]/lib/Hook.js:18:14

  - Compiler.js:498
    [src]/[webpack]/lib/Compiler.js:498:23

  - Compiler.js:906 Compiler.emitRecords
    [src]/[webpack]/lib/Compiler.js:906:5

  - Compiler.js:490
    [src]/[webpack]/lib/Compiler.js:490:11

  - Compiler.js:872
    [src]/[webpack]/lib/Compiler.js:872:14


  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [src]/[tapable]/lib/Hook.js:18:14

Additional context

No response

[github-actions]

Hi @swtanggara! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, 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. 👏

[rstoenescu]

Please downgrade to 3.4.5 until I release the next q/app-webpack version.

[rstoenescu]

Fix will be available in q/app-webpack v3.4.7

[swtanggara]

Thanks @rstoenescu , will downgrade to 3.4.5 first....