title: How do I fix SyntaxError: Cannot use import statement outside a module using Jest?
body: <p>I have tried just about every single tutorial and approach to get Jest to recognize import statements. However, I cannot find a working solution in 2021.</p>
  <p>Things I have tried:</p>
  <ul>
  <li>All of the advice from <a href="https://stackoverflow.com/questions/35756479/does-jest-support-es6-import-export">this</a> stack overflow post</li>
  <li>Jest's documentation page on this <a href="https://jestjs.io/docs/ecmascript-modules" rel="nofollow noreferrer">here</a></li>
  <li>Babel's documentation page on configuring Jest <a href="https://babeljs.io/setup#installation" rel="nofollow noreferrer">here</a></li>
  </ul>
  <p>Here is my current layout. I have tried many others as well.</p>
  <p>Error message:</p>
  <pre class="lang-sh prettyprint-override"><code>  
      /Users/lukeanglin/Desktop/Convene/frontend/convene/node_modules/expo-secure-store/build/SecureStore.js:1
      ({&quot;Object.&lt;anonymous&gt;&quot;:function(module,exports,require,__dirname,__filename,jest){import { UnavailabilityError } from 'expo-modules-core';
                                                                                        ^^^^^^
  
      SyntaxError: Cannot use import statement outside a module
  
        1 | import { LOGIN_URL } from '../config/globals';
        2 | import { LOG } from '../config/logger-conf';
      &gt; 3 | import * as SecureStore from 'expo-secure-store';
          | ^
        4 | import axios from 'axios';
        5 | export async function login(email, password) {
        6 |   // Returns true if login succeeds and false on fail (also logs error message)
                                                                                        ^^^^^^
  
      SyntaxError: Cannot use import statement outside a module
  
        1 | import { LOGIN_URL } from '../config/globals';
        2 | import { LOG } from '../config/logger-conf';
      &gt; 3 | import { SecureStore } from 'expo-secure-store';
          | ^
  </code></pre>
  <p>babel.config.json</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;presets&quot;: [&quot;@babel/preset-env&quot;]
  }
  
  </code></pre>
  <p>package.json</p>
  <pre class="lang-json prettyprint-override"><code>// stuff here 
  &quot;type&quot;: &quot;module&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;expo start&quot;,
      &quot;android&quot;: &quot;expo start --android&quot;,
      &quot;ios&quot;: &quot;expo start --ios&quot;,
      &quot;web&quot;: &quot;expo start --web&quot;,
      &quot;eject&quot;: &quot;expo eject&quot;,
      &quot;lint&quot;: &quot;eslint .&quot;,
      &quot;lint:fix&quot;: &quot;eslint --fix&quot;,
      &quot;format&quot;: &quot;prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc&quot;,
      &quot;test&quot;: &quot;jest&quot;
    },
    &quot;jest&quot;: {
      &quot;transform&quot;: {
        &quot;^.+\\.[t|j]sx?$&quot;: &quot;babel-jest&quot;
      }
  },
  // stuff here
  </code></pre>
  <p>Steps to reproduce:</p>
  <ul>
  <li>Create an expo project</li>
  <li>Install Jest and babel, and expo-secure-store</li>
  <li>Attempt to import SecureStore</li>
  <li>Right a function doing something with the file that attempts to import SecureStore</li>
  </ul>
  <p>Additionally, the entire content of the file that causes the error on the import is here:</p>
  <p>login.js</p>
  <pre class="lang-js prettyprint-override"><code>import { LOGIN_URL } from '../config/globals';
  import { LOG } from '../config/logger-conf';
  import * as SecureStore from 'expo-secure-store';
  import axios from 'axios';
  export async function login(email, password) {
    // Returns true if login succeeds and false on fail (also logs error message)
    try {
      const response = await axios.post(LOGIN_URL, {
        username: email,
        password: password
      });
      // Save the token
      const token = response['data']['token']
      await SecureStore.setItemAsync('token', token);
      return true;
    } catch (error) {
      LOG.error(
        'Error on GET request to login for authentication OR error on storing token with SecureStore: \n' +
          error
      );
      return false;
    }
  }
  </code></pre>
  <p>and the test tests the function <code>login</code>.</p>
  <p>Anyone with working configurations of Jest and Babel to make ES6 modules like SecureStore functional (and import statements, exports, etc.) who can help me, I will greatly appreciate you!</p>
  <p><strong>TLDR</strong> - How do I fix <code>SyntaxError: Cannot use import statement outside a module</code> using Jest?</p>