annotorious: Error: \node_modules\@recogito\annotorious\src\index.js: Unexpected token (47:6)

Hi,

The demo example on this (https://www.npmjs.com/package/@recogito/annotorious) and the github page worked fine when using simple index and js files with “python -m http.server” but I was then planing for the big project.

I developed whole backend in Node.js using this library but now when I implemented it in React.js by the method that is written in the same pages as the following steps

1. npm i @recogito/annotorious
2. import { Annotorious } from ‘@recogito/annotorious’;
3. const anno = new Annotorious({ image: ‘annotoriousLabels’ });

but It produces error on step no. 2 (import), below is the error picture

And the component file in which I’m including it is as following:

`import React from “react”; // @material-ui/core components import { makeStyles } from “@material-ui/core/styles”; // core components import GridItem from “components/Grid/GridItem.js”; import GridContainer from “components/Grid/GridContainer.js”; import Button from “components/CustomButtons/Button.js”; import Card from “components/Card/Card.js”; import CardHeader from “components/Card/CardHeader.js”; import CardBody from “components/Card/CardBody.js”; import CardFooter from “components/Card/CardFooter.js”;

import { Annotorious } from ‘@recogito/annotorious’;

import { apiURL } from ‘…/…/…/config’; // import an from ‘./annotorious’;

const styles = { cardCategoryWhite: { color: “rgba(255,255,255,.62)”, margin: “0”, fontSize: “14px”, marginTop: “0”, marginBottom: “0” }, cardTitleWhite: { color: “#FFFFFF”, marginTop: “0px”, minHeight: “auto”, fontWeight: “300”, fontFamily: “‘Roboto’, ‘Helvetica’, ‘Arial’, sans-serif”, marginBottom: “3px”, textDecoration: “none” } };

const useStyles = makeStyles(styles);

const ImageCard = (props) => { const classes = useStyles();

const anno = new Annotorious({ image: ‘annotoriousLabels’ });

return ( <div> <GridContainer> <GridItem xs={12} sm={12} md={12}> <Card> <CardHeader color="primary">

Picture

Please label the picture below.

</CardHeader> <CardBody> <img className = “annotatable” id = “annotoriousLabels” src = {apiURL + ‘/’ + props.photo.url} alt = “To be labelled…” width = ‘100%’ height = ‘100%’ /> </CardBody> <CardFooter> <Button color="success">Save Changes</Button> </CardFooter> </Card> </GridItem> </GridContainer> </div> ); }

export default ImageCard; `