diff --git a/app/lib/ssr/webpack.directives.js b/app/lib/ssr/webpack.directives.js
index 52fc7e5f802..9b4fcb89519 100644
--- a/app/lib/ssr/webpack.directives.js
+++ b/app/lib/ssr/webpack.directives.js
@@ -54,7 +54,7 @@ module.exports = function () {
   chain.module.rule('node')
     .test(/\.node$/)
     .use('node-loader')
-      .loader('node-loader')
+      .loader(require.resolve('node-loader'))
 
   chain.resolve.modules
     .merge(resolveModules)
diff --git a/app/lib/webpack/create-chain.js b/app/lib/webpack/create-chain.js
index 58f644f1fb0..1e37de535fa 100644
--- a/app/lib/webpack/create-chain.js
+++ b/app/lib/webpack/create-chain.js
@@ -125,7 +125,7 @@ module.exports = function (cfg, configName) {
     })
 
   vueRule.use('vue-loader')
-    .loader('vue-loader')
+    .loader(require.resolve('vue-loader'))
     .options(
       merge(
         {},
@@ -164,7 +164,7 @@ module.exports = function (cfg, configName) {
         ))
         .end()
       .use('babel-loader')
-        .loader('babel-loader')
+        .loader(require.resolve('babel-loader'))
           .options({
             compact: false,
             extends: appPaths.resolve.app('babel.config.js')
@@ -176,7 +176,7 @@ module.exports = function (cfg, configName) {
       .rule('typescript')
       .test(/\.ts$/)
       .use('ts-loader')
-        .loader('ts-loader')
+        .loader(require.resolve('ts-loader'))
         .options({
           // custom config is merged if present, but vue setup and type checking disable are always applied
           ...(cfg.supportTS.tsLoaderConfig || {}),
@@ -196,7 +196,7 @@ module.exports = function (cfg, configName) {
             extensions: {
               vue: {
                 enabled: true,
-                compiler: '@vue/compiler-sfc'
+                compiler: require.resolve('@vue/compiler-sfc')
               }
             }
           }
@@ -209,7 +209,7 @@ module.exports = function (cfg, configName) {
     .test(/\.(png|jpe?g|gif|svg|webp|avif|ico)(\?.*)?$/)
     .type('javascript/auto')
     .use('url-loader')
-      .loader('url-loader')
+      .loader(require.resolve('url-loader'))
       .options({
         esModule: false,
         limit: 10000,
@@ -221,7 +221,7 @@ module.exports = function (cfg, configName) {
     .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
     .type('javascript/auto')
     .use('url-loader')
-      .loader('url-loader')
+      .loader(require.resolve('url-loader'))
       .options({
         esModule: false,
         limit: 10000,
@@ -233,7 +233,7 @@ module.exports = function (cfg, configName) {
     .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
     .type('javascript/auto')
     .use('url-loader')
-      .loader('url-loader')
+      .loader(require.resolve('url-loader'))
       .options({
         esModule: false,
         limit: 10000,
diff --git a/app/lib/webpack/electron/create-node-chain.js b/app/lib/webpack/electron/create-node-chain.js
index a7ae9b8dd98..9c08109aaf4 100644
--- a/app/lib/webpack/electron/create-node-chain.js
+++ b/app/lib/webpack/electron/create-node-chain.js
@@ -53,7 +53,7 @@ module.exports = (nodeType, cfg, configName) => {
   chain.module.rule('node')
     .test(/\.node$/)
     .use('node-loader')
-      .loader('node-loader')
+      .loader(require.resolve('node-loader'))
 
   chain.resolve.modules
     .merge(resolveModules)
diff --git a/app/lib/webpack/inject.node-babel.js b/app/lib/webpack/inject.node-babel.js
index a2772843dff..432a4a36f02 100644
--- a/app/lib/webpack/inject.node-babel.js
+++ b/app/lib/webpack/inject.node-babel.js
@@ -8,7 +8,7 @@ module.exports = function (cfg, chain) {
         .add(/node_modules/)
         .end()
       .use('babel-loader')
-        .loader('babel-loader')
+        .loader(require.resolve('babel-loader'))
           .options({
             extends: appPaths.resolve.app('babel.config.js')
           })
diff --git a/app/lib/webpack/inject.node-typescript.js b/app/lib/webpack/inject.node-typescript.js
index 94c6f58fd75..91748f12de2 100644
--- a/app/lib/webpack/inject.node-typescript.js
+++ b/app/lib/webpack/inject.node-typescript.js
@@ -7,7 +7,7 @@ module.exports = function (cfg, chain) {
       .rule('typescript')
       .test(/\.ts$/)
       .use('ts-loader')
-        .loader('ts-loader')
+        .loader(require.resolve('ts-loader'))
         .options({
           // While `noEmit: true` is needed in the tsconfig preset to prevent VSCode errors,
           // it prevents emitting transpiled files when run into node context
diff --git a/app/lib/webpack/inject.style-rules.js b/app/lib/webpack/inject.style-rules.js
index 46fc0fba543..b8dbc5987fc 100644
--- a/app/lib/webpack/inject.style-rules.js
+++ b/app/lib/webpack/inject.style-rules.js
@@ -50,7 +50,7 @@ function injectRule (chain, pref, lang, test, loader, loaderOptions) {
   function create (rule, modules) {
     if (pref.isServerBuild === true) {
       rule.use('null-loader')
-        .loader('null-loader')
+        .loader(require.resolve('null-loader'))
       return
     }
 
@@ -61,7 +61,7 @@ function injectRule (chain, pref, lang, test, loader, loaderOptions) {
     }
     else {
       rule.use('vue-style-loader')
-        .loader('vue-style-loader')
+        .loader(require.resolve('vue-style-loader'))
         .options({
           sourceMap: pref.sourceMap
         })
@@ -86,14 +86,14 @@ function injectRule (chain, pref, lang, test, loader, loaderOptions) {
     }
 
     rule.use('css-loader')
-      .loader('css-loader')
+      .loader(require.resolve('css-loader'))
       .options(cssLoaderOptions)
 
     if (!pref.extract && pref.minify) {
       // needs to be applied separately,
       // otherwise it messes up RTL
       rule.use('cssnano')
-        .loader('postcss-loader')
+        .loader(require.resolve('postcss-loader'))
         .options({
           sourceMap: pref.sourceMap,
           postcssOptions: {
@@ -149,12 +149,17 @@ function injectRule (chain, pref, lang, test, loader, loaderOptions) {
     }
 
     rule.use('postcss-loader')
-      .loader('postcss-loader')
+      .loader(require.resolve('postcss-loader'))
       .options({ postcssOptions: postCssOpts })
 
     if (loader) {
+      let resolvedLoader = loader
+      try {
+        resolvedLoader = require.resolve(loader)
+      } catch (err) { }
+
       rule.use(loader)
-        .loader(loader)
+        .loader(resolvedLoader)
         .options({
           sourceMap: pref.sourceMap,
           ...loaderOptions
diff --git a/app/lib/webpack/pwa/create-custom-sw.js b/app/lib/webpack/pwa/create-custom-sw.js
index d377a59831f..ba79bb06110 100644
--- a/app/lib/webpack/pwa/create-custom-sw.js
+++ b/app/lib/webpack/pwa/create-custom-sw.js
@@ -88,7 +88,7 @@ module.exports = function (cfg, configName) {
         ))
         .end()
       .use('babel-loader')
-        .loader('babel-loader')
+        .loader(require.resolve('babel-loader'))
           .options({
             compact: false,
             extends: appPaths.resolve.app('babel.config.js')
@@ -103,7 +103,7 @@ module.exports = function (cfg, configName) {
       .rule('typescript')
       .test(/\.ts$/)
       .use('ts-loader')
-        .loader('ts-loader')
+        .loader(require.resolve('ts-loader'))
         .options({
           onlyCompileBundledFiles: true,
           transpileOnly: false,
diff --git a/app/lib/webpack/ssr/webserver.js b/app/lib/webpack/ssr/webserver.js
index f5a84b7c6a9..53928b9af70 100644
--- a/app/lib/webpack/ssr/webserver.js
+++ b/app/lib/webpack/ssr/webserver.js
@@ -82,7 +82,7 @@ module.exports = function (cfg, configName) {
   chain.module.rule('node')
     .test(/\.node$/)
     .use('node-loader')
-      .loader('node-loader')
+      .loader(require.resolve('node-loader'))
 
   chain.resolve.modules
     .merge(resolveModules)
diff --git a/app/package.json b/app/package.json
index 822fe137c6a..c1dc20d5127 100644
--- a/app/package.json
+++ b/app/package.json
@@ -42,6 +42,7 @@
     "url": "https://donate.quasar.dev"
   },
   "dependencies": {
+    "@babel/core": "^7.9.0",
     "@quasar/babel-preset-app": "2.0.1",
     "@quasar/fastclick": "1.1.4",
     "@quasar/ssr-helpers": "2.1.1",
@@ -55,7 +56,9 @@
     "@vue/server-renderer": "3.1.5",
     "archiver": "5.3.0",
     "autoprefixer": "10.3.1",
+    "babel-loader": "^8.0.6",
     "browserslist": "^4.12.0",
+    "loader-utils": "^2.0.0",
     "chalk": "4.1.1",
     "chokidar": "3.5.2",
     "ci-info": "3.2.0",
@@ -114,6 +117,30 @@
     "webpack-merge": "5.8.0",
     "webpack-node-externals": "3.0.0"
   },
+  "peerDependencies": {
+    "stylus-loader": "^6.1.0",
+    "less-loader": "^10.0.1",
+    "vue": "^3.1.5",
+    "vue-router": "^4.0.10",
+    "eslint": "^7.14.0"
+  },
+  "peerDependenciesMeta": {
+    "stylus-loader": {
+      "optional": true
+    },
+    "less-loader": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "vue-router": {
+      "optional": true
+    },
+    "eslint": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">= 12.22.1",
     "npm": ">= 6.14.12",
diff --git a/app/tsconfig-preset.json b/app/tsconfig-preset.json
index 9313a963db7..535498ad3bd 100644
--- a/app/tsconfig-preset.json
+++ b/app/tsconfig-preset.json
@@ -20,12 +20,7 @@
       "pages/*": ["src/pages/*"],
       "assets/*": ["src/assets/*"],
       "boot/*": ["src/boot/*"]
-    },
-    // Forces quasar typings to be included, even if they aren't referenced directly
-    // Removing this would break `quasar/wrappers` imports if `quasar`
-    //  isn't referenced anywhere, because those typings are declared
-    //  into `@quasar/app` which is imported by `quasar` typings
-    "types": ["quasar"]
+    }
   },
   // Needed to avoid files copied into 'dist' folder (eg. a `.d.ts` file inside `src-ssr` folder)
   // to be evaluated by TS when their original files has been updated
diff --git a/docs/quasar.conf.js b/docs/quasar.conf.js
index c9e92c7dd14..587ec002402 100644
--- a/docs/quasar.conf.js
+++ b/docs/quasar.conf.js
@@ -44,13 +44,13 @@ module.exports = function (ctx) {
 
         chain.module.rule('pug')
           .test(/\.pug$/)
-          .use('pug-loader').loader('pug-plain-loader')
+          .use('pug-loader').loader(require.resolve('pug-plain-loader'))
 
         const rule = chain.module.rule('md')
           .test(/\.md$/)
 
         rule.use('v-loader')
-          .loader('vue-loader')
+          .loader(require.resolve('vue-loader'))
           .options({
             ...(
               isServer === true
diff --git a/docs/src/pages/app-extensions/tips-and-tricks/chain-webpack.md b/docs/src/pages/app-extensions/tips-and-tricks/chain-webpack.md
index 2b6e85d96ff..f1ddfab86df 100644
--- a/docs/src/pages/app-extensions/tips-and-tricks/chain-webpack.md
+++ b/docs/src/pages/app-extensions/tips-and-tricks/chain-webpack.md
@@ -52,7 +52,7 @@ const chainWebpack = function (ctx, chain) {
     .pre()
 
   rule.use('v-loader')
-    .loader('vue-loader')
+    .loader(require.resolve('vue-loader'))
     .options({
       productionMode: ctx.prod,
       transformAssetUrls: {
@@ -64,7 +64,7 @@ const chainWebpack = function (ctx, chain) {
     })
 
   rule.use('ware-loader')
-    .loader('ware-loader')
+    .loader(require.resolve('ware-loader'))
     .options({
       raw: true,
       middleware: function (source) {
diff --git a/docs/src/pages/quasar-cli/handling-webpack.md b/docs/src/pages/quasar-cli/handling-webpack.md
index bd2ea63f485..143401c6153 100644
--- a/docs/src/pages/quasar-cli/handling-webpack.md
+++ b/docs/src/pages/quasar-cli/handling-webpack.md
@@ -39,7 +39,7 @@ build: {
         .add((/[\\/]node_modules[\\/]/))
         .end()
       .use('eslint-loader')
-        .loader('eslint-loader')
+        .loader(require.resolve('eslint-loader'))
   }
 }
 ```
@@ -171,7 +171,7 @@ build: {
     chain.module.rule('json')
       .test(/\.json$/)
       .use('json-loader')
-        .loader('json-loader')
+        .loader(require.resolve('json-loader'))
   }
 }
 ```
@@ -212,7 +212,7 @@ build: {
     chain.module.rule('pug')
       .test(/\.pug$/)
       .use('pug-plain-loader')
-        .loader('pug-plain-loader')
+        .loader(require.resolve('pug-plain-loader'))
   }
 }
 ```
diff --git a/ui/package.json b/ui/package.json
index 9ad3eeaad7d..f2afebe5527 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -85,6 +85,12 @@
     "tslib": "^2.0.3",
     "uglify-es": "^3.3.9"
   },
+  "dependencies": {
+    "core-js": "^3.6.5"
+  },
+  "peerDependencies": {
+    "vue": "^3.1.5"
+  },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",
     "attributes": "dist/vetur/quasar-attributes.json"