DEV Community: kay-adamof

3 things you should care about Client Component 【Next.js app/】

kay-adamof — Wed, 25 Oct 2023 11:44:48 +0000

1 - How to use 'use client'

There are two ways to make a component client-side.

No.1: Add `'use client'` at the beginning of the file

By adding 'use client' at the beginning of the file, it becomes a Client Component. I think this is the most basic configuration method.

// app/ClientComponent.tsx
'use client'

export default function ClientComponent(){
    return (
        <button onClick={()=>{
            console.log('Hello, Client')
        }}>BUTTON</button>
    )
}

// app/page.tsx
import ClientComponent from './ClientComponent.tsx'

export default function Page(){
    return(
        <div>
            <ClientComponent />
        </div>
    )
}

No.2: Pass through the file with 'use client'

Even if the component file itself does not have 'use client', you can make it a Client Component by importing it into another file with 'use client'.

// app/ClientComponent.tsx
export default function ClientComponent(){
    return (
        <button onClick={()=>{
            console.log('Hello, Client')
        }}>BUTTON</button>
    )
}

// app/client.ts
'use client'
export { default } from './ClientComponent.tsx'


// app/page.tsx
import ClientComponent from './client.ts'

export default function Page(){
    return(
        <div>
            <ClientComponent />
        </div>
    )
}

Thanks to this specification, even if an external library component does not support Client Component, you can treat it as a Client Component by adding 'use client' to an arbitrary file and importing/exporting it.

However, please note that I explain more in the following section.

2 - Do not directly nest Server Components

If you import Server Component directly into the file of a Client Component and nest it, the Server Component will be treated as a Client Component (due to the specification shown in No.2 earlier).

To prevent this, set {children} on the Client Component side and wrap it with the opening tag of the Client Component.

// ❌

// app/ServerComponent.tsx
export default function ServerComponent(){
    return(
        <div>Hello, Server</div>
    )
}

// app/ClientComponent.tsx
'use client'
import ServerComponent from './ServerComponent.tsx'

export default function ClientComponent(){
    return (
        <button onClick={()=>{console.log("Hello, Client")}}>
            <ServerComponent />
        </button>
    )
}

// app/page.tsx
import ClientComponent from './ClientComponent.tsx'

export default function Page(){
    return(
        <div>
            <ClientComponent />
        </div>
    )
}

// ⭕️

// app/ServerComponent.tsx
export default function ServerComponent(){
    return(
        <div>Hello, Server</div>
    )
}

// app/ClientComponent.tsx
'use client'

export default function ClientComponent(){
    return (
        <button onClick={()=>{console.log("Hello, Client")}}>
            { children }
        </button>
    )
}

// app/page.tsx
import ClientComponent from './ClientComponent.tsx'
import ServerComponent from './ServerComponent.tsx'

export default function Page(){
    return(
        <div>
            <ClientComponent>
                <ServerComponent />
            </ClientComponent>
        </div>
    )
}

It is not necessary to always wrap it with the opening tag. However, you don't want to bring what can be generated on the server side to the client side, right?

3 - Do not import modules from index files (cannot)

CAUTION

This section was incorrect.

See the revised version

~~You cannot import from an index.ts/js file into a Client Component.~~

// CAN NOT DO THIS

