[vite] Internal server error: Cannot read properties of undefined (reading 'length') for Tailwind and PostCSS.

Kenneth Isaac — Tue, 25 Oct 2022 14:21:53 +0000

Disclaimer: this is not a fix but rather a quick hack, so that, for instance, you might continue building.

Problem: You've just installed TailwindCSS but you get the error below as well as some indication that it might related to the PostCSS config.

$ [postcss] Cannot read properties of undefined (reading 'config')
$ [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config')

Quick Hack: Copy the content of module.export in the tailwind.config.js file into the value of the tailwindcss property in the postcss.config.js file. Your final result should look like this:

./postcss.config.js

1  module.exports = {
2   plugins: {
3    tailwindcss: {
4       content: [
5         "./index.html",
6         "./src/**/*.{vue,js,ts,jsx,tsx}",
7       ],
8       theme: {
9         extend: {},
10      },
11      plugins: [
12        require('@tailwindcss/forms'),
13      ],
14    },
15    autoprefixer: {},
16  },
17 }

That should do the hack. Cheers.

How to stop Localhost server running on multiple ports.

Kenneth Isaac — Tue, 25 Oct 2022 12:40:34 +0000

I ran into a situation where I had multiple localhost ports. This is my fault as I failed to clearly close them.

So what do we do? A very simple way is to run the following command:

npx kill-port <port>

replace port with the port you want to close without the bracket.

Note that if you don't have the kill-port package installed, you would be prompted to install it.

There you go. Make sure you close your servers with Ctrl + C, unless stated otherwise.

How to Connect WSL2 (with Laravel App) to a XAMPP MySql Server on Windows

Kenneth Isaac — Sat, 22 Oct 2022 15:28:14 +0000

You have a MySql server running on Windows perhaps with XAMPP. You also have Wsl2 and want to access that database from Wsl2 for your for your application. What do you do?

I assume you have XAMPP running already and have Apache and MySql started and you've also created a table you want to access. Good.

You also have a Laravel app and you are having problem running:

$ php artisan migrate

and you are getting such error as:

$ Illuminate\Database\QueryException

  SQLSTATE[HY000] [2002] Connection refused (SQL: select * from information_schema.tables where table_schema = laravel_survey and table_name = migrations and table_type = 'BASE TABLE')

This means that, when you connect from a remote system (and WSL2 is remote system), that you'll need to create a user with access from Wsl2 and allow connections from Wsl2. You can get more detailed info from this reddit post.

Next you have to check if you have a Sql client on your Wsl2 machine. This client is different from a Sql Server. The client is what you would use to connect to the Sql server on windows.

Try any of the command below. The second command worked for me and I'm on an Ubuntu box. source

$ sudo apt install mysql-client-core-8.0     # version 8.0.27-0ubuntu0.20.04.1, or
$ sudo apt install mariadb-client-core-10.3  # version 1:10.3.31-0ubuntu0.20.04.1

_make sure you've also installed a Sql driver if you are running on a Laravel app. Run:
$ sudo apt-get install php7.4-mysql
_

Next, go into PhpMyAdmin, locate your created table and click on it. Navigate to Privileges among the menu at the top of the screen. Find all username with root and click on Edit privileges. Tick on Global privileges and click Go.

Now, there is an alternative method to do this, using Windows Cmd or Shell from XAMPP and connecting to the MySql database directly and type in some SQL code directly.

$ mysql -u root -p -h 127.0.0.1

then type this command in:

> CREATE USER 'root'@'%' IDENTIFIED BY 'root'; GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;

As I've written above, what the command does is, create a user with access from Wsl2 and allow connections from Wsl2 or any remote system and as you might tell, could constitute a security risk since you are granting all privileges.

Next, on Wsl2, run:
$ mysql -u root -p -h "$(hostname).local"

Skip the password prompt by tapping enter.

Congratulations, you've connected to your MySql database on your Windows host from Wsl2.

Now, for the Laravel app to be able to run migrations, you need to go into the .env file and edit the Sql section but before that, run:
$ echo $(hostname).local

and copy or note the result.

Next, edit the MySql section of your .env file to the following:

DB_CONNECTION=mysql
DB_HOST=DESKTOP-BB111.local #this should be the result of the last command above and should end with .local
DB_PORT=3306
DB_DATABASE=laravel_counter #this is the name of the database you created and as seen on your PhpMyAdmin
DB_USERNAME=root
DB_PASSWORD= #leave this empty

Save that file and get back to your terminal and run:
php artisan migrate

Watch as your migration loads and smile.

You've successfully connected your Wsl2 box to a service running on your Windows host. Now if you don't mind, go reward yourself a bit. Cheers.

Apparently, connecting to a Wsl2 service from windows is much easier and comes set up, I guess because of Port Forwarding.

I hope this post has helped you in some way. Thank you for reading.

DEV Community: Kenneth Isaac

[vite] Internal server error: Cannot read properties of undefined (reading 'length') for Tailwind and PostCSS.

How to stop Localhost server running on multiple ports.

How to Connect WSL2 (with Laravel App) to a XAMPP MySql Server on Windows