AFK-AlignedFamKernel / afk_monorepo

AFK: Aligned Fam Kernel - Monorepo
https://afk-community.xyz
MIT License
14 stars 34 forks source link

Fix build website for AFK Nostr SDK packag #42

Closed MSghais closed 1 month ago

MSghais commented 2 months ago

Description

Error: Building website in Vercel.

The issue is in the build phase of the website, for the the packages/afk_nostr_sdk on the apps/website in Vercel.

This can be fixed with:

image

Mystic-Nayy commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @MSghais i can also work on this if you don’t mind

How I plan on tackling this issue

  1. Investigate Build Logs: Examine Vercel's build logs to pinpoint the exact error location within packages/afk_nostr_sdk during the website build.

  2. Check tsconfig.json and package.json: Review the tsconfig.json and package.json configurations in the packages, apps, and root directories for potential misconfigurations or missing dependencies.

  3. Resolve and Test: Make necessary adjustments in the tsconfig.json or package.json, then test the build locally and in Vercel to ensure the issue is resolved.

onlydustapp[bot] commented 2 months ago

Hey @Gift-Naomi! Thanks for showing interest. We've created an application for you to contribute to AFK - Aligned Fam Kernel. Go check it out on OnlyDust!

petersdt commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

A frontend developer with experience in using frontend technologies and frameworks like react, typescript, js. i believe with my experience i can contribute meaningfully to this project

How I plan on tackling this issue

with some experience using vercel i believe i will be able to debug and fix this error.

martinvibes commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @MSghais i'm a frontend dev and i have skills in react, typescript, javascript,next.js, tailwind, sass, boostrapetc. i would love to work on this if i'm giving the oppotunity

How I plan on tackling this issue

The error you're encountering is related to the build process of the afk_nostr_sdk package within your Vercel project. This could be due to configuration issues in tsconfig files or package.json dependencies.

Steps to Resolve:

Check tsconfig files: Ensure consistent configuration and compatible TypeScript versions. Verify package.json dependencies: Make sure dependency versions are compatible and peer dependencies are met. Review build scripts and third-party libraries: Ensure they are configured correctly and compatible. Check Vercel project settings: Verify build command and environment variables. Debugging:

Isolate the issue: Build the afk_nostr_sdk package independently. Examine logs: Look for error messages in Vercel build logs. Use a debugger: Step through the build process to identify the error.

ShantelPeters commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @MSghais can I please be assigned to this issue

How I plan on tackling this issue

