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
                }
            ]
        ]
    }

If you’re using next.js, you’ll have to add your Babel webpack stuff in next.config.js I believe. — Shamoon
– Shamoon, Commented Sep 2, 2020 at 11:04
Hmm that is what the docs say. I remember there was a reason I added the babel key to package.json instead of next.config.js but I can't quite remember. I'll look into it and update here. — Fowad
– Fowad, Commented Sep 2, 2020 at 14:42
So according to babel's docs, you can add the babel key in package.json. This should apply for Next.js as well because the other plugin fixed a separate issue I was having. — Fowad
– Fowad, Commented Sep 2, 2020 at 14:47
Look at nextjs.org/docs/advanced-features/customizing-babel-config — Shamoon
– Shamoon, Commented Sep 2, 2020 at 14:48

Alejandro Vales · Accepted Answer · 2020-09-01 13:16:41Z

5

+50

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.

answered Sep 1, 2020 at 13:16

Alejandro Vales

2,9671 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fowad Over a year ago

Thanks for these tips. I tried Next.js's dynamic imports, which didn't work. I also tried the babel plugin you shared, however it gives the same error. Perhaps I didn't use it properly? See Update 1 in the body of the post for my package.json

boaz · Accepted Answer · 2021-02-17 06:07:18Z

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;

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related