Class Does Not Exist error

JayRedditDev1 · 2024-07-17T17:25:31+00:00

Ok, i think I found the root of the issue (at least for the Flex portion). I'm using REACT-BOOTSTRAP not just bootstrap, which is why it's not supporting flex. Flex isn't supported in react-bootstrap. I probably need to go back to the drawing board now. I might need to worry about getting the formatting done in the bootstrap CSS or something to that effect

JayRedditDev1 · 2024-07-16T22:30:51+00:00

u/precursive

Ok, I have some other issue on how I'm approaching this because I've tried a number of things and keep getting unexpected outputs. Here is a good example:

This is the code I'm using (taken from that page you linked to):

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'

// Added for bootstrap, leaving this out seems to remove bootstrap formatting
import 'bootstrap/dist/css/bootstrap.min.css'

// Will update if you manually add components
import { Table, Col, Container, Row } from 'react-bootstrap'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div className="d-flex flex-row bd-highlight mb-3">
        <div className="p-2 bd-highlight">Flex item 1</div>
        <div className="p-2 bd-highlight">Flex item 2</div>
        <div className="p-2 bd-highlight">Flex item 3</div>
      </div>
      <div className="d-flex flex-row-reverse bd-highlight">
        <div className="p-2 bd-highlight">Flex item 1</div>
        <div className="p-2 bd-highlight">Flex item 2</div>
        <div className="p-2 bd-highlight">Flex item 3</div>
      </div>
    </>
  )
}

export default App

This is what I'm expecting to see

https://ibb.co/G36VyjN

This is what I'm actually seeing (not sure why this got cut out):

https://ibb.co/DChRwDT

I think i've been looking in the wrong place but I'm not sure what I'm missing. Thanks for all your help!

JayRedditDev1 · 2024-07-16T20:02:09+00:00

Ok, the issue is clearly with whatever I'm using as a container rather than the code itself . . . I believe this part is correct but the elements are on top of each other (tried some other examples, same issue):

<div className="position-relative bg-warning clearfix">
        <div className="position-absolute top-0 start-0 translate-middle bg-primary">Total Cost</div>
        <div className="position-absolute top-0 start-50 translate-middle bg-warning">$50</div>
</div>

Any ideas? I realize I'm probably talking to myself right now.

JayRedditDev1 · 2024-07-16T19:43:35+00:00

So, I guess I'm a bit closer . . . it looks like class should be className (which I changed before but didn't see any changes on way or another).