// lib/index.ts
export const sayHello = () => {console.log('Hello')

// app/ClientComponent.tsx
'use client'
import { sayHello } from '../lib'

export default function ClientComponent(){
    return (
        <button onClick={()=>{
            sayHello()
        }}>
            You can't do this with ERROR
        </button>
    )
}

If you try to do this, you will get the following error.

4 - Pre-Rendering

Client components are first rendered on the server side.

The official documentation mentions the following.

For example, let's say you accidentally use a function inside the component that relies on the document object.


// getDataTheme.ts
export const getDataTheme = () =>
  document.documentElement.getAttribute('data-theme')

// Button.tsx
'use client'
import {getDataTheme} from './getDataTheme'

export default function Button(){
    return (
        <div>{getDataTheme()==='dark'?'Moon':'Sun'}</div>
    )
}

In this case, you will likely see the following warning:

ReferenceError: document is not defined

This is likely caused by using a client-side API on the server side. Find a way to avoid this issue.

I have summarized the knowledge when creating Client Components. I hope it will be helpful to you.

That's all.

How to fix " Module not found: Can't resolve 'fs' "

kay-adamof — Wed, 25 Oct 2023 07:04:20 +0000

ALERT

(Revised 10-29-2023）
It might have been caused by Aggregating modules

I was using export * from 'module-name' in the above figure when the error was occurring.

I changed it as follows

export * from 'module-name'
// ↓
export { name1 } from "module-name"

ALERT

The content of this article was incorrect. (Revised on 2023-10-26)

I found that the error in the title was only reproduced under very specific circumstances.

Here is the explanation of the situation and the resolved method.

Since the issue did not occur in the pure (fully from scratched) Next.js code, I reexamined the code of the affected application.

Although only a part of the error screen was described in this article, here is the full content:

I traced the Import Trace in the figure (which I did not pay attention to before).

I had previously created a barrel file called remarkWrapper.ts to consolidate external modules.

After remarkWrapper.ts, the import had changed to node_modules. Therefore, I suspected that the import of that file might be causing the issue, so I removed the import to index.ts.

// index.ts

export * from './getOembed'
export * from './getDataTheme'
// export * from './renderReact'
export * as rehype from './rehypeWrapper'
// export * as remark from './remarkWrapper' <===!!!!!!
export { default as getLang} from './getLang'

After doing so, the error described in this article no longer occurred.

Below is the original post

I will provide a description of the situation and a solution for the following error.

This error is likely to occur, especially when using barrel exports.

Situation

Next.js: 13.5.6
Modules are imported into the Client Component.
These modules are exported from the index.ts file.

// ButtonTest.tsx
'use client' <=== Client Component Only!!!!

import { testHello } from '@/lib/testHello' <=== OK (/lib/testHello.ts)
import * as TEST from '@/lib'               <=== NG (/lib/index.ts)
import {testHello} from '@/lib'             <=== NG (/lib/index.ts)
import {testHello} from '@/lib/index'       <=== NG (/lib/index.ts)
import {testHello} from '@/lib/libs'        <=== OK (/lib/libs.ts)
import * as TEST from '@/lib/index.lib'     <=== OK (/lib/index.lib.ts)


export const ButtonTest = () => {
  return (
    <div>
      <button
        onClick={() => {
          testHello()
        }}
      >
        ButtonTest
      </button>
    </div>
  )
}

Solution

Please use a file name other than index.ts for exporting. Any other file name, such as index.lib.ts or lib.ts, will work.

Supplementary Information

I haven't tested the 'index.js' pattern, but it probably won't work.

Is there no mechanism to resolve imports using the 'index' file on the client side?

If you have any other solutions besides the one mentioned above, please let me know.

Introduction to the "prose" class that instantly beautifies articles 【 TailwindCSS 】

kay-adamof — Mon, 23 Oct 2023 05:29:12 +0000

For engineers who lack design sense and knowledge, determining the font size of h1 or h2, line spacing, and other styling decisions can be a challenging problem.

I would like to introduce a plugin called @tailwindcss/typography in Tailwind CSS that helps solve such problems.

@tailwindcss/typography is an official plugin for Tailwind CSS. After installing and configuring, you can use the prose class.

The prose class is applied to the children of the <article> and can be used like this:



<article class="prose lg:prose-xl">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </p>
  <!-- ... -->
</article>

The prose class is applied to HTML elements that support Markdown syntax, such as h1, h2, p, code, li, table, img....

There are five predefined color and scale options available, and you can also make further adjustments or customizations. It also supports dark mode.



<article class="prose dark:prose-invert">
  {{ markdown }}
</article>

Let's take a look at some examples before and after applying the prose class.

BEFORE:

AFTER:

It looks more like a typical blog article.

The size and contrast of the text have changed, and the article is now centered, making it easier to read. This styling can be achieved simply by adding the class name prose.

If you are using Tailwind CSS, I recommend giving it a try as it is easy to implement and makes your articles more visually appealing.

That's all.

How to configure a custom theme as "Dark Mode"【TailwindCSS】

kay-adamof — Sat, 21 Oct 2023 13:19:16 +0000

Tailwind CSS natively supports dark mode, and by setting it up and adding the class name dark to HTML elements as shown below, you can enable dark:bg-black:



<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

However, as it is, it does not recognize darker themes provided by external libraries as dark mode.

Specifically, let's say we want to use a theme like Synthwave provided by DaisyUI.

If we follow the official configuration of DaisyUI, we can use the synthwave theme with the following code:



<html data-theme="synthwave"></html>
<body>
  <div class="bg-white dark:bg-black"> <!-- dark:bg-black not worked
    <!-- ... -->
  </div>
</body>
</html>

However, dark:bg-black does not work.

How can we make Tailwind CSS recognize a darker custom theme like synthwave as dark mode?

Setting up a custom theme as dark mode

The Tailwind CSS official documentation provides the following information:

Following this, we can configure the tailwind.config.js file as follows:



/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class', '[data-theme="synthwave"]'],
  // ...
}

By adding '[data-theme="synthwave"]', we can make Tailwind CSS recognize the custom theme as dark mode. With this configuration, the code example above will work as intended:



<html data-theme="synthwave">
<body>
  <div class="bg-white dark:bg-black"> <!-- dark:bg-black now working
    <!-- ... -->
  </div>
</body>
</html>

That's it!

How to provide detailed type information using "as" and "&"

kay-adamof — Fri, 13 Oct 2023 03:18:20 +0000

Let's say you have created the following callback function:

const getMyPet = () =>
  document.documentElement.getAttribute('myPet')
// const getMyPet: () => string | null

The return value of the function is string | null. However, since the argument is specified as myPet, there is a possibility that the returned value is a specific string.

Suppose you have created the following type in advance

type MyPet = 'tama' | 'pochi'

Let's consider how to include the type MyPet in the return type of the getMyPet() function.

First, let's use the as keyword to specify the return type of the function:

const getMyPet = () =>
  document.documentElement.getAttribute('myPet') as MyPet
// const getMyPet: () => MyPet

We have successfully specified the MyPet type. However, the null type is lost, so let's add it back:

const getMyPet = () =>
  document.documentElement.getAttribute('myPet') as MyPet | null
// const getMyPet: () => MyPet | null

But with this, when we refer to the type information later, the specific contents of the MyPet type, i.e., 'tama' | 'pochi', will not be displayed. So let's use the intersection type: & to display the detailed information to TypeScript:

const getMyPet2 = () =>
  document.documentElement.getAttribute('myPet') as (MyPet & {}) | null
// const getMyPet2: () => "tama" | "pochi" | null

The (MyPet & {}) part can also be written as (MyPet & string) to obtain the same type.

Please refer to the official documentation for more details on intersection types.

Although this may be sufficient, let's leave the possibility of receiving other strings besides 'tama' and 'pochi':

const getMyPet3 = () =>
  document.documentElement.getAttribute('myPet') as (MyPet & {}) | null | (string & {})
// const getMyPet3: () => "tama" | "pochi" | (string & {}) | null

By adding (string & {}), we get a hint for creating a conditional statement in case a string other than "tama" or "pochi" is returned.

That's all.

You can check this example on the TS playground.

[TypeScript] How to create a union type consisting of string literals and string primitive

kay-adamof — Fri, 13 Oct 2023 01:06:00 +0000

Let's consider a way to specify specific strings like 'dog' or 'cat' as literal types while including other string types when creating types in TypeScript.

Let's start with a simple type:

type AnimalWithString = 'dog' | 'cat' | string
// type Animal = string

In this case, the type information for Animal becomes type Animal = string, which loses the information about 'dog' or 'cat'. This is not useful.

Let's remove the string type:

type Animal = 'dog' | 'cat'
// type Animal = "dog" | "cat"
const myAnimal:Animal = 'bird'
//Type '"bird"' is not assignable to type 'Animal'.(2322)

Now it becomes a simple union of literal types, and it won't accept other strings like 'bird'.

So let's use a technique.

Instead of string, we'll use (string & {}).

type AnimalSpecified = 'dog' | 'cat' | (string & {})
// type AnimalSpecified = "dog" | "cat" | (string & {})
const animalIncludingMightBe:AnimalSpecified = 'bird'

With this, we can maintain 'dog' and 'cat' while providing the information of the string type, creating a type that has both string literal types and string types.

Please try it out in the TS Playground to see its actual behavior.

In (string & {}), {} refers to a type that is non-null and non-undefined. By creating an intersection type with string using &, TypeScript can maintain the string type.

I learned about this method from this StackOverflow question and answer.

If you have any other better solutions, please let me know.

That's all.

[TypeScript] Creating a literal type union from object values

kay-adamof — Wed, 04 Oct 2023 13:23:20 +0000

Let's say you have the following JavaScript object:

const test = {
  a: "hello",
  b: "world",
  c: 0
}

And you want to create a literal type union using the values of this object, namely "hello", "world", and 0.

type TestValues = "hello" | "world" | 0

The answer would be as follows:

const test = {
  a: "hello",
  b: "world",
  c: 0
} as const // <== !!!

type TestValues = (typeof test)[keyof typeof test]
// type TestValues = 0 | "hello" | "world"

Make sure to include as const.

If you forget to add it, the resulting type union would be a union of string and number, rather than the exact literal values.

const test = {
  a: "hello",
  b: "world",
  c: 0
}

type TestValues = (typeof test)[keyof typeof test]
// type TestValues = string | number

By the way, if you want to create a similar type based on the keys of the object instead of the values, you can do it like this:

const test = {
  a: "hello",
  b: "world",
  c: 0
}

type TestKeys = keyof typeof test
// type TestKeys = "a" | "b" | "c"

How to assign TailwindCSS class names to arbitrary variable names while letting auto-completion work.

kay-adamof — Fri, 11 Aug 2023 09:45:40 +0000

When defining class names in TailwindCSS, if you're using VSCode, installing the extension enables automatic autocompletion.

Autocompletion also works for variable names like const className = "".

By default, the variable names where autocompletion is active are:

"class",
"className",
"ngClass".

So, what about using variable names like const mySpecialStyles = ""? Of course, autocompletion doesn't work by default.

Is there a way to enable autocompletion for arbitrary variable names like mySpecialStyles or greatStyles? I looked into it, and I found a configuration method that I want to share, which was originally introduced in a GitHub Discussions post. For detailed information, please refer to the original discussion.

VSCode Configuration

Configuring VSCode is simple. Refer to the following image: go to the Class Attributes section in settings and add .*Styles* using the Add item button.

If you want to add this to your settings.json, here's what you need to do:

With this, autocompletion will now be enabled for variable names like mySpecialStyles or greatStyles 🎉

While it's generally recommended to define classes inline with TailwindCSS, for those who prefer separation to maintain cleaner code and avoid duplication, give this a try! It can help make your code more readable and organized.

How to upgrade `pnpm`

kay-adamof — Thu, 03 Aug 2023 01:51:16 +0000

I have summarized the procedure for upgrading the version of pnpm, which is a package manager for Node.

While updating the version of pnpm is not something you do frequently, when you do need to update it, you may wonder, "What should I do?" and it can take several minutes to several tens of minutes.

There are several installation routes for pnpm, and the method of version upgrade varies depending on which one you chose.

Here, I have only listed the procedures that I thought could be used generically (not limited to pnpm).
If you want to know other methods, please refer to the following GitHub Discussions.

Confusing about how to update pnpm itself

Steps to upgrade pnpm

Check the installation directory with the command:

   where pnpm

Delete the installation directory with the command:

   rm -rf installation_directory

Reinstall pnpm using the command:

   curl -fsSL https://get.pnpm.io/install.sh | sh -

Official pnpm installation method

Actual Commands

$ where pnpm
/usr/local/bin/pnpm
/usr/local/bin/pnpm


$ rm -rf /usr/local/bin/pnpm


$ where pnpm
pnpm not found


$ curl -fsSL https://get.pnpm.io/install.sh | sh -
==> Downloading pnpm binaries 8.6.11
 WARN  using --force I sure hope you know what you are doing
Appended new lines to /Users/YOU/.zshrc

Next configuration changes were made:
export PNPM_HOME="/Users/YOU/Library/pnpm"
case ":$PATH:" in
  *":$PNPM_HOME:"*) ;;
  *) export PATH="$PNPM_HOME:$PATH" ;;
