Category: React Answers

Sometimes, we may run into the "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined" error when starting a React app.

In this article, we’ll look at how to fix the "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined" error when starting a React app.

Fix the "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined" Error When Starting a React App

To fix the "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined" error when starting a React app, we should upgrade the react-scripts package to the latest version.

To do this, we:

1. Replace in your package.json "react-scripts": "^3.x.x" with "react-scripts": "^3.4.1" (or the latest available version) (optional for some)
2. Delete the node_modules folder in the project.
3. Run npm install or yarn install

This error may be caused by running npm audit fix, so avoid running this command to avoid this error.

Conclusion

To fix the "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined" error when starting a React app, we should upgrade the react-scripts package to the latest version.

Sometimes, we may run into to fix the ‘Maximum update depth exceeded error’ when developing React apps.

In this article, we’ll look at how to fix the ‘Maximum update depth exceeded error’ when developing React apps.

Fix the ‘Maximum update depth exceeded error’ When Developing React Apps

To fix the ‘Maximum update depth exceeded error’ when developing React apps, we should make sure no code is keeping the component from re-rendering without stopping.

One common source of the error is that we called a function when we pass in a prop instead of passing in a function reference.

For instance, instead of writing:

{<td><span onClick={toggle()}>Details</span></td>}

We should write:

{<td><span onClick={toggle}>Details</span></td>}

so that toggle is called only when we click on the span.

Conclusion

To fix the ‘Maximum update depth exceeded error’ when developing React apps, we should make sure no code is keeping the component from re-rendering without stopping.

One common source of the error is that we called a function when we pass in a prop instead of passing in a function reference.

Sometimes, we want to initialize state from props in a React component.

In this article, we’ll look at how to initialize state from props in a React component.

Initialize State from Props in a React Component

To initialize state from props in a React component, we can watch the prop’s value with the useEffect hook, then we can call the state setter function to set the state’s value to the prop’s value.

For instance, we write:

import React, { useEffect, useState } from "react";

const Child = ({ text }) => {
  const [val, setVal] = useState();
  useEffect(() => {
    setVal(text);
  }, [text]);

  return <div>{val}</div>;
};

export default function App() {
  return <Child text="hello world" />;
}

to create the Child component with the text prop.

We create the val state with the useState hook.

Then we call the useEffect hook with a callback that calls setVal with text.

The 2nd argument is set to an array with text so that we watch for changes in the text prop.

And then we render val in the div.

In App, we add the Child component and set the text prop.

Therefore, we should see ‘hello world’ rendered.

Conclusion

To initialize state from props in a React component, we can watch the prop’s value with the useEffect hook, then we can call the state setter function to set the state’s value to the prop’s value.

Sometimes, we want to copy text to clipboard programmatically in React.

In this article, we’ll look at how to copy text to clipboard programmatically in React.

Copy Text to Clipboard Programmatically in React

To copy text to clipboard programmatically in React, we can use the navigator.clipboard.writeText method.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <button
      onClick={() =>
        navigator.clipboard.writeText("Copy this text to clipboard")
      }
    >
      Copy
    </button>
  );
}

We call navigator.clipboard.writeText with the text string that we want to copy to the clipboard.

Now when we click Copy, we should see the text that we copied when we paste it.

Conclusion

To copy text to clipboard programmatically in React, we can use the navigator.clipboard.writeText method.

Sometimes we may run into the "SyntaxError: Unexpected token < in JSON at position 0" error when developing React apps.

In this article, we’ll look at how to fix the "SyntaxError: Unexpected token < in JSON at position 0" error when developing React apps.

Fix the "SyntaxError: Unexpected token < in JSON at position 0" Error When Developing React Apps

To fix the "SyntaxError: Unexpected token < in JSON at position 0" error when developing React apps, we should make sure that we aren’t parsing any JSON that starts with the < symbol.

For instance, we should parse anything with JSON.parse like:

JSON.parse('<...')

Also, we shouldn’t parse HTTP responses that starts with < when we’re expecting JSON.

The response text can be logged to check when the response is.

Conclusion

To fix the "SyntaxError: Unexpected token < in JSON at position 0" error when developing React apps, we should make sure that we aren’t parsing any JSON that starts with the < symbol.

Also, we shouldn’t parse HTTP responses that starts with < when we’re expecting JSON.