vue-template | vue project template | Frontend Framework library

I need help debugging Webpack's Compression Plugin.

SUMMARY OF PROBLEM

• Goal is to enable asset compression and reduce my app's bundle size. Using the Brotli algorithm as the default, and gzip as a fallback for unsupported browsers.
• I expected a content-encoding field within an asset's Response Headers. Instead, they're loaded without the field. I used the Chrome dev tools' network tab to confirm this. For context, see the following snippet:
• No errors show in my browser or IDE when running locally.

WHAT I TRIED

• Using different implementations for the compression plugin. See below list of approaches:
  1. (With Webpack Chain API)

I am attempting to deploy a vuejs app to github pages. I have followed every stackoverflow post, and every tutorial I have found online. No matter what I do, the page only displays the readme file.

github repo github page

I am using the gh-pages branch.

package.json:

in my nuxt app , after changing route using this.$router.push({ path: '/path' }) i got the nodeOps.tagName(...) is undefined in firefox , in chrome i get cannot get access to .toLowerCase() of undefined in the same line .

it happens in createPatchFunction of vue.runtime.esm.js versions: nuxt:^2.14.12, vue:^2.6.12

I've tried adding stylus config of Vuetify to modify the global variables, until I noticed that it's not supported anymore.

I've run this command to install the required loaders: npm i --save-dev stylus stylus-loader css-loader style-loader.

After that, I started getting the error in the title, and after removing those libraries, it didn't remove it at all. I've tried running npm reinstall and have a complete fresh install of the npm packages.

My config is like this:

I have following package.json

I am trying to upgrade tailwind to version 3 in my Laravel application.

I followed the installation as instructed in

https://tailwindcss.com/docs/upgrade-guide#upgrade-packages

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

This worked fine. But when I run npm run dev I get this error:

ERROR in ./resources/assets/css/tailwindcore.css Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: PostCSS plugin tailwindcss requires PostCSS 8.

I have read from the docs that PostCSS 8 is now required with tailwind 3. However, PostCSS 8 has been installed. Why would I still receive this error? I also tried to remove node_modules folder and reinstall, but got same error.

This is my package.json:

So I'm trying to use jsPDF in my project but whenever I'm trying to import jsPDF to my vue component I get this error:

I'm trying to convert my Vue 3 single page component scripts to use TypeScript.

When I create a brand new Test.vue component that looks like this, I get no TypeScript errors my Visual Studio Code editor:

I have a vue3/symfony project and i started implementing typescript but i came across an issue that i cannot solve. For building assets i'm using webpack encore and when i start the watcher the assets are compiled just fine, but when i change anything in my .vue files ( even adding a blank space to force webpack to recompile ) i get this error:

TS2614: Module '"resources/ts/helpers"' has no exported member 'TestClass'. Did you mean to use 'import TestClass from "resources/ts/helpers"' instead?

TS2339: Property '__file' does not exist on type '{}'.

Important notes: if i do any kind of change ( even a blank space ) on the helper.ts the compilation is again succesfully.

This only happens to .ts files imported into .vue files. The .js or .vue(with or without typescript) files that i've imported are fine

helpers.ts: