Cannot embed the library to project

[k2465]

Hello! First of all thank you so much for this useful integration library for React :)
I'm having a little issue embedding this in my project.
What I did is just npm install react-vnc and then pasted the code in the README

import React from 'react';
import { VncScreen } from 'react-vnc';

function App() {
  return (
    <VncScreen
      url='ws://your-vnc-url.com'
      scaleViewport
      background="#000000"
      style={{
        width: '75vw',
        height: '75vh',
      }}
      ref={ref}
    />
  );
}

export default App;

But I'm getting this:

I did a lot of tests with the package.json file, I did build the library and tried to embed it, plus a lot of other tests but I didn't get any result.
I'm sure I'm missing something stupid but I'm pretty much lost with no other solutions :(

Thank you for your time

[draentropia]

I had the same issue: ref is missing. See my component to get more info:

`import React, { useRef } from 'react'
import { VncScreen } from 'react-vnc'

const Terminal = () => {

const vncScreenRef = useRef(VncScreen)

return (
<>

Terminal

<VncScreen
  url='ws://192.168.60.111:5900'
  scaleViewport
  background="#000000"
  style={{
    width: '75vw',
    height: '75vh',
  }}
  ref={vncScreenRef}
/>
</div>
</>

)
}

export default Terminal
`

[roerohan]

Hey @k2465 @draentropia
Could you tell me which React version you're using? Maybe there is an issue with React 18, they made a bunch of breaking changes. I haven't tried running it with React 18 myself. Try running it on React 17, it should work as intended.

[roerohan]

Hey, this does not seem to be a React 18 issue. The library works fine even with React 18. Can you change the ref that you've created from

const vncScreenRef = useRef(VncScreen)

to

const vncScreenRef = useRef();

I have updated the snippet in the README to a working version.

[roerohan]

Hello! First of all thank you so much for this useful integration library for React :) I'm having a little issue embedding this in my project. What I did is just npm install react-vnc and then pasted the code in the README

import React from 'react';
import { VncScreen } from 'react-vnc';

function App() {
  return (
    <VncScreen
      url='ws://your-vnc-url.com'
      scaleViewport
      background="#000000"
      style={{
        width: '75vw',
        height: '75vh',
      }}
      ref={ref}
    />
  );
}

export default App;

But I'm getting this:

I did a lot of tests with the package.json file, I did build the library and tried to embed it, plus a lot of other tests but I didn't get any result. I'm sure I'm missing something stupid but I'm pretty much lost with no other solutions :(

Thank you for your time

Hey, so the error in your code snippet was that ref was not created. You can use useRef() to create a ref and pass it to the VncScreen component. I've updated the snippet in the library documentation](https://github.com/roerohan/react-vnc#README.md).

[draentropia]

Im'm using react 18, but the issue is with react-scripts 5 for sure. I'd just downgraded to react-scripts 4 and it works like a charm. El jue., 28 jul. 2022 11:43, Rohan Mukherjee ***@***.***> escribió:

…

Hey @k2465 <https://github.com/k2465> @draentropia <https://github.com/draentropia> Could you tell me which React version you're using? Maybe there is an issue with React 18, they made a bunch of breaking changes. I haven't tried running it with React 18 myself. Try running it on React 17, it should work as intended. — Reply to this email directly, view it on GitHub <#35 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD2TUO222MKURQZAM45P7UDVWJI3XANCNFSM5WIDSD6A> . You are receiving this because you were mentioned.Message ID: ***@***.***>