VSC REACT PREVIEW - HTTP REQUEST ATTEMPT FAILS (Failed to fetch dynamically imported module)

[tyriem]

https://github.com/tyriem/REACT/blob/3b52b663df36981611258eb3fd349997bd7eab8e/app/src/Intro%20to%20REACTJS%2024%20-%20REACT%20ROUTER%20ASSIGNMENT.tsx#L49

@tyriem @aaronsaunders @aaron@clearlyinnovative.com

[aaronksaunders]

you had your function outside of any component...

function Home() {
  const [users,setUsers] = useState<any>([]);

  /// HTTP REQUEST - FETCH DATA FROM API
  const dataArray: any = () => {
    fetch("https://randomuser.me/api/?results=10")
      .then((response) => response.json())
      .then((data) => setUsers(data));
  };

  // see documentation - https://reactjs.org/docs/hooks-reference.html#useeffect
   useEffect(()=> {
         dataArray()
   },[]);

  return (
    <div>
      <h1>DYNAMIC ROUTING</h1>

      <div>
        <h2>Showing Dynamic Routes</h2>
        {/* MAP ARRAY: dataArray WITH KEY AND SET LINK */}
        {users.map((i) => (
          <li key={i.id}>
            <Link to={"/detail-page/" + i.id}>
              {i.name} {i.id}
            </Link>
          </li>
        ))}
      </div>
    </div>
  );
}

[tyriem]

function Home() { const [users,setUsers] = useState([]);

/// HTTP REQUEST - FETCH DATA FROM API const dataArray: any = () => { fetch("https://randomuser.me/api/?results=10") .then((response) => response.json()) .then((data) => setUsers(data)); };

// see documentation - https://reactjs.org/docs/hooks-reference.html#useeffect useEffect(()=> { dataArray() },[]);

return (

DYNAMIC ROUTING

Showing Dynamic Routes

{/* MAP ARRAY: dataArray WITH KEY AND SET LINK */} {users.map((i) => (

{i.name} {i.id}

))}

); }

Thank your for your solution suggestion, error still persists but that tracks with your advise in class about stackblitz. Will experiment with further and see if resolution can be found.

[aaronksaunders]

please provide the exact error... and a link to a project that has the code running... demonstrating the error.

the purpose of logging issues in github is so that I can see the exact environment you are running your project in, I cannot do that with how you have structured this repo

[tyriem]

please provide the exact error... and a link to a project that has the code running... demonstrating the error.

TypeError: Failed to fetch dynamically imported module: http://localhost:3120/preview/@id/__x00__virtual:/Users/tm/Documents/CODE/REACT/app/__reactpreview_internal__/RendererProxy.tsx

Error appears tied to mapping the response data

the purpose of logging issues in github is so that I can see the exact environment you are running your project in, I cannot do that with how you have structured this repo

The way that the React Preview plugin for VSC works constrains the project setup in an unfortunate way to allow it to work consistently. I plan to format it differently once I no longer use it for quick previewing.

SOLUTION α : https://github.com/tyriem/REACT/blob/main/app/src/Intro%20to%20REACTJS%2024%20-%20REACT%20ROUTER%20ASSIGNMENT.tsx SOLUTION β: https://github.com/tyriem/REACT/blob/main/app/src/Intro%20to%20REACTJS%2024-1%20-%20TEST.tsx

Of the two WIP solutions, B does not yield the error but isn't finished being set up to output either.

[tyriem]

please provide the exact error... and a link to a project that has the code running... demonstrating the error.

the purpose of logging issues in github is so that I can see the exact environment you are running your project in, I cannot do that with how you have structured this repo

ISSUE RESOLVED WITH VERSION 2.0 class App extends Component { & this.state structure merged down. Primary Routes coded and working, secondary routes (Details) being worked on. 3b52b66 Logic shifted to alternate solution here: https://github.com/tyriem/REACT/blob/main/app/src/Intro%20to%20REACTJS%2024-1%20-%20REACT%20ROUTER%20ASSIGNMENT%20%5BALTERNATE%5D.tsx

Thank you for your solution suggestion and assistance.

[tyriem]

Based on code review with @aaronksaunders | @aaron@clearlyinnovative.com, 356b994 logic has been deprecated and 3b52b66 logic is now main. Project has been moved to: https://github.com/tyriem/REACT/tree/main/Intro%20To%20REACT%2024%20-%20FETCH%20%2B%20DYNAMIC%20ROUTING pending resolution of bug in VSC React Preview: https://marketplace.visualstudio.com/items?itemName=zenclabs.reactpreview .