React-Image-Annotate - SyntaxError：不能在模块外使用导入语句

Question

我正在尝试使用 react-image-annotate，但是当我第一次尝试设置它时，它给了我这个问题。

这是我的使用方法：

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

如果这很重要，我正在使用 Next.js

更新 1 我尝试按照 Alejandro Vales 的建议使用 babel plugin。它给出了与以前相同的错误。这是我的package.json 中的babel 键：

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

Answer 1

我有一个棘手的解决方案！

问题是 react-image-annotate 只能在客户端导入（SSR got error for import keyword）

所以，让 Nextjs 中的 react-image-annotate 只在客户端导入 (https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)

在需要这个组件的下一页，你可以这样制作组件

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;

制作这样的组件

//@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;

Answer 2

我会说问题取决于他们在此处回复的内容（类似错误）https://github.com/UniversalDataTool/react-image-annotate/issues/90#issuecomment-683221311

确实修复它的一种方法我想说的是在项目中添加 babel，这样您就可以将项目中的 imports 自动转换为 require 而无需更改整个代码项目。

这是你要找的babel包https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs

另一个原因可能是您的软件包版本过时，因为有些人报告说在使用较新版本的 Create React App (https://github.com/UniversalDataTool/react-image-annotate/issues/37#issuecomment-607372287) 后已修复此问题

你可以做的另一个修复（根据你的资源有点疯狂）是分叉库，创建库的 CJS 版本，然后将其推送到库，这样你和其他任何人以后可以用。