Cannot find module 'autoprefixer'

[francoism90]

What happened?

$ quasar upgrade -i

Quasar CLI · Gathering information with yarn...

quasar: 2.5.3 → 2.5.5 @quasar/app: 3.3.2 → 3.3.3

What did you expect to happen?

Process the CSS

Reproduction URL

https://codepen.io/rstoenescu/pen/xxEvBLR

How to reproduce?

1. Upgrade to latest versions
2. Run quasar build -m spa

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

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

Platforms/Browsers

Firefox, Other

Quasar info output

Operating System - Linux(5.16.8-zen1-1-zen) - linux/x64
NodeJs - 17.3.0

Global packages
  NPM - 8.4.1
  yarn - 1.22.17
  @quasar/cli - 1.2.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.5.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.3.3 -- Quasar Framework local CLI
  @quasar/extras - 1.12.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.29 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.12
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.16.12 -- Babel compiler core.
  webpack - 5.67.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 - 6.4.2 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  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 - 3.4.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 3.4.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 3.4.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[ecofriend]

I get the following error since upgrading to the latest version

Dev mode.......... spa
 Pkg quasar........ v2.5.5
 Pkg @quasar/app... v3.3.3
 Pkg webpack....... v5
 Debugging......... enabled

 Configured browser support (>= 89.47% of global marketshare):
 · Chrome for Android >= 96
 · Firefox for Android >= 94
 · Android >= 96
 · Chrome >= 87
 · Edge >= 93
 · Firefox >= 86
 · iOS >= 12.0-12.1
 · Opera >= 78
 · Safari >= 13

node:internal/modules/cjs/loader:933
  const err = new Error(message);
              ^

[  Error: Cannot find module 'autoprefixer'
  Require stack:
  - C:\Users\Kamal\Documents\mobile-app\hollaback-quasar\.postcssrc.js
  - C:\Users\Kamal\Documents\mobile-app\hollaback-quasar\node_modules\@quasar\app\lib\webpack\inject.style-rules.js
  - C:\Users\Kamal\Documents\mobile-app\hollaback-quasar\node_modules\@quasar\app\lib\webpack\create-chain.js
  - C:\Users\Kamal\Documents\mobile-app\hollaback-quasar\node_modules\@quasar\app\lib\webpack\index.js
  - C:\Users\Kamal\Documents\mobile-app\hollaback-quasar\node_modules\@quasar\app\lib\quasar-conf-file.js
  - C:\Users\Kamal\Documents\mobile-app\hollaback-quasar\node_modules\@quasar\app\bin\quasar-dev
  - C:\Users\Kamal\Documents\mobile-app\hollaback-quasar\node_modules\@quasar\app\bin\quasar
  - C:\Users\Kamal\AppData\Roaming\npm\node_modules\@quasar\cli\bin\quasar

  - loader:933 Function.Module._resolveFilename
    node:internal/modules/cjs/loader:933:15

  - loader:778 Function.Module._load
    node:internal/modules/cjs/loader:778:27

  - loader:1005 Module.require
    node:internal/modules/cjs/loader:1005:19

  - helpers:102 require
    node:internal/modules/cjs/helpers:102:18

  - .postcssrc.js:6 Object.<anonymous>
    C:/Users/Kamal/Documents/mobile-app/hollaback-quasar/.postcssrc.js:6:5

  - loader:1101 Module._compile
    node:internal/modules/cjs/loader:1101:14

  - loader:1153 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1153:10

  - loader:981 Module.load
    node:internal/modules/cjs/loader:981:32

  - loader:822 Function.Module._load
    node:internal/modules/cjs/loader:822:12

  - loader:1005 Module.require
    node:internal/modules/cjs/loader:1005:19

] {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Kamal\\Documents\\mobile-app\\.postcssrc.js',
    'C:\\Users\\Kamal\\Documents\\mobile-app\\node_modules\\@quasar\\app\\lib\\webpack\\inject.style-rules.js',
    'C:\\Users\\Kamal\\Documents\\mobile-app\\node_modules\\@quasar\\app\\lib\\webpack\\create-chain.js',
    'C:\\Users\\Kamal\\Documents\\mobile-app\\node_modules\\@quasar\\app\\lib\\webpack\\index.js',
    'C:\\Users\\Kamal\\Documents\\mobile-app\\node_modules\\@quasar\\app\\lib\\quasar-conf-file.js',
    'C:\\Users\\Kamal\\Documents\\mobile-app\\node_modules\\@quasar\\app\\bin\\quasar-dev',
    'C:\\Users\\Kamal\\Documents\\mobile-app\\node_modules\\@quasar\\app\\bin\\quasar',
    'C:\\Users\\Kamal\\AppData\\Roaming\\npm\\node_modules\\@quasar\\cli\\bin\\quasar'
  ]
}

[muhamadamin1992]

For me it's working after deleting yarn.lock and reinstall dependencies

[francoism90]

@muhamadamin1992 This fixes the issues, thanks. :)

[tzah]

Try to install it manually. run in project root this command: npm i autoprefixer