esac

To start using pnpm, run:
source /Users/YOU/.zshrc


$ source /Users/YOU/.zshrc

$ pnpm -v
8.6.11

In my case, the steps above allowed me to use pnpm without any issues. However, please be cautious as this method involves deleting the entire executable directory.

That's all!

How to hide or Fix; `typescript: File is a CommonJS module; it may be converted to an ES module.`

kay-adamof — Sun, 09 Jul 2023 00:20:35 +0000

Liquid syntax error: Unknown tag 'endraw'

Letting two Docker containers talk to each other

kay-adamof — Fri, 07 Jul 2023 09:24:38 +0000

Suppose we have two Docker containers, A and B. After processing the data in the container A, we send the data to the container B. The container B performs another processing and returns the data to the container A. I will explain how to achieve this sequence of operations with an actual example.

Before explaining, we will identify some important points.

The Address for accessing the container B must be specified correctly. It's vital.
- When two containers are launched in the docker-compose.yml file, they are assigned the same network.
- Containers in the same network can communicate with each other using each other's service name and port number in the network.
container A is started after container B is started.Be aware of the order of running containers
- The container B, as a server, receives data from the container A, so it must be started first.
- Specify the order of startup with depends_on in the docker-compose.yml file.
Wait a certain amount of time for a value to be returned from the container B.
- If you don't set the wait for a certain period of time, the container will finish running before the value is returned.

