Minified React error #418; #423; in production build about personal-site HOT 3 CLOSED

🤖

The Minified React error #418 is related to an invalid hook call, and error #423 is related to calling a hook from a non-react function or a non-component function.

In the provided context, the useEffect hook is not being used correctly. Hooks should be called at the top level of the React function, not inside callbacks or loops.

Here's how you can fix the code:

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Markdown from 'markdown-to-jsx';

import Main from '../layouts/Main';

const About = () => {
  const [markdown, setMarkdown] = useState('');

  useEffect(() => {
    const fetchMarkdown = async () => {
      const res = await import('../data/about.md');
      const r = await fetch(res.default);
      const text = await r.text();
      setMarkdown(text);
    };

    fetchMarkdown();
  }, []); // Add an empty dependency array to ensure this effect runs once on mount

  const count = markdown.split(/\s+/)
    .map((s) => s.replace(/\W/g, ''))
    .filter((s) => s.length).length;

  return (
    <Main
      title="About"
      description="Learn about Michael D'Angelo"
    >
      <article className="post markdown" id="about">
        <header>
          <div className="title">
            <h2><Link to="/about">About Me</Link></h2>
            <p>(in about {count} words)</p>
          </div>
        </header>
        <Markdown>
          {markdown}
        </Markdown>
      </article>
    </Main>
  );
};

export default About;

In this revised code, I've moved the asynchronous operations into a separate async function fetchMarkdown that is then called from within the useEffect hook. This ensures that the hook is being called at the top level of the React function, as required by the rules of hooks. The empty dependency array [] passed to useEffect ensures that the effect only runs once, when the component mounts.

You can find the original code in the src/pages/About.js file in the repository.

Please let me know if you need further assistance.

Sources

• src/pages/About.js

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

from personal-site.

🤖

Hello @safwanidrees,

I'm Dosu, a bot designed to assist with this repository. I'm here to help you debug issues, answer questions, and guide you to become a contributor. While we wait for a human maintainer to join us, I'll be working on your issue. Expect a detailed response from me shortly.

from personal-site.

How to fix Minified React error #418; #423; issue in the production build of that repository ?

from personal-site.