React-Image-Annotate - SyntaxError: Cannot use import statement outside a module

Question

I'm trying to use react-image-annotate but it's giving me this issue when I first try to set it up.

And here's how I'm using it:

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

UPDATE 1 I tried using this babel plugin as suggested by Alejandro Vales. It gives the same error as before. Here's the babel key in my package.json:

    "babel": {
        "presets": [
            "next/babel"
        ],
        "plugins": [
            [
                "@babel/plugin-proposal-decorators",
                {
                    "legacy": true
                }
            ],
            [
                "@babel/plugin-transform-modules-commonjs",
                {
                    "allowTopLevelThis": true
                }
            ]
        ]
    }

Answer 1

I would say that the issue relies in the library itself by what they replied in here (similar bug) https://github.com/UniversalDataTool/react-image-annotate/issues/90#issuecomment-683221311

Indeed one way to fix it I would say is adding babel to the project so you can transform the imports in your project to require automatically without having to change the code on your whole project.

This is the babel package you are looking for https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs

Another reason for this could be an outdated version of your package, as some people report to have this fixed after using a newer version of Create React App (https://github.com/UniversalDataTool/react-image-annotate/issues/37#issuecomment-607372287)

Another fix you could do (a little crazier depending on your resources) is forking the library, creating a CJS version of the lib, and then pushing that to the library, so you and anybody else can use that in the future.

Answer 2

I got a 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;