To fix it i would do the following :

  1. Check tsconfig.son : Ensure it’s correctly configured in packages, apps, or the root directory.

  2. Verify `package.json: Ensure dependencies and scripts are correct in the SDK, website, or root package.json.

  3. Investigate Build Logs: Check the build logs on Vercel for specific errors or missing configurations.

4.Check Dependencies: Make sure all necessary packages are properly installed and compatible. ETA: 3 days max!!

onlydustapp[bot] commented 2 months ago

Hey @ShantelPeters! Thanks for showing interest. We've created an application for you to contribute to AFK - Aligned Fam Kernel. Go check it out on OnlyDust!

Supa-mega commented 2 months ago

hi @MSghais i am a frontend developer with vast knowledge in react , typescript,javascript, tailwind and would appreciate the Privilege to hop on this issue , after taking an exxtensive look at the problem i can say that i can think of multiple ways to come up wth the much needed solution.

onlydustapp[bot] commented 2 months ago

Hey @Supa-mega! Thanks for showing interest. We've created an application for you to contribute to AFK - Aligned Fam Kernel. Go check it out on OnlyDust!

Dprof-in-tech commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As an experienced Full Stack Blockchain Developer, I'm excited to contribute my expertise to Edition 7 of the OnlyDust hackathons. With a strong background in Next.js, TypeScript, JavaScript, React, Node.js, Solidity, and Cairo, I've honed my technical skills across the blockchain development landscape. My journey with OnlyDust began at Edition 2, and I've since made 28 contributions across 11 projects. This extensive experience on the platform has allowed me to develop a keen understanding of delivering high-quality solutions under tight deadlines. I bring a unique blend of technical prowess and user-centric design to every project, whether I'm crafting immersive 3D experiences or developing innovative smart contracts. My track record demonstrates my ability to adapt quickly and contribute effectively to diverse challenges. I'm confident in my capacity to tackle new problems and drive innovation in the blockchain space. As we embark on Edition 7, I'm eager to leverage my hackathon experience and technical skills to push the boundaries of what's possible in blockchain development. With a passion for creating cutting-edge solutions, I'm excited to collaborate with the OnlyDust community and contribute to the advancement of the blockchain ecosystem.

How I plan on tackling this issue

To solve this issue, i would:

Investigate Build Logs Review the Vercel build logs to identify specific error messages or warnings. Note any dependencies or modules that are failing to resolve or compile. Examine tsconfig Files Review tsconfig.json in the root, packages/afk_nostr_sdk, and apps/website directories. Check for inconsistencies in compiler options, particularly module resolution and target settings. Ensure that paths and references are correctly configured for the monorepo structure. Analyze package.json Files Review package.json files in the root, SDK, and website directories. Verify that all necessary dependencies are correctly listed and versioned. Check for any mismatches in peer dependencies or devDependencies. Verify Build Scripts Examine the build scripts in package.json files, especially for the website and SDK. Ensure that the build process correctly includes and builds the SDK for the website. Check Vercel Configuration Review the Vercel configuration file (vercel.json or similar) if present. Verify that the build command and output directory are correctly specified. Monorepo Setup If using a monorepo tool like Lerna or Yarn Workspaces, ensure it's correctly configured. Verify that Vercel is set up to handle the monorepo structure properly. Local Build Testing Attempt to replicate the build process locally to identify any environment-specific issues. Use the same Node.js version as specified in Vercel. Dependency Resolution Check for any circular dependencies between packages. Ensure that all internal package references are correctly resolved. TypeScript Version Compatibility Verify that the TypeScript version used is compatible across all packages and with Vercel's build environment. Implement Fixes Based on findings, implement necessary changes to resolve the build issues. This may include updating tsconfig.json, adjusting package.json, or modifying build scripts. Testing After implementing changes, test the build process locally. Push changes and test the Vercel deployment to verify the fix. Documentation Update Update any relevant documentation to reflect changes made to the build process or configuration.

My expected delivery time for this issue would be 1-2 days at most.

Benjtalkshow commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @MSghais I'm interested in fixing the build issue for the AFK Nostr SDK package (#42). This would be my first contribution to the AFK project, but I have 3 years of experience with Next.js, TypeScript, and monorepos. I’ve also worked on various OnlyDust projects, solving complex frontend issues in Opscan, the Blink extension, and more.

How I plan on tackling this issue

Understanding the Issue

The error log indicates several TypeScript errors across different hooks like useGetPublicGroup, useSearch, and useAllProfiles. The main issue is that the inferred types for these hooks cannot be named without referencing an internal path within the @tanstack/query-core package. This makes the types non-portable and can cause issues during the build, especially in environments like Vercel.

My Proposed Solution

Add Explicit Type Annotations:

Review tsconfig.json:

Investigate Package Configuration:

Optimize Vercel Build Settings:

Testing and Validation

Local Testing:

Vercel Deployment:

onlydustapp[bot] commented 2 months ago

Hi @addegbenga! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

addegbenga commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My background and how it can be leveraged: Frontend engineer with 5+ years experience in app development

How I plan on tackling this issue

How I plan on tackling this issue: From the logs, this error is related to the tanstack query. -Resolve this by deleting the pnpm-lock.yaml -Delete node_modules -pnpm install again.

ETA: less than a day should be straight foward

od-hunter commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Please can I be assigned this issue? I am a blockchain developer with vast experience in html, css, react, JavaScript, typescript, solidity and Cairo.

How I plan on tackling this issue

To solve this issue, I'd:

  1. Check tsconfig.json, to ensure correct configuration and path settings in packages, apps, and the root tsconfig.json.
  2. I'll review package.json, to verify dependencies, versions, and build scripts in packages/afk_nostr_sdk, apps/website, and root package.json.
  3. I'll examine Vercel build logs for specific error details and missing dependencies.
  4. I'll confirm that the Node.js version on Vercel matches the required version.
  5. Lastly, I'll clear build caches in Vercel and trigger a fresh build.

Please assign this issue to me, I'm ready to work.

ETA- 3 days max!

ScottyDavies commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a blockchain developer With background on JavaScript

How I plan on tackling this issue

I would approach this issue with following steps Understand the Issue: Thoroughly review the error message and any other relevant information provided to understand the specific problem that is occurring during the build phase. Identify the root cause of the issue, whether it's related to the TypeScript configuration, the package.json setup, or any other potential factors. Investigate the Project Structure: Examine the project's structure, including the relationship between the packages/afk_nostr_sdk and the apps/website. Understand how the SDK is being imported and used within the website application. Identify any potential dependencies or configuration settings that might be causing the issue. Inspect the TypeScript Configuration: Review the TypeScript configuration (tsconfig.json) files in the packages, apps, and root directories. Ensure that the configuration settings, such as the compilerOptions, include, and exclude sections, are properly set up and consistent across the project. Check for any inconsistencies or missing configurations that could be causing the build error. Examine the Package.json Files: Inspect the package.json files in the packages/afk_nostr_sdk, apps/website, and the root directory. Verify that the dependencies, devDependencies, and any other relevant settings are correctly defined and up-to-date. Check for any version mismatches or compatibility issues that could be causing the build problem. Test Locally: Set up the project locally and try to reproduce the build error. Perform a local build of the website and the afk_nostr_sdk package to identify any issues or inconsistencies in the development environment. Use debug tools and logging to gather more information about the build process and any underlying problems. Implement Fixes: Based on the findings from the investigation, implement the necessary fixes, such as: Updating the TypeScript configuration files to ensure consistent settings across the project. Modifying the package.json files to address any dependency or version issues. Exploring alternative solutions, such as using a different build tool or configuration, if the issue persists. Verify the Fix: Test the changes locally to ensure that the build process is successful. Deploy the updated website to Vercel and monitor the build process to confirm that the issue has been resolved. Document and Communicate: Document the steps taken to identify and resolve the issue, including any lessons learned or best practices that can be applied to future projects. Share the documentation with the project team and the wider development community to help others facing similar problems. By following this approach, I would be able to effectively investigate and resolve the build issue on Vercel for the packages/afk_nostr_sdk used in the apps/website. The key aspects of this approach include:

Understanding the problem and its root cause. Thoroughly investigating the project structure and configuration settings. Implementing targeted fixes based on the findings. Verifying the solution through local testing and deployment. Documenting the process and sharing the knowledge with the team.

MSghais commented 2 months ago

Gm everyone! Thank you for applying. This issue is postponed at the moment and not prioritized. We let you know if it's reopened asap

MSghais commented 2 months ago

Please don't forget to sent ETA (Estimated Time of Arrival) in your Only Dust application

kunalrosaili05 commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a blockchain developer, proficient in solidity, JavaScript/typescript and Rust, contributed in many open source projects

How I plan on tackling this issue

To resolve the Vercel build error, I'd start by checking tsconfig.json in packages, apps, and root for misconfigurations. Next, review package.json dependencies for compatibility issues in both the SDK and website. Finally, verify environment variables and build scripts.

0xJeanmi commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm full stack developer with experience in languages like PHP, JS, TS and Frameworks like React, Laravel. Also, I made several courses in Alchemy University to be prepared to challenges in web3 like this one. So I hope to move forward in this application.

How I plan on tackling this issue

Well, first I'll review the project structure, read the code in the TS files and versions of the package.json. But, I think just seeing the errors log that the bug is an annotation bug that is pretty common in TS. Hope to collaborate soon. Thanks.

Luluameh commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a strong background in full-stack web development, particularly in deploying web applications using tools like Vercel, Netlify, and Heroku. My experience includes working with TypeScript, Node.js, and JavaScript frameworks like React, which enables me to understand and troubleshoot issues during both the development and build phases.

I have hands-on experience resolving issues that arise during the build process in CI/CD pipelines, especially with projects involving monorepos and multiple tsconfig and package.json files. I’ve worked on optimizing TypeScript configurations and managing package dependencies in complex setups, ensuring that applications build smoothly across different environments.

Additionally, I am familiar with the deployment workflows on Vercel, including build caching, environment variables, and optimizing next.config.js or other build configurations. This experience allows me to quickly identify potential misconfigurations in Vercel’s environment and propose solutions that would ensure successful builds.

How I plan on tackling this issue

I would take the following steps to resolve the issue with the build phase of the website on Vercel:

Analyze the Build Logs I would first examine the build logs from Vercel. The logs typically provide specific details on where the build process is failing. I would focus on error messages related to module resolution, TypeScript compilation, or missing dependencies. This would give me a starting point for whether the issue lies in a configuration or dependency problem.

Check TypeScript Configurations The error might stem from misaligned tsconfig.json files in the packages/afk_nostr_sdk or apps/website directories. Since you're working with a monorepo structure, there might be conflicting tsconfig settings between the packages and the website.

Shared tsconfig: Ensure there is a base tsconfig.json file in the root directory that extends into the individual packages/afk_nostr_sdk and apps/website directories. Paths & Module Resolution: Verify that the compilerOptions.paths and baseUrl settings in tsconfig.json are correctly set up to point to shared packages. I would ensure the package paths in the SDK are being resolved correctly during the build. Include/Exclude Settings: I would check that the tsconfig.json files correctly include or exclude the necessary files for both the SDK and the website. Misconfigured include paths can prevent TypeScript from properly compiling during the build.

Inspect package.json Files I would inspect the package.json files in the root, packages/afk_nostr_sdk, and apps/website:

Dependencies: Check for missing or misaligned dependencies in the SDK and website. Sometimes, the SDK might require a specific version of a package that is not correctly installed in the Vercel environment. I would ensure all dependencies are listed under dependencies (not just devDependencies) if they are required at build time. Build Scripts: Ensure the build scripts in the package.json are correctly set up to run during the Vercel build process. If the SDK has a build step (e.g., tsc or webpack), ensure it is being executed before the website build starts. I would also check if Vercel is running the correct script (vercel-build or build) as per the documentation.

Monorepo Configuration in Vercel If the project uses a monorepo structure, I would ensure that Vercel is configured to handle it properly:

Ensure Correct Build Path: In Vercel’s project settings, I would ensure that the correct directory (apps/website) is specified as the build path. Custom Install Command: I would verify if Vercel’s default install command (yarn or npm) is sufficient or if a custom install command is required (e.g., yarn workspace @afk/nostr_sdk build && yarn build).

Environment Variables Sometimes, the issue may be due to missing or misconfigured environment variables. If the SDK or website relies on any environment variables, I would verify that they are properly set in Vercel’s environment configuration.

Dev-AndresGR commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’ve worked extensively with TypeScript and modern build tools in various web development projects. For example, I’ve handled similar issues in the past where I had to fix build errors by adjusting tsconfig and package.json files. In one project, I resolved a critical build issue by realigning TypeScript configuration and updating package dependencies, which resulted in a smooth deployment. I’m also familiar with Vercel’s build environment and its quirks, which helps me quickly diagnose and address build failures. This practical experience equips me to efficiently troubleshoot and fix the build issue with the AFK Nostr SDK package on Vercel.

How I plan on tackling this issue

To tackle the issue with the build process on Vercel, I would start by investigating the tsconfig settings in the packages, apps, and root directories. Misconfigurations here can often cause build failures, so ensuring that these settings are correctly aligned is crucial. Next, I’d review the package.json files of the SDK, the website, and the root to verify that all dependencies and scripts are properly configured. This includes checking for version mismatches or missing dependencies that might be causing issues.

If the problem persists after these checks, I’d explore the Vercel build logs for any specific error messages that could provide additional insights. Sometimes, the issue might be related to Vercel’s build environment or configuration settings, which would require adjusting the Vercel project settings or build commands.

Throughout this process, I would also make sure to keep the team updated on my progress and any findings to ensure transparency and collaboration. By systematically addressing each potential source of the issue, I aim to identify and fix the problem efficiently.

gregemax commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a strong foundation in TypeScript and front-end development, with experience in deploying applications on platforms like Vercel. My background includes working with monorepos and managing dependencies across multiple packages, which is crucial for resolving build issues in complex projects. I have successfully troubleshot similar build problems in the past, focusing on configuration files such as tsconfig.json and package.json to ensure compatibility and proper imports

How I plan on tackling this issue

My approach to resolving the build issues would include the following steps:

Review Error Logs

Check Configuration Files:

tsconfig.json Test Locally

Deepakraja03 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am very capable in SDK's since I have worked in those for sometime. I have created my own npm package and published it.

https://www.npmjs.com/package/dynamic-auth

This package is for easy authentication function and mongodb connect. Working in web3 has made me face many problems with deployment in VERCEL. I have cleared it every time with a few methods in common for web3. So I will be your best candidate for this problem.

How I plan on tackling this issue

I will check your package.json and tsconfig initially. Then check for deployment issues and analyse the logs for the error. Then use trail and error methods to pin point the error with the SDK. Sometimes it will be due to a package not supported in vercel so find a replacement package for it and use it.

michojekunle commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a frontend developer and smart contract writer very new to the web3 love and enthusiastic to contribute to open source web3 projects as a frontend developer and smart contract wrote it'll be easier for me to navigate and figure out the problems causing the build failure as I've had similar experience deploying frontend applications on vercel

How I plan on tackling this issue

First, I'd have to check through the build error this will gibe me pointers as to where to look out for errors while going through the codebase, then go through the codebase to understand the codebase this will help me to know what other parts might be affecting and what other parts might be affected in the future when this current bug is fixed

Thank you for considering my application, I hope I get selected and contribute to this project .

vic-Gray commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience working with modern front-end technologies, including HTML, CSS, and React.js. My expertise in React.js allows me to create dynamic, efficient, and user-friendly interfaces that provide a seamless user experience. I have built and optimized interactive web applications, ensuring they are responsive and accessible across different devices and platforms.

I am proficient in integrating front-end components with APIs and back-end services, creating cohesive full-stack solutions. My ability to work with version control systems like Git ensures smooth collaboration in a team environment. I am also familiar with front-end build tools like Webpack and task runners that help optimize performance.

In addition to this, my understanding of user experience (UX) design principles enables me to create visually appealing and intuitive layouts that enhance user engagement.

How I plan on tackling this issue

Investigate Build Logs: First, I would examine the build logs provided by Vercel to identify any error messages or warnings related to package resolution or TypeScript compilation.

Verify tsconfig.json: I'd check all tsconfig.json files (root, packages, and apps) to ensure paths and module resolution are correct. If using project references, I’d confirm that they are properly configured.

Review package.json: I'd ensure that the SDK and website are correctly importing and compiling TypeScript files by reviewing their package.json and adjusting build scripts and entry points if necessary.

Run Locally: I would try building the project locally using Vercel CLI or Docker to replicate the build environment and catch errors before deploying.

Test Dependencies: I’d ensure that all dependencies and peer dependencies between the SDK and website are in sync and up to date.

bertux commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I deployed many TypeScript dApps on Vercel and I fixed many build issues there so I am curious to leverage my skills on this problem.

How I plan on tackling this issue

Apply first locally what is recommended in the error message. When it works locally I will try on my Vercel account.