Forem: Elisabeth Leonhardt

How to run GitHub Actions locally

Elisabeth Leonhardt — Wed, 19 Nov 2025 15:45:41 +0000

This week, I made an update in our codebase that required a few changes in tests. I fixed them, tested locally and everything was fine. Proud of my accomplishment, I opened a PR, only to see that the tests started failing when running inside the GitHub Action.

I could have committed a bunch of log messages to the failing tests to find the cause of the issue but that seemed too tedious and I didn't want my coworkers to be able to see all my console.log('do we get here?') either. So, to maintain the appearance that I am a capable developer, I configured GitHub Actions locally and here is how:

I installed act https://nektosact.com/ - I used Brew
You need Docker, so the actions can run inside a container. I had Rancher already installed
(optional) install the "GitHub Local Actions" extension if you are using VSCode or Cursor and prefer a UI

I was using cursor and after installing everything, I could see the required components were installed and running and the extension did already detect my workflows:

When starting the GitHub Actions with the extension, I got the following error: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

To solve this, I just copied the command that the extension creates and added a DOCKER_HOST env variable in front, like so:

DOCKER_HOST=$(docker context inspect --format '{{.Endpoints.docker.Host}}') act --workflows ".github/workflows/backend.yaml" --secret-file "" --var-file "" --input-file "" --eventpath ""

