title: Import es6 module in chrome extension mv 3 background script with typescript
body: <p>I'm new at building a <strong>Chrome extension mv3</strong>. Now I'm creating an <strong>extension</strong> using <strong>Typescript</strong> as my main language. I've tried to import <strong>Es6 modules</strong>, but when I loaded the extension, Chrome says that &quot;<strong>Uncaught ReferenceError: exports is not defined</strong>&quot;.</p>
  <p>Here's my project structure</p>
  <pre><code>|   .babelrc
  |   manifest.json
  |   package.json
  |   tsconfig.json
  |   webpack.config.js
  |
  +---public
  |   +---html
  |   |       index.html
  |   |       popup.html
  |   |
  |   +---js
  |   |       background.d.ts
  |   |       background.js
  |   |       background.js.map
  |   |       background.utils.d.ts
  |   |       background.utils.js
  |   |       background.utils.js.map
  |   |       index.html
  |   |       main.js
  |   |       popup.d.ts
  |   |       popup.js
  |   |       popup.js.map
  |   |
  |   \---styles
  |           popup.css
  |
  \---src
      |   background.ts
      |   background.utils.ts
      |   popup.ts
      |
      \---@types
          \---background
                  index.d.ts
  </code></pre>
  <p>My manifest.json file:</p>
  <pre><code>{
    &quot;name&quot;: &quot;Getting Started Example&quot;,
    &quot;description&quot;: &quot;Build an Extension!&quot;,
    &quot;version&quot;: &quot;1.0&quot;,
    &quot;manifest_version&quot;: 3,
    &quot;background&quot;: {
      &quot;service_worker&quot;: &quot;./public/js/background.js&quot;,
      &quot;persitent&quot;: true
    },
    &quot;action&quot;: {
      &quot;default_popup&quot;: &quot;./public/html/popup.html&quot;
    },
    &quot;minimum_chrome_version&quot;: &quot;92&quot;,
    &quot;permissions&quot;: [
      &quot;management&quot;,
      &quot;scripting&quot;,
      &quot;activeTab&quot;,
      &quot;webRequest&quot;,
      &quot;tabs&quot;,
      &quot;webNavigation&quot;,
      &quot;storage&quot;
    ],
    &quot;content_scripts&quot;: [
      {
        &quot;matches&quot;: [
          &quot;*://*.nytimes.com/*&quot;
        ],
        &quot;js&quot;: [
          &quot;./public/js/popup.js&quot;
        ]
      }
    ]
  }
  </code></pre>
  <p>My tsconfig.json file:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es2016&quot;,                                  
      &quot;module&quot;: &quot;commonjs&quot;,                                
      &quot;typeRoots&quot;: [
        &quot;./node_modules/@types&quot;
      ],                                 
      &quot;sourceMap&quot;: true,                            
      &quot;outDir&quot;: &quot;./public/js&quot;,                      
      &quot;sourceRoot&quot;: &quot;./src&quot;,                        
      &quot;esModuleInterop&quot;: true,                      
      &quot;forceConsistentCasingInFileNames&quot;: true,     
      &quot;strict&quot;: true,                               
      &quot;skipLibCheck&quot;: true                          
    }
  }
  </code></pre>
  <p>In my background.utils.ts file:</p>
  <pre><code>const myFunction = ()=&gt;{}
  export default myFunction
  </code></pre>
  <p>In my background.ts file:</p>
  <pre><code>import myFunction from './background.utils/'
  </code></pre>
  <p>But Chromes says that export is not defined even though I've tried serveral methods on Internet like add &quot;type&quot;: &quot;module&quot; into the mainifest.json file or remote &quot;module&quot;:&quot;commonjs&quot; in tsconfig.json file.</p>
  <p>Do you guys have any idea why this happens?</p>
  <p>Looking forward to receiving you guys' answers</p>
  <p>Thank you so much.</p>