Now let's look at the implementation flow of each container.

Creating the container A

The role of the container A is to obtain a transcription of a YouTube video.

Specify the URL of the YouTube video
Obtain the id from the URL.
Based on the id, use a Python library to obtain a transcription of the video.
Send the text data of the transcription to the container B.
Receive the text data processed separately in the container B.
Save the received text to a file.

The script that implements the above flow is as follows

import urllib.parse
from youtube_transcript_api import YouTubeTranscriptApi
import requests

url = "https://www.youtube.com/watch?v=CJjSOzb0IYs"

parsed_url = urllib.parse.urlparse(url)
query_params = urllib.parse.parse_qs(parsed_url.query)
video_id = query_params.get("v") # returns an array including the value next to "v=..."

if video_id:.
    video_id = video_id[0].
    transcript_list = YouTubeTranscriptApi.get_transcript(video_id)
    transcription = ""
    for t in transcript_list:.
        transcription += " "+ t["text"]

    with open("transcription.txt", "w") as file: file.write(transcription)
        file.write(transcription)

    # Send the request and wait for the response until 5 sec
    try: # Send the request and wait for the response until 5 sec
        posted = requests.post("http://punctuate_text:5000/punctuate", data={"text": transcription}, timeout=5)
        posted.raise_for_status() # Raise an exception for non-2xx responses

        if posted.status_code == 200: with open("output.txt")
            with open("output.txt", "w") as file: file.write(posted.text)
                file.write(posted.text)
    except requests.exceptions.RequestException as e:
        print("Error occurred:", e)
