feat: migrate from Yarn to pnpm #5471
Conversation
|
@DDDDD12138 is attempting to deploy a commit to the NextChat Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request introduces a comprehensive transition from Yarn to PNPM as the package manager across various project files, including configuration, scripts, and documentation. Key updates include modifications to installation commands, the introduction of a new Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (4)
.github/workflows/app.yml (1)
74-74: LGTM, but consider updating the comment.The change to use
pnpm installfor installing frontend dependencies is consistent with the PR objective. However, consider updating the comment to remove the mention ofnpmsince the PR is specifically about migrating from Yarn to PNPM.-run: pnpm install # change this to npm or pnpm depending on which one you use +run: pnpm install # using pnpm for installing dependenciesdocs/faq-ja.md (1)
79-79: LGTM!The build command update from
yarn buildtopnpm buildaligns with the migration objective.Suggestion: Improve conciseness.
Consider rephrasing 「
DISABLE_CHUNK=1 pnpm buildを使用することができます。」 to 「DISABLE_CHUNK=1 pnpm buildを使用できます。」 for better conciseness by removing the redundant 「こと」.Tools
LanguageTool
[uncategorized] ~79-~79: 「ことができる」という表現は冗長な可能性があります。
Context: ...を追加して再デプロイします。 セルフデプロイのプロジェクトでは、ビルド時にDISABLE_CHUNK=1 pnpm build` を使用することができます。 Docker ユーザーの場合、ビルドはパッケージング時に...(DOUSI_KOTOGADEKIRU)
README_JA.md (1)
240-241: Consider providing links to the official installation guides.Instead of referring users to ChatGPT for Node.js and pnpm installation steps, it would be better to provide direct links to their respective official installation guides. This ensures a consistent and reliable reference for all users.
docs/faq-ko.md (1)
120-120: Significant change: Migrating the build command from Yarn to pnpm.This change in the build command for self-compiled and deployed projects indicates a shift from Yarn to pnpm as the package manager.
Please ensure you:
- Communicate this change to the team and update any documentation.
- Verify all developers have pnpm installed.
- Update any existing workflows, CI/CD pipelines, or scripts that rely on the
yarn buildcommand.- Thoroughly test the migration to pnpm to rule out any potential dependency resolution issues or build failures.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlyarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (19)
- .github/workflows/app.yml (2 hunks)
- .gitpod.yml (1 hunks)
- .npmrc (1 hunks)
- Dockerfile (2 hunks)
- README.md (1 hunks)
- README_CN.md (1 hunks)
- README_JA.md (1 hunks)
- app/components/artifacts.tsx (1 hunks)
- docs/cloudflare-pages-cn.md (1 hunks)
- docs/cloudflare-pages-en.md (1 hunks)
- docs/cloudflare-pages-es.md (1 hunks)
- docs/cloudflare-pages-ja.md (1 hunks)
- docs/cloudflare-pages-ko.md (1 hunks)
- docs/faq-cn.md (1 hunks)
- docs/faq-en.md (1 hunks)
- docs/faq-ja.md (1 hunks)
- docs/faq-ko.md (1 hunks)
- package.json (4 hunks)
- scripts/setup.sh (1 hunks)
Files skipped from review due to trivial changes (1)
- .npmrc
Additional context used
LanguageTool
docs/faq-en.md
[style] ~79-~79: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...1 pnpm build` during the build process. For Docker users, as the build is already c...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
docs/faq-ja.md
[uncategorized] ~79-~79: 「ことができる」という表現は冗長な可能性があります。
Context: ...を追加して再デプロイします。 セルフデプロイのプロジェクトでは、ビルド時にDISABLE_CHUNK=1 pnpm build` を使用することができます。 Docker ユーザーの場合、ビルドはパッケージング時に...(DOUSI_KOTOGADEKIRU)
Shellcheck
scripts/setup.sh
[warning] 58-58: Use 'cd ... || exit' or 'cd ... || return' in case cd fails.
(SC2164)
Additional comments not posted (32)
.gitpod.yml (2)
8-8: LGTM!The migration from Yarn to pnpm in the
initcommand aligns with the PR objectives to resolve build errors and improve performance. Theinstallanddevcommands are equivalent to the previous Yarn commands, ensuring a smooth transition.
9-9: LGTM!The migration from Yarn to pnpm in the
commandaligns with the PR objectives to resolve build errors and improve performance. Thedevcommand is equivalent to the previous Yarn command, ensuring a smooth transition.docs/cloudflare-pages-ko.md (1)
24-24: Documentation update reflects the pnpm migration, but verify corresponding changes in the codebase.The change from
yarn_versiontoPNPM_VERSIONaligns with the PR objective of migrating from Yarn to pnpm for package management. However, please ensure that the necessary changes have been made in the codebase and configuration files (e.g.,package.json,.npmrc, etc.) to fully support the pnpm migration.Verify the pnpm migration by checking the following in the linked PR:
package.jsonhas been updated to remove Yarn-specific fields and add pnpm-specific ones.- Yarn lock file (
yarn.lock) has been removed and replaced with pnpm lock file (pnpm-lock.yaml)..npmrcfile has been added or updated to configure pnpm-specific settings.- CI/CD workflows have been updated to use pnpm instead of Yarn.
- README and other relevant documentation have been updated with pnpm instructions.
If any of these are missing, please work with the PR author to address them before merging.
docs/cloudflare-pages-cn.md (1)
25-25: Approve the migration from Yarn to PNPM.The change from
YARN_VERSIONtoPNPM_VERSIONaligns with the PR objective of migrating to PNPM for package management. PNPM offers several benefits over Yarn, including faster installation times and more efficient handling of node modules.Ensure that the following points are addressed:
- Update any existing Yarn-related configuration files and scripts to work with PNPM.
- Verify that the
.npmrcfile is properly configured to maintain consistent registry settings across development and Docker environments.- Confirm that the specified PNPM version
9.10.0is compatible with the project's dependencies and requirements.docs/cloudflare-pages-ja.md (1)
23-23: LGTM! Using a specific PNPM version ensures consistency.The addition of the
PNPM_VERSIONenvironment variable aligns with the migration from Yarn to PNPM. By specifying version 9.10.0, you ensure that the same PNPM version is used across different environments, promoting consistency and reproducibility in the build process.Dockerfile (5)
6-6: LGTM!Installing pnpm globally is a good practice to ensure it's available for use in subsequent commands. Using the
@latest-9version specifier helps maintain consistency across builds.
12-12: LGTM!Copying the
.npmrcfile andpnpm-lock.yamlaligns with the migration to pnpm and ensures proper configuration.
14-14: LGTM!Using
pnpm installaligns with the migration to pnpm and ensures dependencies are installed correctly.
26-26: LGTM!Using
pnpm buildaligns with the migration to pnpm and ensures the project is built correctly.
1-1: Verify compatibility with Node.js 20.Upgrading to Node.js 20 is a significant change. Please ensure that the existing codebase and all dependencies are compatible with this new version to avoid any potential breaking changes or issues.
Run the following script to check if the project's
package.jsonspecifies a compatible Node.js version range:Verification successful
Upgrade to Node.js 20 is likely compatible, but update GitHub Actions workflow.
The codebase shows no signs of incompatibility with Node.js 20. The project uses recent versions of Next.js and React, which support Node.js 20. However, the GitHub Actions workflow for building the Tauri app (app.yml) still specifies Node.js 18. Consider updating this workflow to use Node.js 20 for consistency with the Dockerfile change.
- Update
.github/workflows/app.yml:- name: setup node uses: actions/setup-node@v3 with: node-version: 20Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if the project's Node.js version is compatible with Node.js 20. # Test: Check the engines.node field in package.json. Expect: >=20.0.0 or a range that includes 20.x. jq '.engines.node' package.jsonLength of output: 36
Script:
#!/bin/bash # Description: Gather more information about Node.js version compatibility # Check the contents of package.json echo "Contents of package.json:" cat package.json # Check for .nvmrc or .node-version files echo -e "\nChecking for .nvmrc or .node-version files:" if [ -f .nvmrc ]; then echo "Contents of .nvmrc:" cat .nvmrc elif [ -f .node-version ]; then echo "Contents of .node-version:" cat .node-version else echo "No .nvmrc or .node-version file found." fi # Search for Node.js version-specific syntax or APIs echo -e "\nSearching for potential Node.js version-specific code:" rg -i '(node:)|(--experimental)|(import\s+assert)|(import\.meta)|(??=)|(&&=)|(\|\|=)' --type jsLength of output: 3449
Script:
#!/bin/bash # Description: Further investigation of Node.js compatibility # Search for potential Node.js version-specific code (modified command) echo "Searching for potential Node.js version-specific code:" rg -i 'node:|--experimental|import\s+assert|import\.meta' --type js # Search for comments mentioning Node.js version echo -e "\nSearching for comments mentioning Node.js version:" rg -i 'node(\s+version|\s+v\d+|\s+\d+)' --type js --type ts # Check for CI configuration files echo -e "\nChecking for CI configuration files:" for file in .github/workflows/*.yml .gitlab-ci.yml .circleci/config.yml; do if [ -f "$file" ]; then echo "Contents of $file:" cat "$file" echo -e "\n" fi doneLength of output: 12844
scripts/setup.sh (4)
29-29: LGTM!The change from checking for
yarntopnpmaligns with the PR objective of migrating topnpmfor dependency management.
34-34: LGTM!The changes to install
pnpminstead ofyarnfor various Linux distributions align with the PR objective of migrating topnpmfor dependency management.Also applies to: 37-37, 40-40, 43-43
51-51: LGTM!The change to install
pnpminstead ofyarnfor macOS aligns with the PR objective of migrating topnpmfor dependency management.
59-59: LGTM!The changes to use
pnpminstead ofyarnfor installing dependencies and building/running the project align with the PR objective of migrating topnpmfor dependency management.Also applies to: 67-68
package.json (9)
7-7: LGTM!The script has been correctly updated to use
pnpminstead ofyarn, which aligns with the PR objective.
8-8: LGTM!The script has been correctly updated to use
pnpminstead ofyarn, which aligns with the PR objective.
9-9: LGTM!The script has been correctly updated to use
pnpminstead ofyarn, which aligns with the PR objective.
12-12: LGTM!The script has been correctly updated to use
pnpminstead ofyarn, which aligns with the PR objective.
13-13: LGTM!The script has been correctly updated to use
pnpminstead ofyarn, which aligns with the PR objective.
14-14: LGTM!The script has been correctly updated to use
pnpminstead ofyarn, which aligns with the PR objective.
15-15: LGTM!The script has been correctly updated to use
pnpminstead ofyarn, which aligns with the PR objective.
18-18: LGTM!The script has been correctly updated to use
pnpminstead ofyarn, which aligns with the PR objective.
81-81: LGTM!The
packageManagerfield has been correctly updated to specify[email protected], which aligns with the PR objective and matches the version mentioned in the PR summary..github/workflows/app.yml (1)
60-60: LGTM!The change to use PNPM for caching dependencies is consistent with the PR objective and can improve the workflow performance.
docs/faq-cn.md (1)
120-120: Approve the change from Yarn to pnpm.The modification of the build command for self-compiled projects to use pnpm instead of Yarn aligns with the PR objective of migrating to a more modern and efficient package manager.
Please ensure that the migration to pnpm is thoroughly tested across different environments and configurations to verify that it does not introduce any new issues or incompatibilities.
README_CN.md (2)
261-262: LGTM!The changes to switch the package manager from
yarntopnpmlook good. The updated instructions for local development setup are clear.
262-263: Looks good!The updated command for local deployment using
pnpmis correct. The additional note about usingpm2for process management is a helpful tip for users.app/components/artifacts.tsx (1)
206-206: LGTM!The change to explicitly type the
idparameter asstringusinguseParams<{ id: string }>()is a good improvement. It enhances type safety and code clarity by ensuring that theidvariable has a defined type within theArtifactscomponent. This change reduces the risk of runtime errors related to type mismatches and aligns with TypeScript best practices.README_JA.md (2)
241-241: LGTM!The command has been correctly updated to use pnpm for installing dependencies and running the development server.
242-242: Looks good!The local deployment command has been correctly updated to use pnpm. The note about pm2 usage for process management is still applicable.
docs/faq-en.md (1)
79-79: LGTM!The change in the build command from
yarn buildtopnpm buildaligns with the PR objective of migrating from Yarn to pnpm. The context around the change remains the same, discussing the implications of disabling chunking during the build process.Tools
LanguageTool
[style] ~79-~79: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...1 pnpm build` during the build process. For Docker users, as the build is already c...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
README.md (1)
384-388: LGTM!The changes to switch the package manager from
yarntopnpmlook good. As long aspnpmis installed and the lock file is updated, the local development workflow should remain the same.
| @@ -22,7 +22,7 @@ Fork this project on GitHub, then log in to dash.cloudflare.com and go to Pages. | |||
| - `NODE_VERSION=20.1` | |||
| - `NEXT_TELEMETRY_DISABLE=1` | |||
| - `OPENAI_API_KEY=your_own_API_key` | |||
| - `YARN_VERSION=1.22.19` | |||
| - `PNPM_VERSION=9.10.0` | |||
There was a problem hiding this comment.
Tip
Codebase Verification
PNPM migration is incomplete: Build environment setup required
The migration from Yarn to PNPM is partially complete, but the build environment is not yet configured to use PNPM. Here are the key findings and recommendations:
- Project files (package.json, pnpm-lock.yaml) have been correctly updated for PNPM.
- README.md includes instructions for PNPM installation and usage.
- PNPM is not installed or not in the PATH of the current build environment.
To complete the migration:
-
Update the CI/CD configuration to install PNPM globally or as part of the build process. Add a step like:
- name: Install PNPM run: npm install -g [email protected]
-
Ensure the PNPM installation directory is added to the PATH in the CI/CD environment.
-
Update any build scripts or commands in the CI/CD configuration to use PNPM instead of Yarn.
-
After making these changes, verify that the build process can successfully run
pnpm installand other PNPM commands. -
Consider adding a PNPM version check in the CI/CD process to ensure the correct version is being used:
- name: Check PNPM version run: pnpm --version
Once these steps are completed, the migration to PNPM should be fully functional in both the project files and the build environment.
Analysis chain
Looks good! The environment variable update aligns with the migration to PNPM.
The change from YARN_VERSION to PNPM_VERSION is consistent with the PR objectives of migrating from Yarn to PNPM to resolve build errors. Updating the deployment guide ensures the correct package manager version is used during the Cloudflare Pages build process.
A few additional suggestions:
-
Ensure that all other relevant configuration files, scripts, and documentation are updated to reflect the migration to PNPM. This may include updating the
package.jsonfile, modifying any build or deployment scripts, and revising any README or contributing guidelines. -
Thoroughly test the migration to PNPM to confirm that it resolves the build errors encountered with Yarn and doesn't introduce any new issues. Verify that the project can be built, deployed, and run successfully using PNPM.
-
Consider communicating the migration to the project's contributors and users, providing guidance on updating their local development environments to use PNPM instead of Yarn.
To verify the migration, you can run the following script:
This script performs the following checks:
- Verifies that the
package.jsonfile has been updated to use PNPM. - Ensures that the lockfile has been migrated from
yarn.locktopnpm-lock.yaml. - Attempts to install dependencies, build the project, and start it using PNPM to confirm that the migration is successful.
Please run this script and address any issues it highlights to ensure a smooth migration to PNPM.
To gather more information about the execution environment and the status of PNPM installation, let's run the following script:
This script will help us understand the current state of PNPM in the execution environment and provide insights into why the pnpm command was not found in the previous script.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the migration from Yarn to PNPM.
# Test 1: Check if the project's package.json file has been updated to use PNPM.
if grep -q '"packageManager": "[email protected]"' package.json; then
echo "package.json has been updated to use PNPM."
else
echo "package.json has not been updated to use PNPM. Please update it."
fi
# Test 2: Check if the lockfile has been changed from yarn.lock to pnpm-lock.yaml.
if [ -f "pnpm-lock.yaml" ] && [ ! -f "yarn.lock" ]; then
echo "Lockfile has been migrated from yarn.lock to pnpm-lock.yaml."
else
echo "Lockfile migration incomplete. Ensure yarn.lock is removed and pnpm-lock.yaml exists."
fi
# Test 3: Verify that the project can be built and run using PNPM.
if pnpm install && pnpm build && pnpm start; then
echo "Project can be successfully built and run using PNPM."
else
echo "Issues encountered while building or running the project with PNPM. Please investigate."
fi
Length of output: 610
Script:
#!/bin/bash
# Check if PNPM is installed
if command -v pnpm &> /dev/null; then
echo "PNPM is installed. Version:"
pnpm --version
else
echo "PNPM is not installed or not in PATH."
fi
# Check PATH
echo "Current PATH:"
echo $PATH
# Check if there's a global PNPM installation
if [ -d "$HOME/.pnpm-global" ]; then
echo "Global PNPM installation found in $HOME/.pnpm-global"
else
echo "No global PNPM installation found in $HOME/.pnpm-global"
fi
# Check if there's a local PNPM installation in node_modules
if [ -d "./node_modules/.bin/pnpm" ]; then
echo "Local PNPM installation found in ./node_modules/.bin/pnpm"
else
echo "No local PNPM installation found in ./node_modules/.bin/pnpm"
fi
# Check if there are any installation instructions for PNPM in README or other docs
if grep -q "pnpm" README.md; then
echo "PNPM mentioned in README.md:"
grep -n "pnpm" README.md
else
echo "No mention of PNPM found in README.md"
fi
Length of output: 803
| @@ -22,7 +22,7 @@ Bifurca el proyecto en Github, luego inicia sesión en dash.cloudflare.com y ve | |||
| * `NODE_VERSION=20.1` | |||
| * `NEXT_TELEMETRY_DISABLE=1` | |||
| * `OPENAI_API_KEY=你自己的API Key` | |||
| * `YARN_VERSION=1.22.19` | |||
| * `PNPM_VERSION=9.10.0` | |||
There was a problem hiding this comment.
Tip
Codebase Verification
Update src-tauri/tauri.conf.json to use PNPM instead of Yarn
The migration from Yarn to PNPM has been largely successful. However, there's one remaining issue that needs to be addressed:
- In
src-tauri/tauri.conf.json, update the following commands to use PNPM instead of Yarn:- "beforeBuildCommand": "yarn export" → "pnpm export"
- "beforeDevCommand": "yarn export:dev" → "pnpm export:dev"
Additionally, consider updating the example prompts in public/prompts.json to mention PNPM instead of Yarn for consistency, although this is a low-priority task.
Great job on the migration overall! The package.json has been correctly updated, the yarn.lock file has been removed, and the pnpm-lock.yaml file has been added. The .gitpod.yml file has also been updated to use PNPM.
Analysis chain
Verify the impact of migrating from Yarn to PNPM.
The change from YARN_VERSION to PNPM_VERSION is consistent with the migration to PNPM as the package manager. However, please ensure that:
- The project's build process and dependency management have been updated to work with PNPM.
- Developers are aware of the change and have PNPM installed locally.
- Yarn-related configuration files (e.g.,
yarn.lock) have been replaced with their PNPM equivalents (e.g.,pnpm-lock.yaml). - Continuous integration (CI) pipelines and deployment processes have been updated to use PNPM instead of Yarn.
Run the following script to verify the migration:
To gather more information about the remaining concerns, I'll run additional scripts to check for other CI/CD configurations and Yarn-related files.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the migration from Yarn to PNPM.
# Test 1: Check if the project's package.json has been updated to use PNPM.
rg --type json $'"packageManager": "[email protected]"' package.json
# Test 2: Check if the Yarn lock file has been removed.
if [ -f "yarn.lock" ]; then
echo "Error: yarn.lock file still exists. Please remove it."
exit 1
fi
# Test 3: Check if the PNPM lock file has been added.
if [ ! -f "pnpm-lock.yaml" ]; then
echo "Error: pnpm-lock.yaml file is missing. Please add it."
exit 1
fi
# Test 4: Check if the CI/CD configuration files have been updated to use PNPM.
rg --type yaml $'pnpm install' $(fd --type f --regex '(\.github/workflows/.*\.ya?ml|\.circleci/config\.yml|Jenkinsfile)')
Length of output: 322
Script:
#!/bin/bash
# Description: Check for additional CI/CD configurations and Yarn-related files
# Check for other CI/CD configuration files
echo "Checking for CI/CD configuration files:"
fd -t f -e yml -e yaml -e json -e toml -e ini -p "ci|circle|travis|jenkins|gitlab|azure-pipelines|bitbucket-pipelines"
# Check for any remaining Yarn-related files or configurations
echo -e "\nChecking for Yarn-related files:"
fd -t f -e js -e json -e yml -e yaml | xargs rg -i "yarn"
# Check for any scripts in package.json that might still use Yarn
echo -e "\nChecking package.json for Yarn-related scripts:"
jq '.scripts | to_entries[] | select(.value | contains("yarn"))' package.json
Length of output: 1742
| else | ||
| echo "Unsupported Linux distribution" | ||
| exit 1 | ||
| fi | ||
| ;; | ||
| Darwin) | ||
| /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" | ||
| brew install node git yarn | ||
| brew install node git pnpm | ||
| ;; | ||
| esac | ||
| fi | ||
|
|
||
| # Clone the repository and install dependencies | ||
| git clone https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web | ||
| cd ChatGPT-Next-Web |
There was a problem hiding this comment.
Handle potential failure of the cd command.
The static analysis tool flagged a potential issue with the cd command. If the cd command fails, the script will continue executing, which may lead to unexpected behavior.
Apply this diff to handle the potential failure of the cd command:
-cd ChatGPT-Next-Web
+cd ChatGPT-Next-Web || exit 1Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| cd ChatGPT-Next-Web | |
| cd ChatGPT-Next-Web || exit 1 |
Tools
Shellcheck
[warning] 58-58: Use 'cd ... || exit' or 'cd ... || return' in case cd fails.
(SC2164)
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
fix: #5412
Yarn records the source address of each dependency in the
yarn.lockfile. Since the Yarn registry is essentially a CNAME pointing to the npm registry, when the npm registry is inaccessible, Yarn cannot switch to other sources, which directly leads to installation failures.This PR aims to address the issue by using a more modern package management tool.
pnpmcan quickly switch between different sources and offers powerful features.Install
Dev
Docker Build
📝 补充信息 | Additional Information
Using a
.npmrcfile ensures that both development and Docker environments use the same registry, maintaining consistent behavior.Summary by CodeRabbit
New Features
pnpmas the package manager, enhancing dependency management efficiency..npmrcfile for optimized npm operations for users in China.Documentation
yarntopnpmfor local development instructions.pnpminstead ofyarn.Bug Fixes
Artifactscomponent by explicitly typing theidparameter.Chores
pnpmfor dependency management.yarnwithpnpm.