SyntaxError: Cannot use import statement outside a module

I’ve been hunting for a package like this for so long!

Just trying to get this up and running but I’m running into this issue:

Here’s the component that’s using this library:

import React from 'react'
import ReactImageAnnotate from 'react-image-annotate'

function ImageAnnotator() {
    return (
        <ReactImageAnnotate
            selectedImage="https://images.unsplash.com/photo-1561518776-e76a5e48f731?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            // taskDescription="# Draw region around each face\n\nInclude chin and hair."
            // images={[
            //     { src: 'https://example.com/image1.png', name: 'Image 1' },
            // ]}
            // regionClsList={['Man Face', 'Woman Face']}
        />
    )
}

export default ImageAnnotator

I’m using Next.js if that matters

Thank you!

[david718]

I got tricky solution!

Problem is that react-image-annotate can only be imported in client-side(SSR got error for import keyword)

So, let react-image-annotate in Nextjs be imported only in client side (https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)

in Next Page that needs this component, You can make component like this

import dynamic from "next/dynamic";
const DynamicComponentWithNoSSR = dynamic(() => import("src/components/Upload/Annotation"), { ssr: false });
import { NextPage } from "next";

const Page: NextPage = () => {
    return (
        <>
             <DynamicComponentWithNoSSR />
        </>
    );
};

export default Page;

Make component like this

//@ts-ignore
import ReactImageAnnotate from "react-image-annotate";
import React from "react";

const Annotation = () => {
    return (
        <ReactImageAnnotate
            labelImages
            regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
            regionTagList={["tag1", "tag2", "tag3"]}
            images={[
                {
                    src: "https://placekitten.com/408/287",
                    name: "Image 1",
                    regions: [],
                },
            ]}
        />
    );
};

export default Annotation;

[fowad-sohail]

@tsubramanian Unfortunately I haven’t. This was part of a project that I’m no longer a part of, I will make sure the rest of the team knows about this post so that if they make any progress they can update accordingly. Sorry for the inconvenience.