React Chrome 扩展错误：未捕获的语法错误：无法在模块外使用导入语句

Question

我想在 background.js 中运行一个 react 文件，但我一直收到以下错误 Uncaught SyntaxError: Cannot use import statement outside a module。

反应文件 Timer.js 是一个带有用户输入的倒数计时器，其中包括许多库。

我已经尝试将 type:module 添加到我的 package.json 中，但这也没有解决我的问题。

有没有办法让我的 background.js 成为一个 React 文件，它可以继续在我的 chrome 扩展程序的后台运行？

定时器.js

import React, { useState } from 'react'
import { CountdownCircleTimer } from "react-countdown-circle-timer";
import Confetti from 'react-confetti'

const Timer = (props) => {
    // Use states
    const [currentTime, setTime] = useState(false)
    var [time, setValue] = useState(60)
    const [key, setKey] = useState(0);
    const [print, setPrint] = useState(false)
    const [userInput, setuserInput] = useState(null)
    const [flag, setFlag] = useState(0)
    const [recycle, setRecycle] = useState(false)


    //Setting use state for 3 user inputs
    const [timerValue, setTimer] = React.useState({
        hour: 0,
        minute: 0,
        second: 2,
    })

    // Plays time
    function startTime() {
        setTime(true)
    }

    //Pause time
    function stopTime() {
        setTime(false)
    }

    function resetTime() {
        setKey(prevKey => prevKey + 1)
        setTime(false)
    }

    const renderTime = ({ remainingTime }) => {

        // Converts user input value into hh:mm:ss format
        var date = new Date(null);
        date.setSeconds(remainingTime); // specify value for SECONDS here
        var result = date.toISOString().slice(11, 19);

        // Timer changing value when reaches 0
        if (remainingTime === 0) {
            console.log("STILL RAN IN THE BACKGROUND AND FINSIHED ")
            setFlag(1000)
            setTimeout(function () {
                setRecycle(false)
            }, 2000);
            return <div className="timer"><h2 id="timerText">Well done!</h2></div>;
        }
        setRecycle(true)
        setFlag(0)
        return (
            <div >
                <div className="value"><h2 id="timerText">{result}</h2></div>
            </div>
        );
    };

    // assigns 3 user inputs to var
    function userinput(event) {
        const value = event.target.value;
        setTimer({
            ...timerValue,
            [event.target.name]: value
        });
        console.log(timerValue)
    }


    // Takes 3 user input converts them into seconds then adds them together to be set as timer duration 
    function valueToTime(event) {
        var hour = parseInt(timerValue.hour)
        var minute = parseInt(timerValue.minute)
        var second = parseInt(timerValue.second)
        hour = hour * 3600
        minute = minute * 60
        // Only number are allowed as user inputs
        if (isNaN(hour, minute, second) || /[^a-zA-Z0-9]/.test(hour, minute, second)) {
            hour = 0
            minute = 0
            second = 0
            alert("bonger")
        }
        var totalTime = hour + minute + second
        setValue(time = totalTime)
    }

  
    const width = window.innerWidth
    const height = window.innerHeight

    return (
        <div>
            <div className="timerWrapper" >
                <br />
                {
                    print ?
                        <h1>{userInput}</h1>
                        : null
                }
                <div className="timer-wrapper" >
                    <CountdownCircleTimer
                        key={key}
                        isPlaying={currentTime}
                        // By default time == 60 seconds, renderTime converts it into HH:MM:SS. Time can also be changed by userInput which is also in seconds. result == 00:01:00 
                        duration={time}
                        colors={"#5d4192"}
                        onComplete={() => [false, 1000]}
                        size={250}
                        strokeWidth={15}
                        strokeLinecap={"round"}
                        trailColor={'#000'}
                        isLinearGradient={false}
                    >
                        {renderTime}
                    </CountdownCircleTimer>
                    <div className="test">
                        <div id="timeInput">
                        <p className="timeText" id="hour">Hours</p>
                        <p className="timeText" id="minute">Minutes</p>
                        <p className="timeText" id="second">Seconds</p>
                            <div id="hourWrapper" className="timeUnitWrapper">
                                <input id="hour" onChange={userinput} maxLength="2" type="text" name="hour" value={timerValue.hour}></input>
                            </div>
                            <div id="minuteWrapper" className="timeUnitWrapper">
                                <input id="minute" onChange={userinput} maxLength="2" type="text" name="minute" value={timerValue.minute}></input>
                            </div>
                            <div id="secondWrapper" className="timeUnitWrapper">
                                <input id="second" onChange={userinput} maxLength="2" type="text" name="second" value={timerValue.second}></input>
                            </div>
                        </div>
                        <div className="buttonWrapper">
                            <button className="customButton" id="set" onClick={valueToTime}>Set</button>
                            <button className="customButton" id="play" onClick={startTime}>Start</button>
                            <button className="customButton" id="pause" onClick={stopTime}>Pause</button>
                            <button className="customButton" id="reset" onClick={resetTime}>Reset</button>
                        </div>
                    </div>
                </div>
            </div>
            <div className="wrapper" >
                <Confetti
                    // creates scroll bar, find better fix
                    width={width - 15}
                    height={height}
                    run={true}
                    recycle={recycle}
                    numberOfPieces={flag}
                    confettiSource={{ x: 0, y: 0, w: width, h: 0 }}
                    gravity={0.2}
                />
            </div>
        </div>

    )
}
export default Timer