To run just one simple job and not the whole workflow (maybe you don't need to lint right now) you just add a --job option:

DOCKER_HOST=$(docker context inspect --format '{{.Endpoints.docker.Host}}') act --workflows ".github/workflows/backend.yaml" --job "test" --secret-file "" --var-file "" --input-file "" --eventpath ""

The output was quite large in my case, so I redirected everything into log.txt, asked Cursor to go over it for me and find the critical error messages

This way, I found the issue quickly and looked like a hacker in the process. Hope this helps you too.

Unexpected Interview Question: Why do we need lock files?

Elisabeth Leonhardt — Fri, 06 Dec 2024 12:26:54 +0000

A package-lock.json file is like the Customer Success Manager at your company: They are both present in every project but you are not sure why and what exactly they do. And you are scared of conflicts with them: especially lock file merge conflicts.

In this article, you are going to learn what's inside a lock file, why it helps with the it works on my machine problem and why it can even enhance the security of your project.

⚠️ I use npm for my examples, but the concepts also apply for yarn or other package managers.

How dependencies work

It turns out, your favourite libraries and packages are often not only built with magic, but with other packages we call dependencies. So when installing for example express in your project, you actually install express and with it everything express devs used to build express.

This is why your node-modules folder suddenly has stuff you did never install: Because the dependencies of your dependencies and their dependencies and their dependencies dependencies are all sitting together making your incredible project work as intended.

Tools like npm, pnpm, yarn or bun are actually taking really good care about this so you don't have to: They resolve cyclical dependencies, they deduplicate dependencies if one is required twice and they also have a way to keep dependencies separate if two packages have the same but need different versions. Cool stuff, I know.

Solving the It works on my machine problem

Let's assume you ~~abandoned~~ finished your last side project and are starting a new one. You install express and your package.json looks like this now:

{
    "name": "side-project-i-wont-abandon",
    "version": "1.0.0", 
    "dependencies": { 
          "express": "^4.18.0"
    } 
}

Two weeks later, you tell a friend about your cool new side project and he wants to join, so he downloads the code and runs npm install.

❓Question 1: Will his local version of express be a different one than yours because of the caret which allows upgrading of minor versions and patches? It could be for example 4.18.3...

❓Question 2: What about the dependencies of express? If some updates took place, will these be reflected in his node modules?

😅 Answer: It depends on whether you have a lock file or not.

When you first install all the dependencies, a lock file is created. It saves all the exact versions installed plus the versions of the dependencies. Here is a very small example of express with body-parser as it's dependency:

{
  "name": "side-project-i-wont-abandon",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "dependencies": {
    "express": {
      "version": "4.18.2",
      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
      "integrity": "sha512-...",
      "requires": {
        "body-parser": "^1.19.0"
      }
    },
    "body-parser": {
      "version": "1.19.0",
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
      "integrity": "sha512-..."
    }
  }
}

When somebody now runs npm install in another environment with that lock file present, the versions that will be installed will be the ones specified in the lock file.

Therefore, if a lockfile is present, the answer to both questions is NO: the local versions of your friend will be the exact same versions you also have, because they are fixed in the lock file.

If no lock file is present, both answers will be YES - there is a possibility that the installed versions will differ - which could impact the functioning of the project. Or: It works on your machine and I have unexplainable errors I have no idea how to debug.

Why does the lock file improve security?

Imagine that Henry the Hacker has been highly productive and managed to get access to the express npm account. He changed the version 4.18.2 to contain a vulnerability to exploit the projects installing it. (Something like this has happened for example in 2018: event stream incident)

If a third person helping on your project would run npm install now, version 4.18.2 would be downloaded, because that's the version specified in the lock file. However the lock file also contains a SHA512 hash of the gzipped package. Since adding the vulnerability changed the SHA512 Hash, npm will not proceed with the installation.

npm ERR! Integrity check failed for "https://registry.npmjs.org/express/-/express-4.18.2.tgz"
npm ERR! Expected sha512-<original hash> but received sha512-<tampered hash>

the npm error that makes Henry the Hacker mad

Therefore, your project is secure, as long as you don't update dependencies. 🤯

But wasn't updating dependencies important to maintain your project secure? Well... yes, but also: not always and not right away. If you are interested, I can write about that another time.

Hope this made the topic a little more understandable.

Are there other topics in programming that you just accepted without questioning how they work and why they are there? I would love to hear about them in the comments. ☺️

Photo by Scott Rodgerson on Unsplash

What advice would you give your Junior self?

Elisabeth Leonhardt — Sat, 23 Nov 2024 20:15:38 +0000

what were you struggling with in your first role(s) as a junior dev? How did you overcome it? What would you do differently?

Make table rows clickable as links with tanstack-table and CSS

Elisabeth Leonhardt — Sun, 19 Nov 2023 14:46:41 +0000

You want your entire table row to be a real clickable link? Here, I present you with a practical and accesible solution.

Link to the codesandbox: Check it out!

Step 1: Create your table

Use whatever technologies you like for this: I went with React and tanstack-table, because that’s what I currently use at work.



type Items = {
  ranking: number;
  url: string;
  name: string;
};

const data: Items[] = [
  {
    ranking: 1,
    url: "https://google.com",
    name: "Google",
  },
  {
    ranking: 2,
    url: "https://bing.com",
    name: "Bing",
  },
  {
    ranking: 3,
    url: "https://yahoo.com",
    name: "Yahoo",
  },
];
const columnHelper = createColumnHelper<Items>();
const columns = [
  columnHelper.accessor("ranking", {
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("name", {
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("url", {
    cell: (info) => info.getValue(),
  }),
];
export function Table() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <div>
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id} className="table-head">
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id} className="data-rows">
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="table-cell">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Step 2: Add an additional column to your table

I added it on the left side, but that’s indifferent. Here, it’s filled with yellow, so you can see it.

Step 3: Put your link inside the empty column

In the small column, put the link that every row should lead to inside an anchor tag.



...
    <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {/*⬇️ add an extra column here */}
              <th key="extra-column" aria-label="Search Engine Links"></th>
              {headerGroup.headers.map((header) => (
                <th key={header.id} className="table-head">
...
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id} className="data-rows">
              {/*⬇️ add a cell with an empty link for every row
              below the empty column header */}
              <td>
                <a
                  href={row.original.url}
                  aria-label={row.original.url}
                  className="row-link"
                ></a>
              </td>
              {row.getVisibleCells().map((cell) => (
...

Step 4: Position the link so it spans over the whole row

Now, that the link is part of the table, let’s make it overlap over the whole row with CSS:



tr {
  border: 1px solid white;
  position: relative;
  height: 3rem;
}

.row-link {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 3rem;
}

.data-rows:hover {
  background-color: #a8a5a5;
}

I added a yellow background and borders to every element, so it’s easier to see. With the absolute positioning in relation to the table row, the anchor tag spans over the whole row and makes it clickable.

By adding an adequate outline to the anchor tag, the focus is also including the whole row and making it therefore great to tab through. 🥳

⚠️Notes about Accessibility⚠️

🧑🏽‍🦯 The empty column header and the empty anchor tags can be confusing for people using screen readers, this is why I added an aria-attribute to them.
⤵️ I customized the outline for focus-visible, so the links are clearly marked as something clickable and accessible over the keyboard.
🎨 Mine is of course an example to show the concept - always check for sufficient contrast when choosing your colors.

I love this solution - it's so elegant! Hope this helped you!

4 Steps to Mitigate Interruptions as a Developer So You Can Finally Keep Up with Your Tasks + Recover Your Attention Span

Elisabeth Leonhardt — Fri, 17 Nov 2023 10:12:15 +0000

What do you think is the most challenging part of being a Developer?

Solving hard problems?
Fixing nasty bugs?
Balancing requirements and expectations with technical possibilities?

For me, it's neither of those. It's having to do all of them while constantly being interrupted by Slack messages or Meetings. When I think about what I did during the workday and my answer is: Well, I was mostly on Slack, that feels terribly frustrating.

Thanks to Cal Newport's work, here is the system I built for myself that has reduced interruptions and increased my focus:

1. Hardware fix: Get slack out of sight and mute notifications

If you want to avoid eating cookies, the worst way to go about it is leaving a huge cookie jar right in front of you on your desk.

This applies to Slack too: Ideally, close it completely. If that's not an option, hide it so you don't constantly see the blue or red circle on your screen.

Also, mute all the channels where lot's of random discussions take place:

The general channel
All the HR channels
Yes, the pets channel has to be muted too!

Mute chats from people that interrupt you for things that can wait, for example:

Your manager
The intern that need help every 2 minutes
Your work friends - get together over coffee!

2. Set up slack-times, designated office hours and a solid note-taking system

Now that you silenced everything, you will still get slack messages: how do you handle those?

During the day, constantly take notes of your questions or items you want to discuss. Everything that you would normally ask on slack right away now goes into your notes.
Estimate the time you need to read and answer Slack messages and schedule daily blocks in your calendar. Make an experiment of only answering in these scheduled blocks. Bonus points if you only appear online during these blocks.
Setup office hours and invite everybody to bring their questions and concerns. Have your notes ready so you can ask your questions right away.

3. Get people to get used to your slack-times and office hours

Getting people to come to my office hours was easy.

But they sometimes show up unprepared and later continue messaging me during the day because they forgot to mention the most important items during the checkpoint.

Here are some things I do to reinforce my system:

I tell people I miss their important messages due to the amount of noise in slack
I tell people I am in the middle of something and I will have more headspace during my office hours
I delay answers or I don't answer at all
If it seems to be very urgent and important, I ask directly: Can we take a look at that during office hours or is this a matter of life and death?

Some caveat here: If you do all this, but also are the one that constantly asks messages on Slack yourself, people won't take you seriously. Take notes and ask all the questions in your scheduled meetings.

4. If you can, take advantage of your time zone and start earlier or later than others

My most productive days are Saturdays and Sundays.

Because I just know that nobody will message me and I can focus so easily. The same principle however also applies when I work during hours nobody else is working. This is one reason why I shifted my working day to start 2 hours earlier than my coworkers, taking advantage of living in a different time zone.

This option is not available to everybody, but I wanted to mention it since it improved my productivity a lot.

Want more?

Cal Newport's work has completely changed how I look at deep work and productivity.

If you liked this article, here are a few resources that you might find interesting:

Did this help? Do you have other strategies? Let me know in the comments!

5 Important Concepts to Master the useState Hook in React 18

Elisabeth Leonhardt — Sun, 05 Nov 2023 20:46:19 +0000

If you started coding not too long ago, you probably learned React with a bunch of tutorials and hands on guides.

I know we should all read the docs first, but they can be hard to understand for complete newcomers. Coding tutorials, on the other hand, can be superficial and skip over some more advanced concepts, which leaves you making stupid mistakes or writing inefficient code. They also can create the illusion of completeness: You finished the tutorial, therefore now you know and understand everything, right?

After more than 4 years of experience with React, here are some concepts about the React useState hook that I learned the hard way:

1. Always update state with the setState function

You probably did know that, but do you know why that is?

In React, the value stored as state should be treated as immutable. If you want to update your state, you are required to use the setState function with a new value. If you try to update your state directly, React will fail to notice the update and will not rerender your component nor update the state itself.

If you want to store state inside a component that doesn't trigger rerenders, use the useRef hook.

2. There are two ways to initialize state

Did you know you could initialize state with a function too?

Remember that the initial value is evaluated only the first time the component renders. If you pass in a function as an argument, it can't have parameters and it should be self-contained - no randomness or side effects are allowed. Pros refer to these as 'pure functions'.

// ✅ do this:
const [state, setState] = useState(() => createEmptyTodo());

// 🚩 not this:
const [state, setState] = useState((username) => createRandomUser(username));

Use this approach when you need to initialize state with the result of a computationally expensive function or if you want to avoid placing an entire function inside the useState initializer.

3. You can use the previous state in your setter function

Sometimes we forget about the asynchronous nature of the useState hook and try to update it several times inside the same event, ending up with unexpected behavior.

// 🚩 this won't work as expected!
function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}

React does batch setState calls together and rerenders the component afterwards, which is why we have to be careful with the values we pass into the setState function. To avoid bugs, we can pass in an updater function instead of passing in the value directly. This will keep track of the "pending state" (state that has already been updated although it's not yet rendered) and will make the previous code snippet work.

// ✅ this will work
function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
}

Understanding this will save you from a lot of headache when you run into issues where your state isn't updating properly.

4. How to Update Objects Correctly

Remember the first part of this article, where we said that state was immutable?

This is important for objects! Every time we want to update a part of an object, we have to pass in a completely new object into our set function. The most common way of doing this is by using the spread operator.

// ✅ Replace state with a new object
setForm({
  ...formData,
  firstName: 'Juan'
});

Also remember that you can overwrite existing object properties by adding them a second time to the object.

/* this will set {
  firstName: 'Juan',
  lastName: 'Gonzales'
} */
setForm({
  firstName: 'Sara',
  lastName: 'Gonzales',
  firstName: 'Juan'
});

5. You can reset the component's state with the key prop

In React, you normally use the key prop whenever you need to render an array of items.

But you can also give individual components a key prop and change it when you want to reset their state. Whenever the key changes, the whole component and its children are newly created and therefore all existing state vanishes. If you need to reset the state from inside the component, the best way to do this is to store the original state in a variable and use it for overwriting the modified state.

<FormComponent key={selectedProduct} name={selectedProduct} />

You can read more about his behavior in the official react docs.

Knowing and understanding the basics will accelerate your coding journey. Do you want me to analyze more hooks? Let me know in the comments.

How to Use TanStack-Query to Write Cleaner React Code as a Junior Developer

Elisabeth Leonhardt — Tue, 24 Oct 2023 19:35:04 +0000

Showing data obtained by external sources is a core part of most frontend applications.

Most of the data comes from an API or a CMS. If the amount of data to be fetched is small, this can easily done with react-native hooks in combination with the fetch api. However, if the data flow between client and server grows more complicated, we are at risk of creating tons of unmaintainable spaghetti code.

To avoid this, we need a better tool for the job: React Query.

Here are the steps to get started with react query to improve your code:

1. Understand the difference between client state and server state

Client state lives in the browser, like form state, dark mode or whether a modal is opened or closed. Server state lives probably in some database and is served asynchronously.

Always use React Query for server state. Use native hooks like useState or useReducer for client state.

2. Install React-Query in your project

Follow the installation instructions and don't forget to set up the query client provider

3. In your code, replace data fetching code and states with the useQuery hook

Instead of writing this:

  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://rickandmortyapi.com/api/character');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result.results);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

write this:

function fetchRickAndMortyCharacters() {
  return fetch('https://rickandmortyapi.com/api/character')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => data.results);
}

  const { data, isLoading, isError, error } = useQuery(['rickAndMortyCharacters'], fetchRickAndMortyCharacters);

The data you need to render will be in the destructured data. Here is an example of how you can render the result:

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error: {error.message}</p>;
  if (!data) return <p>No data available</p>;

  return (
    <ul>
      {data.map(character => (
        <li key={character.id}>{character.name}</li>
      ))}
    </ul>
  );

4. Convert the useQuery hook into a custom hook

For better reusability, abstract this into a custom hook:

export function useRickAndMortyCharacters() {
  return useQuery(['rickAndMortyCharacters'], fetchRickAndMortyCharacters);
}

now, from any component, you can just call the custom hook like so:

const { data, isLoading, isError, error } = useRickAndMortyCharacters();

That's it! If you want to go any further, read the docs and play around with different query options or with mutations.

Thanks for reading!

Setup SonarQube locally for your Next.js project

Elisabeth Leonhardt — Tue, 22 Aug 2023 16:43:16 +0000

What is SonarQube?

SonarQube is an inspection tool that analyzes aspects of your code, like code quality, code smells but also tech dept and security vulnerabilities. It's a good addition to Prettier and Eslint to ensure code quality.

Sometimes, adding SonarQube to your CICD or even paying SonarCloud is out of scope and out of budget for your project. In this guide, I show you how to set it up locally:

⚠️ All the instructions I give are tested on a Debian based distribution, you might have to adjust them slightly for other operating systems! ⚠️

1. Install the SonarLint extension

SonarLint works together with Eslint and prettier to notify you about possible issues as you are coding. Install the extension in your editor it to make your life easier: https://www.sonarsource.com/products/sonarlint/
For VSCode, it looks like this:

2. Setup the SonarQube server

In a location of your choice, create a docker-compose.yml file with the following content: ```yaml

version: "3"
services:
SonarQube:
image: sonarqube:community
depends_on:
- db
environment:
SONAR_JDBC_URL: jdbc:postgresql://db:5432/sonar
SONAR_JDBC_USERNAME: sonartest
SONAR_JDBC_PASSWORD: sonartest
volumes:
- SonarQube_data:/opt/sonarqube/data
- SonarQube_extensions:/opt/sonarqube/extensions
- SonarQube_logs:/opt/sonarqube/logs
ports:
- "9000:9000"
db:
image: postgres:12
environment:
POSTGRES_USER: sonartest
POSTGRES_PASSWORD: sonartest
POSTGRES_DB: sonar
volumes:
- postgresql:/var/lib/postgresql
- postgresql_data:/var/lib/postgresql/data
volumes:
SonarQube_data:
SonarQube_extensions:
SonarQube_logs:
postgresql:
postgresql_data:

This contains the images for two containers: The first one is the SonarQube server and the second one is a database that SonarQube needs to store all its configurations.
- Start up the docker-compose with the command: `docker-compose up -d`

### Fixing SonarQube Errors Part 1
In the beginning, you will maybe notice that the SonarQube container dies and if you execute the command `docker compose logs`, you will see the following error message: `ecl-frontend-SonarQube-1  | bootstrap check failure [1] of [1]: max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144]`

- To solve this, change the vm.max_map_count setting in /etc/sysctl.conf with the following command: `echo "vm.max_map_count=262144" | sudo tee -a /etc/sysctl.conf`
- Then, reload the configurations: `sudo sysctl -p`
- For Docker on Windows, you can go to the Docker Desktop settings and under Deamon, switch to Advanzed. There, you can add the following configuration:
```json


{
  "sysctls": {
    "vm.max_map_count": "262144"
  }
}

You will have to restart Docker Desktop afterward for the change to be available.

Fixing SonarQube Errors Part 2

Most likely, the SonarQube container will still fail with the error: FATAL: database "sonar" does not exist
To fix this, get a shell inside the PostgreSQL container docker-compose exec db psql -U sonartest
And once inside the container, create the sonar database with the command: CREATE DATABASE sonar;
Then, exit the psql shell with \q
Now that the database is created, you can run docker-compose up -d again or restart the SonarQube service with docker-compose restart SonarQube
The SonarQube server should now be available at localhost:9000the default credentials are username: admin and password: admin

3. Run SonarQube in your project

First, follow the steps to install the sonar scanner for your operating system: https://docs.sonarcloud.io/advanced-setup/ci-based-analysis/sonarscanner-cli/
Create a file with the name sonar-project.properties in your project root and adjust it accordingly: ```bash

Organization and project keys are displayed in the right sidebar of the project homepage

sonar.organization=my_organization
sonar.projectKey=my_project
sonar.host.url=https://sonarcloud.io

--- optional properties ---

defaults to project key

sonar.projectName=My project

defaults to 'not provided'

sonar.projectVersion=1.0

Path is relative to the sonar-project.properties file. Defaults to .

sonar.sources=.

Encoding of the source code. Default is default system encoding

sonar.sourceEncoding=UTF-8

- Enter the server on [localhost:9000](http://localhost:9000) and create a new project
- Select a name and a baseline branch for the project

![SonarQube Name selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j12snfttx41h18dcz6uk.png)

- Choose how SonarQube should analyze your code changes. In my case, I choose the reference branch option because we are working with feature branches, but you will have to adapt this option to your workflow.

![SonarQube analization pattern](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nea7qn2vtszpcas6n9sb.png)

- In the next step, you will be asked how you want to analyze your repository. Since we are configuring a local setup, let’s select “locally”


![Local Analysis with SonarQube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9dijrqhnazdx8vn9mq4.png)

- Now, generate a token for your project. This will link your SonarQube server with your code.
- Once you have your token, SonarQube will let you choose a programming language and an operating system and based on that, will give you the command you can execute to run your analysis.
![Select Programming Language and OS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxb7av8qvi700zvir7ox.png)

- Run the command that SonarQube gives you at the root of your project.
- After running the command, SonarQube should show the project results in your Dashboard. Click on the project and inspect its findings. Make sure to click on “Overall Code” to be able to see problems in your whole codebase and not only for the latest changes.


![SonarQube results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fghbi4ff2it2mpbo7h9x.png)



That’s it - you did successfully configure SonarQube on your local machine. As long as you don’t delete the volumes of the docker-compose, the data will stay even if you turn off your machine or kill the docker containers.

Is there a better way? Let me know in the comments! I hope this was helpful!

You don’t need a company training plan

Elisabeth Leonhardt — Wed, 05 Jul 2023 09:13:42 +0000

In software, I see a lot of effort and money going into training. Companies tend to have ramp-ups or boot camps for newcomers, courses and training plans for developers, and different training for managers and the product area. At most of the companies I worked for, I had to fill out forms about my technical abilities, but also about my training wants and needs. Normally, I see a training plan listed in job offers alongside other perks. There is no doubt that companies want to train their personnel and are willing to spend time and resources on it.

I am big into training: I love attending workshops and taking courses, I have written training plans for people at my company and I have even given company-wide training as part of the developer training plan. Last year I was even given a special mention in a company email as a person who had given lots of talks and training at the company…

However, I feel there is a lot of money and effort wasted: First, I want to explore why and afterward, propose a better approach.

Why I am not a fan of company training plans:

Training plans are a product of randomness and luck: While training plans tend to be listed as a perk in the job description, whether you end up having a training plan or not, depends hugely on your manager and/or your tech lead. This adds a lot of randomness and luck to your professional growth.
Skill levels are sometimes not correctly evaluated: The evaluation of your current and future skill levels tends to be very little specific. I have been told my React skills were a 3 out of 5 and was asked to improve to have at least a 4. No further specifications were given.
Management has no interest in progress: Often, there is no space to discuss feedback on improving and learning in general. Results are only discussed during performance reviews, that take place once or twice a year. At that point (aka when it’s too late) your manager has already decided whether you reached your goal or not to justify your salary increase or the lack thereof. Real improvement needs regular feedback.
Training is sometimes used as a break: In the training I gave, I had between 30-50 attendees. But only a handful would participate, most of them would sit muted in the meeting and disappear for the quiz at the end. I am not judging the people that want a break, but if that’s what people attend training for, we won’t improve code quality.
Training is sometimes not added to Sprint estimates: Training takes time and mental headspace away from the Sprint. If this is not accounted for in your planning, you might be less inclined to attend training or to take courses. That further exacerbates the problem that people who already have difficulties keeping up with their tasks won’t improve because they have no time to study.
Giving training can burn the teachers out: Preparing training is hard work. Yes, even in times of ChatGPT. I have to think about the content, how to structure the content, how to make the content understandable, and how to create examples that are applicable on a day-to-day basis. I have to think of exercises, homework, and exam questions. I have to prepare a repository for people to play with. It’s also a little nerve-racking to expose yourself, your knowledge, and the limitations of said knowledge. If all of this is just added on top of the normal tasks, volunteer teachers can be discouraged from giving training.
The results of training and training plans are hard to measure: Never have I ever heard somebody say: “The quality of X in our project did improve thanks to your training.” Or “I finally got quicker with Y thanks to what you taught me”. But shouldn’t that be the goal? It’s nice to know people liked my training, but it feels more important to know that people use the concepts and work more efficiently.

Now that the ranting part is over, let’s formulate some proposals to improve training efficiency for everybody:

If you need a training plan:

Assume responsibility: I want you to understand that your training and learning are only your responsibility. Don’t whine about your company not giving you an adequate training plan, access to courses, or whatever. You don’t want a random person to decide whether you improve professionally or not.
Create your training plan yourself:
1. Make a list of training needs and wants: Create a new notion document or .txt file or whatever suits you. Is there something you are really bad at? (Is it CSS?) Write it down. Something that’s part of your tasks but you dread doing it and you always do it wrong. Write that down too. Something that would make your day 100 times easier if you just knew more? (Could be git…) Some article you liked but you never read? Find it in your infinite supply of bookmarks you never look at. Something that interests you but you never took the time to try it? You guessed it, it goes on the list.
2. Order and prioritize: I like to prioritize my list a little bit and distinguish between short learning projects (reading an article or watching a Youtube video) and longer learning projects (going through an entire course). I also like to evaluate how much impact would this knowledge have on my day-to-day tasks.
3. Now, work on your plan! Sometimes, you have 15 minutes in between meetings. Instead of scrolling Instagram, read this article you bookmarked years ago. Find half an hour at the end of the day to go through your Udemy course. Don’t get overwhelmed if there is a lot on your plan and you have little time. Just try to get into the habit of reading/studying something every week.
Share your plan with your tech lead and your manager: If you are in luck, they are interested and can even give you feedback.
Or: Don’t share your plan with your tech lead or manager: Sometimes, the people who manage you are not interested or don’t take the time. That’s ok. Don’t dwell too much on it and make the best out of your current situation. Sometimes you also want to feel free and not give too many explanations. Do what you consider the best option in your current situation.
Collect evidence that you worked on your training plan. Keep a log of what you did and the results that produced. Even if they are tiny wins. For yourself, but also for your performance reviews. If you went through a CSS course and therefore are producing better CSS, this is something you should mention in your 1:1s. Mention new tiny wins every time you can. Keep in mind that you have to give visibility to the extra effort you put in, nobody else will notice.

If you are somebody who should be writing training plans:

Make it a priority: I know, you have little time. But if people improve, everybody can work better together and you can delegate more. I have been able to delegate plenty of tasks to juniors and even interns but just giving them a few hours to take a $10 Udemy course.
Ask them to write their plan and review it. Give them nice feedback and maybe some help on how and where to start. Everybody is different, some people need more guidance than others.
ASK AND LISTEN: I want people to come to me and ask questions, but that sometimes doesn’t happen. Ask how things are going with the plan regularly. Listen to what they have to say, just listen. Ask them how they are going to solve the issues they have. Only make suggestions when asked. You don’t want to do their work, you want to enable them to solve whatever stands in their way.
If somehow possible, give them time to work on their training plan: I know that’s a slippery slope since people sometimes use this as an excuse not to work, but they also don’t work on their training plan. So you will have to use your best judgment with this one.
Keep track of improvements you see: Imagine you put a lot of effort into something at work and your superior doesn’t even notice. Ask if the person itself feels improvements but also talk about the improvements you see. If possible, regularly, not only once a year.

Conclusions

An adult in the workforce should be able to take responsibility for his professional development instead of exposing it to the randomness of managers and company policies. On the other hand, superiors can give employees better opportunities to develop by showing interest and giving constructive feedback. If everybody takes care of his training in a proactive manner, randomness is removed, improvements are easier to track, and human resources doesn’t have to play guessing games on what to do regarding training.

What are your thoughts? Do you have different or better solutions? Let me know down below in the comments.

Simple mutations with TanStack Query and Next.js

Elisabeth Leonhardt — Mon, 24 Apr 2023 20:21:07 +0000

Mutations with TanStack Query have always been a little scary - at least until I decided to give them a try. After using them a lot, there is no turning back.

So today I want to show you how you can write your first mutation and guide you through the little pitfalls that can happen along the way.

The code for this example is in this repository, which contains a collection of TanStack proof of concepts I wrote. The mutation we are talking about is here.

What are mutations for?

Mutations are designed to be used for everything that's not a GET operation, so we can use them to POST, PUT and/or DELETE data. To make it simple, I set up a mock database with json-server and a few todo-items that our beloved characters from the Rick and Morty universe will have to do during the episodes. Don't forget to execute npm run json-server to start it up.

We want the result to look something like this:

Create a new todo

Let's start with writing the function for the actual POST first. This should be very straightforward.



async function createTodo(todo) {
  const response = await fetch("http://localhost:8000/todos", {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify({
      id: nanoid(),
      user: todo.user,
      task: todo.task,
      done: false,
    }),
  });

  const result = await response.json();

  if (!response.ok) {
    throw new Error(result.message);
  }
  return result;
}

This just uses fetch to send a post request with the todo passed in as an argument and returns the result. An error is thrown if something goes wrong.

Now, we can create a form to write our todos into:



     <form onSubmit={onFormSubmit} className="grid grid-cols-1 gap-4">
        <div className="flex gap-4 items-end">
          <label htmlFor="user" className="text-xl font-bold">
            User:
          </label>
          <input
            type="text"
            className="text-black flex-1"
            name="user"
            id="user"
            onChange={changeTodo}
            value={todo.user}
          />
        </div>
        <div className="flex gap-4 items-end">
          <label htmlFor="task" className="text-xl font-bold">
            Task:
          </label>
          <input
            type="text"
            className="text-black flex-1"
            name="task"
            id="task"
            onChange={changeTodo}
            value={todo.task}
          />
        </div>
        <button type="submit" className="justify-self-end">
          create todo
        </button>
      </form>

of course, this also requires some state and functions that handle state change:



const [todo, setTodo] = useState({ user: "", task: "" });
  function changeTodo(e) {
    const newObject = {};
    newObject[e.target.name] = e.target.value;
    setTodo({ ...todo, ...newObject });
  }

now that this is set up, let's look at the mutation itself. The useMutation hook has only one mandatory argument, which is the function that posts to our API and which has to return a Promise. In our case, that would be:



const createTodoMutation = useMutation(createTodo)

Now, the only thing left to do is to tell the form to actually mutate data every time a todo is submitted. You can do this for example in the onSubmit handler:



  function onFormSubmit(e) {
    e.preventDefault();
    createTodoMutation.mutate(todo);
  }

So let's recap:

The user types a todo into the field and clicks submit.
In the submit handler, the default is prevented and the mutate function for the useMutation hook is called. As an argument, it takes the data you want to pass to the createTodo function.
The createTodo function makes the API call and now you should see that json server indicates the POST request in his logs. Also, your new todo should be visible inside the db.json file.

List all todos

That's all nice and good, but we still can't see our todos on the page, the form only allows us to submit new ones. So let's add some quick code to visualize our todos.

We need a function to fetch from our API:



async function fetchTodos() {
  return fetch("http://localhost:8000/todos").then((res) => res.json());
}

In our component, we can use the useQuery hook to obtain our todos:



const todos = useQuery(["todos"], fetchTodos);

To make my code a litte cleaner, I created an extra todo component:



function Todo({ todo }) {
  return (
    <div className="bg-white text-black rounded-lg grid grid-cols-[auto_1fr_auto] items-center gap-4 py-2 px-4">
      <input
        type="checkbox"
        checked={todo.done}
        onChange={(e) => changeTodoStatus(e, todo.id)}
      />
      <p>{todo.task}</p>
      <Image
        src={todo.user}
        alt="profile picture"
        className="rounded-full"
        height={60}
        with={60}
      ></Image>
    </div>
  );
}

And now we only need to iterate over our todos and show them like so:



{todos.isLoading ? <span className="loader"></span> : null}
      <div className="grid grid-cols-2 gap-4 pt-8">
{todos.isSuccess
          ? todos.data.map((todo) => <Todo todo={todo} key={todo.id}></Todo>)
          : null}
      </div>

We are done, right?

If you tried this, you would expect the new todo to appear automatically after you created it, but this doesn't happen. That's because we never told our useQuery hook to update it's query. Since the database changed, we have to find a way for the hooks to communicate with each other: Couldn't maybe the useMutation hook tell the useQuery hook that is has to update the cache?

Yes it can and that's what we are going to do. Let's change our previous useMutation hook for the following:



const queryClient = useQueryClient();
const changeTodoMutation = useMutation(updateTodo, {
    onSuccess: () => queryClient.invalidateQueries({ queryKeys: ["todos"] }),
  });

We are deciding to invalidate the queries that contain the queryKey "todos", which is a declarative way to ask TanStack query to update the corresponding data. We could also do something like `queryClient.refetch({queryKeys: ["todos"]}), which would be imperative but the recommended way is just to invalidate the cache and let the library handle the rest.

Conclusion

That's a very basic example I have used a lot: Posting something and immediately refetching it to keep the UI updated. Maybe you already suspect how to update a single todo? Try it yourself and then check the solution in the repository.
_

Photo by Carlos Muza on Unsplash

I tried Remix and it is too good to be true

Elisabeth Leonhardt — Fri, 09 Sep 2022 13:01:42 +0000

Spanish Translation/Traducción al Español

I struggle to finish user stories.
Before any PR or before assigning the story to QA, I open all of the code again. I read it line by line. Especially the parts where I had to compromise, where I wasn’t happy about how I did things, but I also didn’t know how to improve. I think: “If I just knew a little more, if I just had more experience, my code could be more performant, more elegant, or more readable…”
Of course, I submit the PR, and the tasks are closed on time. However, a part in my head doesn’t want to accept the “Done” and it saves the problem somewhere in a dark corner.
And after weeks, or sometimes months, I am reading an article, watching a video, or listening to an explanation when suddenly my head goes: “Now I know!”
I can’t always go back to the code and improve it, but I discovered a new way of solving a problem, which makes me a better programmer.
When I started learning about Remix, I had been using Next.js for almost 2 years. I also have experience with Gatsby. While reading the Remix docs, I had so many “Now I know!” experiences that I felt the need to share them. Like a woodworker needs specific tools to build furniture, as programmers, we need to know patterns, techniques, libraries, and frameworks so our code is easily scalable, maintainable, and can stand the test of time.
In the following sections, I want to go over my investigation process and why I believe that Remix is a valuable addition to my toolbox.

Phase 1: Collecting Information

To understand why Remix is a good tool to have in mind for a future project, it’s important to understand the alternative technologies with their advantages and disadvantages. Here is a quick summary of my own experience mixed with what I learned about Remix:

Advantages and Disadvantages of SSG

Static websites are the perfect use case for server-side generation. In the React world, a very common tool for developing static sites is Gatsby. After developing the site, it can be built and deployed, for example with services like Netlify, taking advantage of the CDN and thus reducing latency for the end-user. Problems start to arise if we want to do small changes, like fixing typos or adding a new banner to the home page. After the modification in the code, the whole page has to be rebuilt and redeployed.
Depending on the sites complexity and the amount of media that needs optimizing, rebuilding plus redeploying can take a considerable amount of time: Kent C. Dodds talks about this issue in his presentation about Remix: His built times were so long that they produced a timeout in Netlify.
To solve the mentioned problems, incremental static generation (ISR) was developed. This technology allows us to only rebuild the pages that changed. But if the required change affects a component present in all blog articles, its advantages can be diminished.
It is also possible to add dynamic data to static sites, but they have to be fetched on the client side. Static content has to be downloaded, javascript has to be executed, and dynamic content has to be fetched and then inserted into the DOM. This can take some time and therefore cause unexpected visual jumps on the site, also called cumulative layout shift (CLS). Unless a placeholder like a spinner or a skeleton is shown until the content appears, this can cause a bad user experience and can lead to your page failing core web vitals.

Advantages and Disadvantages of SSR

When a site has so much dynamic content that it is not feasible anymore to implement a statically generated site, server-side rendering is the answer. Upon request, the server generates the rendered content and sends it over to the client, thus making it possible to change content constantly. In the React World, Next.js is a framework frequently used in that case.
Since content is already rendered on the server side, cumulative layout shift is also taken care of. But we lose the advantages of the CDN and loading times can become an issue depending on a variety of factors such as server response times and latency between server and client.

Remix: the best of both worlds

If we don’t want to make compromises between the two technologies, Remix can be a good option because of the following:
With Remix, you can only build SSR applications, but it is built to take advantage of distributed infrastructure as a service like Cloudflare Workers or Fly, so you host your app as close to the user as possible.
Remix discourages client-side data fetching, which eliminates the need to ship libraries such as SWR, tanstack-query, or apollo to the browser. This of course implies a smaller bundle size and lots of saved mobile data for users who browse with their phones.
Since Remix pages are server-side rendered, layout shifts are taken care of.
I found several more aspects where Remix could introduce a performance benefit:
Some sites just become interactive when their javascript finished loading. This can confuse the user in the first seconds on the page if he tries to type into an input that is not responding. It is Remix’s philosophy to progressively enhance the site with javascript, not enable the site with javascript. This implies that inputs, menus, and buttons are immediately responsive, without depending on javascript.
Compared to Next.js, Remix can prefetch dynamic sites, for example, a result page while the user types in a search, thus making results appear almost instantaneously. This is possible thanks to Remix being a compiler, a server framework, and a client framework, therefore Remix can prepare the required components and fetch the necessary data while the user is still typing.

Phase 2: Try it out

With all that in mind, I started to dig deeper into the documentation and I created a repository to put the concepts into practice.

You can find the repository with all the code examples here

For a better learning experience, Remix provides a tutorial that guides you through the process of building a full-stack application from scratch with Remix. With that, I was able to play around with the following concepts:

File-based nested routing: With the help of the React Router documentation and the Remix tutorial, one part of my app was built just to play around with the concept of nested routing that Remix introduces. It facilitates layout composition: if your whole page needs a header and a footer and an administrative part of your page also needs a list of companies in a side-menu, Remix allows adding a nested layout for the /invoices domain with ease.

(Kind of) Modular CSS and Tailwind: In Remix, stylesheets directly inserted into the HTML as link tags and CSS-in-JS solutions are discouraged. This supports the philosophy of only using javascript to progressively enhance the page. Although Remix is a SAP, it is possible to code-split stylesheets so they are only downloaded for a page that the user is visiting and therefore feel like modular CSS to the developers. I also tried Tailwind, which was a breeze to configure and made the little styling I added very convenient.
Data loaders: Since data fetching should be done on the server, it is necessary to implement so-called data loaders which later make data available to the client with the help of a useLoaderData hook. I implemented a loader for a REST API and one for GraphQL and they were incredibly easy and straightforward to write.

const RICK_AND_MORTY_REST = "https://rickandmortyapi.com/api/character";

export const loader = async ({ request }) => {
  const data = await fetch("https://rickandmortyapi.com/api/character");
  const response = await data.json();
  return response;
};

const GetCharacters = gql`
  {
    characters(page: 2) {
      results {
        name
        id
        image
        status
        location {
          name
        }
      }
    }
  }
`;

export const loader = async () => {
  const data = await client.request(GetCharacters);
  return data;
};

Form Handling: One of Remix particularities consists in how it handles forms since it is possible to execute form handlers on the server side. By doing that, we avoid useState hooks for our input components, client-side javascript for event handlers, and the famous event.preventDefault(). As a consequence, the input is responsive right from the start.

export async function action({ request }) {
  const body = await request.formData();

  const task = body.get("task");
  const assignee = body.get("assignee");

  const fieldErrors = {
    task: validateTaskLength(task),
    assignee: validateNameLength(assignee),
  };

  if (Object.values(fieldErrors).some(Boolean)) {
    return badRequest({ fieldErrors, task, assignee });
  }

  await fetch("http://localhost:8000/todos", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title: body.get("task"),
      assignee: body.get("assignee"),
      id: uuidv4(),
    }),
  });
  return null;
}

Error boundaries. While it is possible to anticipate failures and handle them, it is not easy to manage unexpected failures. Normally, when an unforeseen failure occurs, the screen just goes blank without any indication of error for the end user. To avoid that kind of behavior, React 16 implemented Error Boundaries, which allow capturing unexpected failures and showing them only inside the predefined Error Boundary while maintaining the rest of the application usable.

export function ErrorBoundary() {
  const { invoiceId } = useParams();
  return (
    <div className='text-red-500'>
      We are sorry, we couldn't display the invoice with id: {invoiceId}
    </div>
  );
}

Phase 3: Teach it!

With all that freshly acquired knowledge, I was starting to get excited to share it with others. I made the repository public and put together a set of slides to give a talk at my company. On the day of the talk, everybody attending was able to clone the repository and get their hands dirty with the code while I was explaining. I chose this approach to provide a more practical and hands-on introduction to the subject, but it was also important for me that everybody attending would have a working example of all the concepts to continue experimenting. We made a live transmission on Youtube, and if you understand Spanish, you can watch the recording here: https://www.youtube.com/watch?v=8Ag-lLXvR0Q

Conclusion

It’s a little unfair to compare Next.js and Gatsby with Remix since Remix had the chance to learn from the mistakes and inefficiencies of its predecessors. With that said, after my research, I can say that the creators of Remix did an excellent job in creating a framework that provides great performance combined with awesome developer experience. In my case, I will have Remix in mind when defining a stack for a new project, so I can offer the optimal solution for the particular use case in question.

How to use client-side only packages with SSR in Gatsby and Next.js

Elisabeth Leonhardt — Sat, 07 May 2022 23:55:58 +0000

So you started a project in Gatsby or Next.js to take advantage of static site generation or server-side rendering and its performance benefits because that's what Youtube/StackOverflow/some course told you to do. You are coding along happily until this error appears:

ERROR #95312 
"window" is not available during server side rendering.

Maybe, you are a heroic senior dev who just understands this error, fixes it in 2 minutes, and goes on with his work. (Why are you even reading this?) If this is not the case, here is a down-to-earth explanation and a few ideas on how to solve it.

If you just want the fix: Here is the repository with the solution for Gatsby and here is what you need for Next.js.

Basics first: Understanding SSR versus CSR

I had lots of trouble understanding what exactly the difference between the two is, so I hope to enlighten you with an analogy:
Remember the last time you went to IKEA: you chose a beautiful bookshelf for your home, fought with your partner over it, got a heavy box from IKEAs warehouse-like part, made up with your partner over a hotdog, and then went home and assembled your purchase (without insulting the instructions, of course).

This is how client-side rendering works: Your browser requests a page, gets a nice block of code, pulls out his tools (Javascript, in this case), and builds the page together. Ikea in this analogy is the server, and your home is the client. Since you assemble your bookshelf client-side, it takes you a little longer and maybe a support call until you can enjoy your new furniture, but for Ikea, it was convenient to provide you with one of its products.

How our browser should not assemble the webpage

Assuming, you are not a handyman and you decide to pay IKEA to deliver your bookshelf already assembled to your home. You won't be able to enjoy the hotdog, but it's worth the evaded fight with your partner. You just request what you need and once you get it delivered, it is ready to go.

This is how server-side rendering works: the server we requested the page from executes all the code in a node server: your browser just has to paint it, no javascript needed. This is why you can disable javascript in your browser's dev tools, and server-side rendered pages will still appear flawlessly. It's a more expensive option for IKEA (and the owner of the webpage) since they need resources to assemble and deliver your request, but the user experience is better unless you really like these hotdogs.

Perfect User Experience

Can you mix server side and client side rendering?

Maybe IKEA delivers your bookshelf assembled but you realize the distance between shelves isn't just right. You will have to take out a screwdriver and make some adjustments, no big deal. If something similar happens on a webpage, like a browser conditionally rendering a modal based on preferences set in local storage: is it still server-side rendered? Or does it now count as client-side rendered?

Kind of both, right?

You can add client-side parts to server-side rendered pages. Maybe you clicked "Don't show me this dialog every time" and the page is adjusted on the client-side based on data stored in the browser. Or the page realizes an API call for targeted products based on your locally stored preferences.

Some tiny adjustments

Understanding the error

The error we see here is caused by the following: Some of our code is thought to be client-side rendered and assuming certain globals like window or document are available because the code is meant to be executed in the browser. This can be caused by our code or third-party libraries.

But if the code is server-side rendered, it is not executed by the browser, it is executed by a node server and globals like window and document are not available: hence the error we see.

The solution

1. Use the useEffect hook or just ask for window

That's the easiest solution: if you just need to access window to scroll somewhere or render some special component only on the client-side, you can do it like this:

import React, { useEffect } from "react";

export default function TestComponent(props) {
  console.log("I get executed in the browser and the client");

  const isSSR = typeof window === "undefined";
  console.log(isSSR);

  useEffect(() => {
    console.log("I am only being executed in the browser");
  }, []);

  return (
    <div>
      I am a test component!
      {!isSSR && <p>This is only rendered on the client side!</p>}
    </div>
  );
}

2. @loadable/component in Gatsby

The library @loadable/component allows you to dynamically import components to your project, so they don't get rendered on the server. The following component uses leaflet, a library similar to google maps that only supports client-side rendering:

import React from 'react';
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default function Map(props) {
    const defaultPosition = [-31.41528, -64.18156];
    const myIcon = new L.Icon({
      iconUrl: '/marker-icon.png',
    });
    return (
      <div className="map__container">
        <MapContainer
          center={defaultPosition}
          zoom={16}
          style={{ height: 400, width: '100%' }}
        >
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={defaultPosition} icon={myIcon}>
            <Popup>
              Entrá en la galería! <br /> Estamos en frente de Nunatak. <br /> Te
              esperamos!
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    );
  }

To be able to use this component in Gatsby, I used @loadable/component like so:

import loadable from '@loadable/component';
import React from 'react';
// import Map from './Map'; // uncomment this line to see the Gatsby build error

export default function MapWrapper() {
    const Map = loadable(() => import("./Map")) // comment this line to see the Gatsby build error
    return <div>
        <Map />
    </div>
}

Go ahead, clone the project and play around with the different types of imports. Then try running: npm run build so you can see the result in your terminal.

Gatsby also mentions some alternative solutions in the docs.

3. Dynamic loading in Next.js

Next.js has its own mechanism to dynamically import components on the client-side only: check out the docs. This is how I added the leaflet map in Next.js:

import React, { useState } from "react";
import dynamic from "next/dynamic";
import styles from "../styles/Contacto.module.css";

export function FindMe(props) {
  const Map = dynamic(
    () => import("../components/Map"), // replace '@components/map' with your component's location
    { ssr: false } // This line is important. It's what prevents server-side render
  );

  return (
        <div className={styles.map}>
          <Map />
        </div>
  );
}

The <Map /> component is exactly the same as in the Gatsby project. To try this, just spin up a Next.js project and import the Map component together with its wrapper into a server-side generated page.

As always, I hope this helped! Let me know what you think in the comments and have a great day!