Skip to main content

Solution for building errors with Vuejs 3

This morning I tried to generate a production build for my Vuejs project. I had run this command several time already, for the same project, without issues. But this morning I got the error:

No module factory available for dependency type: CssDependency

I am using vue/cli 5.11 and it's a Vuejs 3 project, and executing the command in a Windows Terminal window.

Same, when I was serving the project, suddenly is had this strange error:

There are multiple modules with names that only differ in casing.

Long story short, the solution was to open a windows terminal and run the exact same command. I love those kind of situation where everything is resolved easily.

As for the reason it happened: after searching on Stackoverflow and Github issues, it seems to be linked to windows' path case sensitivity and Webpack. I don't know why it happened suddenly.


EDIT 27th January: It seems like Windows Terminal's cd command is not case sensitive. What I think happened is that I probably switched to a directory using the wrong case.


Comments

Popular posts from this blog

How to generate a self-signed certificate with Openssl (using git windows bash)

I recently needed to generate a self-signed certificate to test a website locally. I wasn't familiar with the process, and I wanted to share here what I learned. First, we need a private key. A private key is a long series of characters that must be kept secret. In my context, it will be used to encrypt messages before the client and the server, in a way secure enough to prevent anybody to spy on them. Once the private key is created, we need to generate another file that will be the "signature" of our certificate. Among other data, this file will contains some information specific to the server's context: country, organization's name, email address of the organization's technical contact, etc. Once this signature is established, there are two paths: - Path A: If we want our server to be publicly accessible, every browser in the world must able to trust the certificate. In order for that to happen, we need to send our signature file to one of the official SSL ...

Fixing x-invalid-end-tag lint error on Vuejs

  My situation is: Coding with vue in a Vue file. Using the Vetur plugin in VS code It then generates an error of type x-invalid-end-tag in a quite random fashion. To solve it, I have found one simple trick in this github issue: // .eslintrc.js module.exports = {  //... rules:  { 'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]  }  }

Connecting to MongoDB from WSL2

My application runs a web server connected to a MongoDB database. For all my development needs, I am using WSL on windows 10. Unfortunately, MongoDB is not available on WSL, so I have installed the Windows version and pointed my server to the localhost:27017 address, no issue. It worked well until the day I switched to WSL2. Then I would get some ECONNREFUSED errors. To solve this problem, I have found a simple three steps solution.  The whole idea is that WSL2 now uses a true VM and got its own network interface (IP, MAC address, etc.). I think it's a bit more complicated than that, but that's how I understand it. Long story short, you now have a windows IP, and a WSL IP. 1. Accessing  the windows host from WSL The first step is to make sure that you can ping the windows IP from WSL. It was not working for me right away. It seems like there are still inconsistencies in the WSL implementation, but this github issue thread gave a good solution. It's a script yo have to run...