ERA TECH - The ERA of Technology

One common task when working with dates in JavaScript is adding a certain number of weeks to a given date. In this post, we’ll explore a couple of ways to do this in a quick and efficient manner. Method 1: Reusable Function One way to add weeks to a date is to create a reusable function that takes the number of weeks and a Date object as arguments. If no Date object is provided, the function uses the current date by default. Here’s an example of how this function might look: function addWeeks(numOfWeeks, date = new Date()) { date.setDate(date.getDate() + numOfWeeks * 7); return date;} To use this function, simply call it with the number of weeks you want to add and an optional date object. For example: // Add 2 weeks to current dateconsole.log(addWeeks(2));// Add 2 weeks to specified dateconsole.log(addWeeks(2, new Date('2022-02-14'))); The getDate() method returns the day of the month for the given date as an integer between 1 and 31 . The setDate() method sets the day of...

Understanding the error “Property does not exist on type ‘never'” c This error can be frustrating and confusing, but it is relatively easy to solve once we understand the cause. Causes of the error “Property does not exist on type ‘never'” One common cause of the error is when we try to access a property on a null or undefined value. For example, consider the following code: type Employee = { salary: number;};let employee: Employee | null = null;function setEmployee() { employee = { salary: 100 };}setEmployee();// employee.salary is equal to 100 here// but TypeScript doesn't knowif (employee == null) { console.log('employee is nullish');} else { // Error: Property 'salary' does not // exist on type 'never'.ts(2339) console.log(employee.salary);} Another cause of the error is declaring an empty array without assigning a type to it. const obj = { years: [],};// never[]console.log(obj.years); Solutions Property does not exist on type ‘never’: To ...

In this article, we will explore different methods to check if a string in JavaScript contains spaces. Using the RegExp.test() Method One way to check if a string contains spaces is to use the test() method of the RegExp object. The test() method will return true if the string contains at least one whitespace character and false otherwise. function containsWhitespace(str) { return /\s/.test(str);}console.log(containsWhitespace(' ')); // 👉️ trueconsole.log(containsWhitespace('free to reads com')); // 👉️ trueconsole.log(containsWhitespace('')); // 👉️ falseconsole.log(containsWhitespace('test')); // 👉️ false The regular expression /\s/ checks for all types of whitespace characters, including spaces, tabs, and newline characters. The \s character is used to match spaces, tabs, and newlines. function containsWhitespace(str) { return /\s/.test(str);}console.log(containsWhitespace('hello\tworld')); // 👉️ trueconsole.log(containsWhitespace('...

The “ Component cannot be used as a JSX component ” error is a common issue that developers encounter when working with React. In this article, we’ll explore the causes of this error and provide solutions for resolving it. Causes of the error “Component cannot be used as a JSX component in React” There are several reasons why this error may occur: Returning an array of JSX elements instead of a single element. Returning any value other than a JSX element or null from a component. Forgetting to return a value from a component. Having outdated version of React typings. Using an undefined component as a JSX component. Using a non-JSX compatible component such as ‘intl-tel-input’ or ‘victoryaxis’ in React. Solution 1: Wrapping the Array with a React Fragment or Div Element One of the most common causes of the “ Component cannot be used as a JSX component ” error is returning an array of JSX elements instead of a single element. To solve this, we can wrap the array using a React fragment or...

Are you encountering the error “‘vue-cli-service’ is not recognized as an internal or external command, operable program or batch file”? This error can be frustrating, but don’t worry, there are several solutions you can try to fix it. In this blog post, we’ll go through the steps to troubleshoot and resolve the error. Solution 1: Install the @vue/cli-service Package Globally The first solution is to install the @vue/cli-service package globally by running the following command in your terminal: npm install -g @vue/cli-service After installing the package, you should clear your npm cache by running the following command: npm cache clean --force Next, navigate to your project’s root directory (where your package.json file is located) and run the following command: npm install Finally, run the following command to serve your project: npm run serve Solution 2: Delete node_modules and Reinstall Dependencies If the error persists after trying solution 1, try deleting your node_modules and p...

