Day 2: Web Development
Tags: beginners, css, nextjs, react
Published: 2023-03-08 01:10:02

# Day 2 - Debugging (already)

## Vision

I thought today I'd get to finish building the home page, but as soon as I sat down to execute `npm run dev`, the application crashed and I was served ```[Error: UNKNOWN: unknown error, readlink 'C:\Users\colby\OneDrive\Desktop\chowder-kettle\chowder-kettle-web\.next\static\webpack\pages'] {
  errno: -4094,
  code: 'UNKNOWN',
  syscall: 'readlink',
  path: 'C:\\Users\\colby\\OneDrive\\Desktop\\chowder-kettle\\chowder-kettle-web\\.next\\static\\webpack\\pages'
}```

I'd encountered this same error weeks ago when finishing the Next.js tutorial included on their website. I chose to dig deeper on the matter this time around.

## Debugging

After some fruitless googling, I followed the file path `C:\\Users\\colby\\OneDrive\\Desktop\\chowder-kettle\\chowder-kettle-web\\.next\\static\\webpack\\pages` and discovered a series of inscrutable files therein. I was able to extract some plain text from these files which returned results directing me towards configuring my debugger in VS Code. I created a file in the root of the project's directory .vscode/launch.json and added in the following code to the file: 
```
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Next.js: debug server-side",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev"
        },
        {
            "name": "Next.js: debug client-side",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        },
        {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "serverReadyAction": {
                "pattern": "started server on .+, url: (https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }
    ]
}
```
Following directions found on Stack Overflow, I ran the dubugging console and was ultimately returned the message "autoprefixer: start value has mixed support, consider using flex-start instead". I went into the Home.modules.css file I'd created for the NavBar yesterday and updated  `display: flex; justify-content: start; align-items: start` to `display: flex; justify-content: flex-start; align-items: flex-start`. This circumvented the matter and got the development environment properly running. 

## Home Page

Debugging took me about two hours to work through, and after I began building a Profile component, I quickly realized that I would need to pull data from Firebase if I wanted to authentically model this component in development (As I write this, I realize that I could also hard-code in values to placehold for data; potential route to pursue tomorrow). This line of thought pulled me towards configuring user authentication, and that matter led into my currently non-existent login page. Tomorrow I plan to begin with building the login page and ensuring user authentication is properly configured. 

## Takeaways

One thing I realized towards the end of my work day was that I'd left yesterday's terminal session still running. Scrolling through it, I began to discover that when I was still working yesterday, I'd received a series of warnings that explained the issue the compiler was having with start vs. flex-start. While in live development, the compiler was able to reconcile the issue, when I was trying to reload the development environment, the compiler would not move past the issue it was encountering. Essentially, if I had paid more attention to the warnings I was receiving, I would have saved the time I spent deciphering a far more complex error message.

Additionally, I realize I need to approach developing the application more programmatically. Whereas yesterday I came in with the set goal of designing the navbar component, today I set myself the broader task of designing the remainder of the homepage. I ignored my concern about the need to pull data, and as soon as I encountered that issue, I was stunted in my ability to immediately move forward. When planning my days, I must ensure I am staying granular so that development continues to move forward, so that days and hours are not lost to incessant reorientation.