else: print("No video ID found.
    print("No video ID found.")

⭐️ The most noteworthy line is the following one.

posted = requests.post("http://punctuate_text:5000/punctuate", data={"text": transcription}, timeout=5)

punctuate_text : The service name of the container B specified in the docker-compose file that will appear later.
5000 : port number in the network, also specified in the docker-compose file.
/punctuate : The root address specified in the Flask server of the container B.

The Dockerfile for container creation is as follows.

FROM python:3.9-slim

WORKDIR /app

COPY requirements.txt requirements.txt
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

CMD ["python3", "app.py"].

Creating container B

The role of the container B is to punctuate the transcription sent from the container A.

Create a server using Pytyon's Flask.
Create a route for creating the punctuation.
Receive text data POSTed to the route.
Punctuate the text using SpaCy, Python's natural language processing library.
Returns the punctuated text.
Specify the server port number 5000.

The script that implements the above flow is as follows

from flask import Flask, request
import spacy

app = Flask(__name__)
nlp = spacy.load("en_core_web_sm")


@app.route('/punctuate', methods=['POST'])
def punctuate_text():.
    text = request.form.get('text')
    doc = nlp(text)
    punctuated_text = ""
    for sentence in doc.sentences:.
        punctuated_text += sentence.text + ". "
    return punctuated_text

if __name__ == '__main__':.
    app.run(host='0.0.0.0', port=5000)

The Dockerfile for container creation is as follows.

FROM python:3.9-slim
WORKDIR /app

COPY requirements.txt requirements.txt
RUN pip install -U pip setuptools wheel
RUN pip install --no-cache-dir -r requirements.txt
RUN python -m spacy download en_core_web_sm

COPY . .

CMD ["python3", "app.py"].

Creating the Docker Compose file

The entire file should look like this

# docker-compose.dev.yml

version: "3.8"

services: # Docker-Compose.dev.yml version: "3.8
  # Container A
  services: # Container A
    build: .
      context: . /python
    container_name: transcription
    depends_on: - depends_on: .
      -. /python container_name: .
    volumes: .
      - . /python:/app

  # Container B
  punctuate_text: - volumes: .
    build: .
      context: . /punctuate
    container_name: punctuate
    ports: 8000:5000
      - 8000:5000

A Important part of the container description.

depends_on:: ``docker
- punctuate_text

By specifying the service name of the container B, you can start the container A after the container B.

Important parts of the container B description.

ports:
  - 8000:5000

The 5000 number is the number in the network, the same as the port number of the Flask server in the container B.

Run docker-compose command

Start the two containers.

## docker-compose -f docker-compose.dev.yml up -d

Summary

The address to access the containers is determined by the service name and port number in the docker-compose file.
Pay attention to the order in which containers are started.
Set the time to wait for a response from the server.

Conclusion

It took me a while to solve the problem because I didn't know how Docker was resolving the address dynamically.

You can see the source code on GitHub

How to remove all the disk usage occupied by Docker

kay-adamof — Sat, 01 Oct 2022 00:57:31 +0000

If you are doing hard works with Docker, you would be noticed that the Docker uses many ammounts of your local storage and will happen the disk shortage. In that situation, you are probably want to delete all the disk usage occupied by Docker, but how should we do? I'll introduce you guys the 4 commands to clear the disk usage.

First of all, Let's check out the Docker's disk usage.

How to check out the disk usage by Docker

docker system df

# docker system df
TYPE            TOTAL     ACTIVE    SIZE      RECLAIMABLE
Images          6         2         1.758GB   1.013GB (57%)
Containers      2         0         1.937MB   1.937MB (100%)
Local Volumes   11        3         391.1MB   53.85MB (13%)
Build Cache     141       0         1.003GB   1.003GB

We are able to see 4 types of disk usage via docker system df.And next, we are going to delete these disk usage individually.

How to delete all the Docker Images

docker rmi $(docker images -q)

rmi: ReMove Images
$(docker images -q): List all the image IDs

How to delete all the Docker Containers

docker rm $(docker ps -a -q)

rm: ReMove containers
$(docker ps -a -q): List all the container IDs

How to delete all the Docker Local Volumes

docker volume rm $(docker volume ls -qf dangling=true)

volume rm: Volume, ReMove
$(docker volume ls -qf dangling=true): List all the volume names including dangling ones

You see what the 'dangling' is

How to delete all the Docker Build Cache

docker builder prune -a

builder prune -a: remove all build cache

Wrap up

You are able to run these four commands to clear all the disk usage by Docker:

docker rmi $(docker images -q)
docker rm $(docker ps -a -q)
docker volume rm $(docker volume ls -qf dangling=true)
docker builder prune -a

DEV Community: kay-adamof

3 things you should care about Client Component 【Next.js app/】

1 - How to use 'use client'

No.1: Add 'use client' at the beginning of the file

No.2: Pass through the file with 'use client'

2 - Do not directly nest Server Components

3 - Do not import modules from index files (cannot)

4 - Pre-Rendering

How to fix " Module not found: Can't resolve 'fs' "

ALERT

ALERT

Situation

Solution

Supplementary Information

Introduction to the "prose" class that instantly beautifies articles 【 TailwindCSS 】

How to configure a custom theme as "Dark Mode"【TailwindCSS】

Setting up a custom theme as dark mode

How to provide detailed type information using "as" and "&"

[TypeScript] How to create a union type consisting of string literals and string primitive

[TypeScript] Creating a literal type union from object values

How to assign TailwindCSS class names to arbitrary variable names while letting auto-completion work.

VSCode Configuration

How to upgrade `pnpm`

Steps to upgrade pnpm

Actual Commands

How to hide or Fix; `typescript: File is a CommonJS module; it may be converted to an ES module.`

Letting two Docker containers talk to each other

Creating the container A

Creating container B

Creating the Docker Compose file

A Important part of the container description.

Important parts of the container B description.

Run docker-compose command

Summary

Conclusion

How to remove all the disk usage occupied by Docker

How to check out the disk usage by Docker

How to delete all the Docker Images

How to delete all the Docker Containers

How to delete all the Docker Local Volumes

How to delete all the Docker Build Cache

Wrap up

No.1: Add `'use client'` at the beginning of the file