javascript - react 图像注释 - 语法错误 : Cannot use import statement outside a module

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
我试过用这个 babel plugin正如 Alejandro Vales 所建议的那样。它给出了与以前相同的错误。这是 babel输入我的 package.json :

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

Answer 1

我会说这个问题取决于他们在此处回答的内容(类似错误)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)
您可以做的另一个修复(根据您的资源有点疯狂)是 fork 库，创建库的 CJS 版本，然后将其推送到库，以便您和其他任何人将来都可以使用它。