“Functions are not valid as a React child” error is a common issue that developers encounter when working with React. This error occurs for two main reasons: returning a function reference and not a component from render, and using React Router routes incorrectly. Reason 1: Returning a function instead of JSX One of the main causes of this error is when developers return a function reference and not a component from render. Here’s a simple example of how this error occurs: App.js/** * Functions are not valid as a React child. */const App = () => { const getButton = () => { return <button>Click</button>; }; // returning function and not JSX element from render return <div>{getButton}</div>;};export default App; Solution 1: Call the function To solve this error, you can call the function instead of returning the function reference. App.jsconst App = () => { const getButton = () => { return <button>Click</button>; }; // now retu...

The error “Object is possibly ‘null'” occurs when we try to access a property on an object that may have a value of null. This error can occur when working with TypeScript, especially when trying to access properties of an object that could be null or undefined. In this blog post, we will go over several solutions to this error, including using the optional chaining operator, type guards, non-null assertions, and the logical AND operator. Using the optional chaining operator One solution to the “Object is possibly ‘null'” error is to use the optional chaining operator. The optional chaining operator (?.) is a way to access a nested property of an object, but instead of causing an error if the reference is nullish (null or undefined), it short-circuits returning undefined. Here is an example of how the error occurs: type Employee = { address: { country: string; city: string; } | null;};const emp: Employee = { address: null,};console.log(emp.address.country); The address...

When working with TypeScript, you may encounter the error “Parameter ‘X’ implicitly has an ‘any’ type” when a function’s parameter has an implicit type of any. This error can be caused by a lack of explicit type annotations on function parameters, arrow functions, callbacks, etc. In this blog post, we’ll explore several ways to fix this error and make your TypeScript code more robust. Understanding the Implicit “any” Type The implicit “any” type in TypeScript occurs when the type of a value can’t be inferred and no type annotations are present. When this happens, TypeScript assigns the type any to that value. This can lead to unexpected runtime errors if the value is used in a way that doesn’t match its inferred type. Explicitly Setting the Type to “any” One way to fix the “Parameter ‘X’ implicitly has an ‘any’ type” error is to explicitly set the type of the parameter to any. Here’s an example of how to do this: function sum(a: any, b: any) { return a + b;}console.log(sum(10, 50)); /...

When working with TypeScript, you may encounter the error “Cannot invoke an object which is possibly ‘undefined'” when trying to invoke a function property that could be undefined, marked as optional. The error occurs because TypeScript wants to ensure that the property could not possibly have an undefined value, as trying to invoke undefined would cause a runtime error. In this article, we will explore several solutions to this error, including using the optional chaining operator (?.) and logical AND (&&) operator. Understanding the Error To better understand the error, let’s take a look at an example: type Employee = { doWork?: () => void;};const employee: Employee = {};// Error: Cannot invoke an object which// is possibly 'undefined'.ts(2722)employee.doWork(); In this example, we have defined an Employee type with an optional doWork function property. We then create an employee object, but do not assign the doWork property a value. When we try to invoke the ...

There are a few different ways to convert a string in the format dd/mm/yyyy to a Date object in JavaScript. Here are a few options to consider. Approach 1: Split the String and Use the Date Constructor One approach is to split the string into its component parts (day, month, and year) and use those parts to construct a Date object manually. Here’s an example of how to do this: const str = '22/04/2022';const [day, month, year] = str.split('/');const date = new Date(+year, month - 1, +day);console.log(date); // Fri Apr 22 2022 This approach gives you more control over the process, but it requires more code and may be more prone to errors (e.g. if the string is in the wrong format or if the date is invalid). [Fixed]: You must Specify a Region Error in AWS CLI Approach 2: Split the String and Use the Date.parse Method Another option is to split the string into its component parts and use the Date.parse method to convert them to a timestamp. Here’s an example of how to do...

Sometimes you may need to format a date as a specific string, such as MM/DD/YYYY , in JavaScript. Here’s how you can do it: Using getMonth(), getDate(), and getFullYear() To get the month, day, and year of a date, you can use the getMonth() , getDate() , and getFullYear() methods, respectively. These methods return an integer representing the respective value for the given date. For example: const date = new Date();const month = date.getMonth(); // returns an integer between 0 (January) and 11 (December)const day = date.getDate(); // returns an integer between 1 and 31 representing the day of the monthconst year = date.getFullYear(); // returns a four-digit number representing the year Note that the getMonth() method is zero-based, so January is represented as 0 and December is represented as 11. Adding Leading Zeros to Single-Digit Values To ensure that the month and day values always contain two digits (e.g. 01, 02, 03) , you can use a helper function that adds a leading zero ...

Are you struggling with the error “ Attempted import error: file does not contain a default export ” in your React.js app? This error occurs when you try to use a default import to import a value from a module that doesn’t have a default export. In this article, we’ll go over how to fix this error and prevent it from happening again. Understanding the “Does Not Contain a Default Export” Error To understand the error better, let’s look at an example: Example of the Error another-file.js export function sum(a, b) { return a + b;} In the another-file.js module, we have a named export sum, which is a function that returns the sum of its two arguments a and b . Now let’s say we try to use a default import for this named export in the index.js file: index.js import sum from './another-file';console.log(sum(5, 10)); This will result in the error “ Attempted import error: file does not contain a default export “. This happens because...

The error “ No inputs were found in config file ” occurs when we try to build a project that does not contain any TypeScript files. To solve the error, add an empty file with a .ts extension in your project’s root directory and restart your IDE if necessary. tsc# error TS18003: No inputs were found in config file.# Specified 'include' paths were '["**/*"]' and# 'exclude' paths were '["node_modules"]'. Step 1: Make sure your project contains at least one .ts file If your project does not contain any files with a .ts extension, you can create an empty file with a .ts extension to silence the error. Create a file called placeholder.ts with the following contents: export {}; If you have set the include array in your tsconfig.json file, make sure to create the file in the specified directory. For example: { "compilerOptions": { // ... your options }, "include": ["src/**/*"], "exclude": ["...

The error “ Cannot use jsx unless the ‘–jsx’ flag is provided ” can occur when using React and TypeScript. There are a few different steps you can take to troubleshoot and resolve this error. Step 1: Restart your IDE and development server The first thing to try is simply restarting your Integrated Development Environment (IDE) and development server. This can often resolve the issue. Step 2: Make sure your IDE is using the same version of TypeScript as your project If restarting your IDE and development server doesn’t solve the issue, the next step is to make sure your IDE is using the same version of TypeScript as your project. [Fixed]: No inputs were found in config file in TypeScript To do this, open your terminal in the root directory of your project (where your package.json file is located) and ensure that you have TypeScript installed: # with npmnpm install --save-dev typescript# with yarnyarn add typescript --dev In VSCode, you can press CTRL...

If you’ve encountered the “ createRoot(…): Target container is not a DOM element ” error while working with React, you know how frustrating it can be. This error occurs when the createRoot() function is passed a null value as the target container, which can have multiple causes. In this post, we’ll explore the common causes of this error and provide solutions for fixing it. Understanding the Causes of the “ Error createRoot(…): Target container is not a DOM element “: There are several reasons why you might encounter the “ createRoot(…): Target container is not a DOM element ” error when using React: [Fixed]: NameError: name ‘X’ is not defined in Python Passing an incorrect id to the document.getElementById() method: This is perhaps the most common cause of the error. When you use the document.getElementById() method to select the element that will serve as the target container for createRoot() , it’s important...

If you want to add an element to an array in JavaScript, but only if it doesn’t already exist in the array, there are a few different approaches you can take. Here are some options for checking if an element exists in an array and adding it if it doesn’t: Method 1: Array.includes() and Array.push() One way to check if an element exists in an array is to use the Array.includes() method. This method returns true if the specified element is found in the array, and false if it is not. You can use this method in conjunction with the Array.push() method to add the element to the array if it doesn’t already exist: const arr1 = ['a', 'b', 'c', 'd'];const value1 = 'e';if (!arr1.includes(value1)) { arr1.push(value1);} This approach works well with primitive data types such as strings, numbers, and booleans. If you’re working with objects, however, you’ll need to use a different method to check if the element exists in the array. Method 2: Array.findInd...

If you’ve encountered the “ react-scripts: command not found ” error while trying to run your React project, you’re not alone. This can be a frustrating issue, but there are a few steps you can take to resolve it. Solution 1: Run the ‘npm install react-scripts’ Command The first thing to try is running the ‘ npm install react-scripts ‘ command in your terminal, from the root directory of your project (where your package.json file is located). This will install all of the dependencies listed in your ‘package.json’ file, including the ‘react-scripts’ package. If the installation command fails, you can try re-running it with the ‘–force’ flag: npm install react-scripts --force Solution 2: Delete the ‘node_modules’ Directory and Reinstall Dependencies If the above solution doesn’t work, you may need to delete your ‘node_modules’ directory and ‘package-lock.json...

The “ unexpected reserved word await ” error is a common problem that can occur when using the ‘await’ keyword in JavaScript. This error occurs when the ‘await’ keyword is used inside of a function that is not marked as ‘async’. In this post, we’ll take a look at two examples of how this error can occur and how to fix it. Example 1: Using await inside a function that is not marked as async One of the most common causes of the “ unexpected reserved word await ” error is trying to use the ‘await’ keyword inside a function that is not marked as ‘async’. Here’s an example of how this error can occur: function getString() { //not marked async // error: unexpected reserved word 'await' const str = await Promise.resolve('hello'); return str;} In this example, we are trying to use the ‘await’ keyword inside the ‘getString’ function to wait for a promise to resolve. However,...

If you’ve encountered the error “ tsc: command not found ” while working with TypeScript, there are a few different approaches you can try to resolve it. Here are a few different solutions you can try: Solution 1: Use the npx Command with the –package Flag One quick way to solve the error is to use the ‘npx’ command with the –package flag. This will allow you to run the ‘tsc’ command without having to install the TypeScript package globally. Here’s an example of how you can use the ‘npx’ command to initialize a tsconfig.json file and check the version of the TypeScript package: npx --package typescript tsc --initnpx --package typescript tsc --version Note that we used the –package flag to specify the correct TypeScript package in the commands above. Solution 2: Install TypeScript Globally Alternatively, you can install the TypeScript package globally by running the following command: npm install typescript@lat...

Have you ever encountered the error message “ Cannot read property ‘includes’ of undefined ” while working with JavaScript? This error occurs when the ‘includes()’ method is called on a value that is undefined. To fix this error, it’s important to only call the ‘includes()’ method on data types that support it – namely, arrays and strings. Let’s consider an example to understand how this error can occur: const arr = undefined;arr.includes('example'); // TypeError: Cannot read property 'includes' of undefinedconst str = undefined;str.includes('example'); // TypeError: Cannot read property 'includes' of undefined To solve this error, you can provide a fallback value for the variable in question and only call ‘includes()’ if the value is of the expected type. Here are a few different approaches you can use to avoid this error when working with arrays and strings: Avoiding the Error with Arrays const fromDb = un...