Handling Null Values Correctly

Introduction

In this project, you will learn how to fix a bug in the vue-router-2.7.0 library related to handling null values in the query parameter.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to locate and understand the isObjectEqual function in the vue-router-2.7.0/src/util/route.js file.
• How to fix the isObjectEqual function to correctly handle null values.
• How to rebuild and release the vue-router-2.7.0 project with the fixed function.
• How to test the fix by checking the browser console for the absence of the previous error messages.

🏆 Achievements

After completing this project, you will be able to:

• Identify and fix a bug in a third-party library.
• Work with the vue-router-2.7.0 library and understand its internal functions.
• Rebuild and release a project after making code changes.
• Test the fix by checking the browser console for error messages.

Skills Graph

Fix the isObjectEqual Function

To get started, look at the directory structure of the files on the left as follows:

├── vue-router-2.7.0
├── vue.min.js
└── index.html

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually, click "test" and open the Console option in the browser console, you will see two error messages, they are TypeError: Cannot convert undefined or null to object and Uncaught TypeError: Cannot convert undefined or null to object.

In this step, you will learn how to fix the isObjectEqual function in the vue-router-2.7.0/src/util/route.js file to handle null values correctly.

1. Open the vue-router-2.7.0/src/util/route.js file.
2. Locate the isObjectEqual function:

function isObjectEqual(a = {}, b = {}): boolean {
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length !== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // check nested equality
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

3. Update the function to handle null values correctly:

function isObjectEqual(a = {}, b = {}): boolean {
  if (!a || !b) return a === b;
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length !== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // check nested equality
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

The changes are:

• Added a condition to check if a or b is null or undefined. If either is null or undefined, the function will return a === b.
• This ensures that the function correctly handles null values in the query parameter.

Rebuild and Test the Project

In this step, you will rebuild and test the vue-router-2.7.0 project after fixing the isObjectEqual function.

1. In the terminal, navigate to the vue-router-2.7.0 directory.
2. Run the command npm install to install the dependencies. This process might take a while, please be patient. (If it gets stuck for a long time, please press Ctrl+C to terminate the process and then run this command again.)
3. After the installation is complete, run the command npm run build to rebuild and release the project. This will generate the updated vue-router-2.7.0 library with the fixed isObjectEqual function.
4. Go back to the web page and refresh the page.
5. Click on "test" and open the console in the Console tab to check, you will not see the above error message anymore.

If the error messages are gone, the fix is successful. You have completed the project!

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.