Any guide for embedding a night-vision chart into React framework?

[AHammerLine]

As a layman, I am tring to put night-vision charts into React framework.

Here is my file structure:

src:

• index.js
• App.js
• Home.js
• Night.js

Everything was ok before I use Night component in Home component. However, upon Night component added, an Uncaught SyntaxError: Unexpected token '<' raised in console log.

Below is how the my Night component file looks like:

import React from "react";
import { useEffect } from "react";
import { NightVision } from 'night-vision';

let charts;

function data() {
    return Array(30).fill(1).map((x, i) => [
        new Date(`${i + 1} Nov 2022 GMT+0000`).getTime(),
        i * Math.random()
    ])
}

const Night = (props) => {
charts = new NightVision('night', {
            autoResize: true,
        })
    }, [])
    return (
            <div id="night"></div>
    )
}
export default Night;

As mentioned in docs, night-vision can be applied in any framework, so where should I start? Expecting for your replies!

[C451]

I need to look into this react stuff. Something isn't right. 🤔
If you are testing in CodeSandBox, there's a known problem with the web-worker, so you could try to run an npm app.

[AHammerLine]

Thanks, I try to present my minimize demo, please see attachment, minimal-demo.zip (unzip and npm install then npm start).

The code references to this post.

If you npm start the project, you will see Uncaught SyntaxError: Unexpected token '<' in console. And uncomment import Night from './Night'; and <Night></Night> in App.js, the page works properly.

[fsage]

I have the exact same issue.
really like the library but need to get it working in react

Did you manage to find time to take a look?

[fsage]

`import React, { useEffect } from 'react'
import { NightVision } from 'night-vision'

export default function Night(props)
{
const {
data,
} = props;

useEffect(() => {
    let chart = new NightVision('night', {
        autoResize: true,
    })
}, [data])


return (
    <div id="night"></div>
);

}`

[AHammerLine]

Hi, it's been along while to reply you. You can check frbju's example on code sand box: https://codesandbox.io/s/react-night-vision-6vkjfo?file=/src/App.js. Hope it would helpful. By the way, I am devlopping my project with typescript and rect, which is no compatible well with the night-vision, therefore I have to choose another project: react-financial-charts instead.