title: React Chrome extension error: Uncaught SyntaxError: Cannot use import statement outside a module
body: <p>I want to run a react file in the <code>background.js</code> but I keep getting the following error <code>Uncaught SyntaxError: Cannot use import statement outside a module</code>.</p>
  <p>The react file <code>Timer.js</code> is a count down timer with user input which includes a number of libraries.</p>
  <p>I have tried add <code>type:module</code> to my <code>package.json</code> but that has not solved the problem for me either.</p>
  <p>Is there a way my <code>background.js</code> can be a react file that will continue to run in the background of my chrome extension?</p>
  <p>Timer.js</p>
  <pre><code>import React, { useState } from 'react'
  import { CountdownCircleTimer } from &quot;react-countdown-circle-timer&quot;;
  import Confetti from 'react-confetti'
  
  const Timer = (props) =&gt; {
      // 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 =&gt; prevKey + 1)
          setTime(false)
      }
  
      const renderTime = ({ remainingTime }) =&gt; {
  
          // 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(&quot;STILL RAN IN THE BACKGROUND AND FINSIHED &quot;)
              setFlag(1000)
              setTimeout(function () {
                  setRecycle(false)
              }, 2000);
              return &lt;div className=&quot;timer&quot;&gt;&lt;h2 id=&quot;timerText&quot;&gt;Well done!&lt;/h2&gt;&lt;/div&gt;;
          }
          setRecycle(true)
          setFlag(0)
          return (
              &lt;div &gt;
                  &lt;div className=&quot;value&quot;&gt;&lt;h2 id=&quot;timerText&quot;&gt;{result}&lt;/h2&gt;&lt;/div&gt;
              &lt;/div&gt;
          );
      };
  
      // 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(&quot;bonger&quot;)
          }
          var totalTime = hour + minute + second
          setValue(time = totalTime)
      }
  
    
      const width = window.innerWidth
      const height = window.innerHeight
  
      return (
          &lt;div&gt;
              &lt;div className=&quot;timerWrapper&quot; &gt;
                  &lt;br /&gt;
                  {
                      print ?
                          &lt;h1&gt;{userInput}&lt;/h1&gt;
                          : null
                  }
                  &lt;div className=&quot;timer-wrapper&quot; &gt;
                      &lt;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={&quot;#5d4192&quot;}
                          onComplete={() =&gt; [false, 1000]}
                          size={250}
                          strokeWidth={15}
                          strokeLinecap={&quot;round&quot;}
                          trailColor={'#000'}
                          isLinearGradient={false}
                      &gt;
                          {renderTime}
                      &lt;/CountdownCircleTimer&gt;
                      &lt;div className=&quot;test&quot;&gt;
                          &lt;div id=&quot;timeInput&quot;&gt;
                          &lt;p className=&quot;timeText&quot; id=&quot;hour&quot;&gt;Hours&lt;/p&gt;
                          &lt;p className=&quot;timeText&quot; id=&quot;minute&quot;&gt;Minutes&lt;/p&gt;
                          &lt;p className=&quot;timeText&quot; id=&quot;second&quot;&gt;Seconds&lt;/p&gt;
                              &lt;div id=&quot;hourWrapper&quot; className=&quot;timeUnitWrapper&quot;&gt;
                                  &lt;input id=&quot;hour&quot; onChange={userinput} maxLength=&quot;2&quot; type=&quot;text&quot; name=&quot;hour&quot; value={timerValue.hour}&gt;&lt;/input&gt;
                              &lt;/div&gt;
                              &lt;div id=&quot;minuteWrapper&quot; className=&quot;timeUnitWrapper&quot;&gt;
                                  &lt;input id=&quot;minute&quot; onChange={userinput} maxLength=&quot;2&quot; type=&quot;text&quot; name=&quot;minute&quot; value={timerValue.minute}&gt;&lt;/input&gt;
                              &lt;/div&gt;
                              &lt;div id=&quot;secondWrapper&quot; className=&quot;timeUnitWrapper&quot;&gt;
                                  &lt;input id=&quot;second&quot; onChange={userinput} maxLength=&quot;2&quot; type=&quot;text&quot; name=&quot;second&quot; value={timerValue.second}&gt;&lt;/input&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;buttonWrapper&quot;&gt;
                              &lt;button className=&quot;customButton&quot; id=&quot;set&quot; onClick={valueToTime}&gt;Set&lt;/button&gt;
                              &lt;button className=&quot;customButton&quot; id=&quot;play&quot; onClick={startTime}&gt;Start&lt;/button&gt;
                              &lt;button className=&quot;customButton&quot; id=&quot;pause&quot; onClick={stopTime}&gt;Pause&lt;/button&gt;
                              &lt;button className=&quot;customButton&quot; id=&quot;reset&quot; onClick={resetTime}&gt;Reset&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;wrapper&quot; &gt;
                  &lt;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}
                  /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      )
  }
  export default Timer
  </code></pre>