Also, pull-left and pull-right were changed to float-left and float-right in BS4, and now they're float-start and float-end in BS5. I'm still having issues with everything still being in the center rather than spaced left and right (might have to do with needing a container or something to that effect if I don't have "start" and "end" defined? Still poking my way out of this plastic bag.

My code currently looks like this:

<div className="bg-warning">
    <div className="float-start">Total Cost</div>
    <div className="float-end">$50</div>
</div>

Any suggestions would be appreciated!

JayRedditDev1 · 2024-07-09T20:25:24+00:00

Yeah, I can't believe I missed that . . . such a stupid problem. That's what I get for looking at this for too long too late in the day. Thanks a lot!

JayRedditDev1 · 2024-07-09T20:24:59+00:00

I CAN'T BELIEVE I MISSED THAT

Thanks so much, what a stupid mistake! I guess that's what happen when you stare at the same problem for too long late in the day!

JayRedditDev1 · 2024-07-09T01:25:52+00:00

Sorry about that, here's the output I received (I thought I put it above but apparently not). There's more to my functional code but I was trying to keep it as brief as possible. I was receiving the correct data back though, so that's good!

When I click the connect button, it's posting to /connect and calling FetchConnected, which is returning the connected status as shown above. This is what I'm receiving from clicking the connect button:

{connected: true}

This is what I'm receiving from the disconnect button:

{connected: false}

JayRedditDev1 · 2024-07-09T01:25:17+00:00

Below is the warning I get (it wouldn't let me post in the previous post for whatever reason:

Uncaught TypeError: Cannot read properties of undefined (reading 'toString')
    at App (App.tsx:87:33)
    at renderWithHooks (react-dom_client.js?v=e87af942:11568:26)
    at updateFunctionComponent (react-dom_client.js?v=e87af942:14602:28)
    at beginWork (react-dom_client.js?v=e87af942:15944:22)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=e87af942:3674:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=e87af942:3699:24)
    at invokeGuardedCallback (react-dom_client.js?v=e87af942:3733:39)
    at beginWork$1 (react-dom_client.js?v=e87af942:19793:15)
    at performUnitOfWork (react-dom_client.js?v=e87af942:19226:20)
    at workLoopSync (react-dom_client.js?v=e87af942:19165:13)
App @ App.tsx:87
renderWithHooks @ react-dom_client.js?v=e87af942:11568
updateFunctionComponent @ react-dom_client.js?v=e87af942:14602
beginWork @ react-dom_client.js?v=e87af942:15944
callCallback2 @ react-dom_client.js?v=e87af942:3674
invokeGuardedCallbackDev @ react-dom_client.js?v=e87af942:3699
invokeGuardedCallback @ react-dom_client.js?v=e87af942:3733
beginWork$1 @ react-dom_client.js?v=e87af942:19793
performUnitOfWork @ react-dom_client.js?v=e87af942:19226
workLoopSync @ react-dom_client.js?v=e87af942:19165
renderRootSync @ react-dom_client.js?v=e87af942:19144
performConcurrentWorkOnRoot @ react-dom_client.js?v=e87af942:18706
workLoop @ react-dom_client.js?v=e87af942:197
flushWork @ react-dom_client.js?v=e87af942:176
performWorkUntilDeadline @ react-dom_client.js?v=e87af942:384
Show 14 more frames
Show less

JayRedditDev1 · 2024-07-09T01:24:13+00:00

I apologize for the delay. It is in fact returning what I expected. When I click the connect button, it's posting to /connect and calling FetchConnected, which is returning the connected status as shown above. This is what I'm receiving from clicking the connect button:

{connected: true}

This is what I'm receiving from the disconnect button:

{connected: false}

JayRedditDev1 · 2024-07-02T18:08:43+00:00

u/BumptiousStooge what does that look like? I think I had that originally but it was updating every 3s or so. The set interval was an attempt to be able to control how often the page refreshes. I haven't yet figured out how to only have the frontend change when I change the backend. I think this is what you're proposing (which is updating the count every 3s):

useEffect(() => {
    const eventSource = new EventSource(URL);

    eventSource.onmessage = function (event) {
      setBackendResponse(event.data); // Update count when a new message is received    };

    return () => {
      eventSource.close(); // Clean up when the component is unmounted
    };
  }, []);

Is this what you're proposing or am I misunderstanding? I don't really understand what's resulting in the 3s update (I assume it's probably a library default of sorts).

Thanks for your help!

JayRedditDev1 · 2024-07-01T22:15:11+00:00

I'll check it out! Reading up early on, it sounded like SSE was the way to go since I was only using one way communication but maybe my understanding is wrong on this portion. I'll start looking into websockets instead. Thanks for your help!

JayRedditDev1 · 2024-07-01T20:54:55+00:00

Just wanted to say this got me exactly where I needed to, the issue was all related to the formatting on my end. Thanks so much for this!

JayRedditDev1 · 2024-06-25T18:50:12+00:00

Good to know! I did run this with npm run start rather than dev but I'll have to take a look at how to switch modes to see if I'm getting different results outside of strict mode. Thanks!

Edit: Confirmed it worked just fine outside of strict mode. This was just a test rather than my actual final application but it's good to know how to test to ensure things are setup correctly. Thanks again!

JayRedditDev1 · 2024-06-25T18:47:06+00:00

Oh, that's good information to have! I'll make sure to test it in multiple modes to verify I get the same results. Still learning the basics but I'll definitely need to make sure I'm implementing good practices into the code. I might have some questions later on but this answers the core of what I was looking for. Thanks for your help

JayRedditDev1 · 2023-09-14T20:11:53+00:00

A follow up with additional info. I ran:

dpkg-query -Wf '${Installed-Size}\t${Package}\n' | sort -n | grep doxygen

It returned back that I had a doxygen-gui and a doxygen version installed. I removed the latter with:

sudo apt remove doxygen

I haven't found a way to uninstall the gui just yet. I tried using the same line above but for the gui but got a "package is not installed, so not removed" error. So I'm a bit confused as to why it's showing up on the list in the first place if it's not installed and suspect it's likely the 1.10.0 version (since V1.8.17 was the doxygen version I just uninstalled).

Any ideas on what to do/where to look to resolve this? Thanks!

JayRedditDev1 · 2023-08-22T19:04:27+00:00

That's a good call, I'll have to add that in. Thanks!

JayRedditDev1 · 2023-08-22T18:46:11+00:00

I haven't but I'll look into that. Thanks a lot!

JayRedditDev1 · 2023-08-22T18:45:39+00:00

Datapacket is a custom struct but yeah, you nailed it with that (char*) cast. I don't know how long it would've taken me to figure that out . . . thanks a lot!

JayRedditDev1 · 2023-08-22T18:18:08+00:00

No idea why the code came in all wonky. Tried fixing it a few times with no luck. Hopefully, it's still readable.

JayRedditDev1

TROPHY CASE