SyntaxError: Cannot use import statement outside a module

[fowad-sohail]

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!

[seveibar]

We don't currently transpile a CJS version of this module, since Next.js uses Server Side Rendering, and node can't handle import statements (or at least node 12 can't), it doesn't work.

So to fix this, we would need a CJS version of the lib. This can be achieved by adding a babel transform that converts the imports into requires.

Curious what version of node you're using. I think newer versions might support imports but I'm not sure.

Thanks for reporting :)

[fowad-sohail]

Curious what version of node you're using. I think newer versions might support imports but I'm not sure.

Thanks for the response! I'm using Node version v14.4.0.

A potential solution to this problem might be using Next.js's dynamic imports. I'll update here if this works

[fowad-sohail]

The dynamic imports didn't work. I also tried to use this babel transform. Unfortunately, it also didn't work.

[fowad-sohail]

Here's a link to an associated Stack Overflow post

[tsubramanian]

@fowad-sohail : Have you got it resolved?. I am at the same place where you were 20 days ago, using Next.js. Please let me know the steps you have used to solve the error.

[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.

[tsubramanian]

We don't currently transpile a CJS version of this module, since Next.js uses Server Side Rendering, and node can't handle import statements (or at least node 12 can't), it doesn't work.

So to fix this, we would need a CJS version of the lib. This can be achieved by adding a babel transform that converts the imports into requires.

Curious what version of node you're using. I think newer versions might support imports but I'm not sure.

Thanks for reporting :)

@seveibar: Any update on the bug?, The above steps seem not working for fowad, please advise code examples of what steps to be done.

[seveibar]

Does anyone have an example repo of the UDT in nextjs reproducing the issue? Afraid I'm not intimately familiar with nextjs.

@tsubramanian you might consider turning off SSR for the react image annotate component using NoSSR as a temporary solution until this is resolved.

Edit: Although if it's breaking imports i suppose this may not be possible...

[boaz-hwang]

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;

[boypanjaitan16]

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;

I'm planning to use this, but my question is how we gonna pass the props to main component?