0

Why do I keep getting error message "SyntaxError: Cannot use import statement outside a module" when I use Babel and Jest?

I have a super simple app that contains two modules:

// moduleTwo.mjs:

let testFuncOneModTwo = () => {
    return ('String generated by fn in moduleTwo.mjs')
                              }
    
    export {testFuncOneModTwo } 

/////////////

// moduleOne.mjs:

import {testFuncOneModTwo} from './moduleTwo.mjs'

let testFuncOneModOne = () => {
    return (testFuncOneModTwo())
                              }

 export { testFuncOneModOne }

//////////////

Here's my Jest test file:

// myTest.test.js:

import * as myImports from './moduleOne.mjs';

test('tests fn in module that calls fn in another module.', () => {
          expect(myImports.testFuncOneModOne()).toEqual( 'String generated by fn in
                                        moduleTwo.mjs' );
    });

/////////////

// babel.config.json:

{
  "presets": ["@babel/preset-env"]
}

// package.json:

{
  "name": "JestIsVeryTesting",
  "version": "1.0.0",
  "description": "",
  "main": "moduleOne.mjs",


  "scripts": {
    "test": "jest --coverage "
             },
  "jest": {
    "transform": {
      "^.+\\.js?$": "babel-jest"
                 }
          },

  "dependencies": {
    "@babel/runtime": "^7.18.6"
                  },

  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "babel": "^6.23.0",
    "babel-jest": "^28.1.2",
    "jest": "^28.1.2"
                    }

    }

// The error message (edited by me):

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file.   ...

...
...

 Details:

    /xxx/xxx/xxx/xxx/moduleOne.mjs:91
    import { testFuncOneModTwo } from './moduleTwo.mjs';
    ^^^^^^


 SyntaxError: Cannot use import statement outside a module

      1 | 
    > 2 | import * as myImports from './moduleOne.mjs';
        | ^
      3 |
      4 | test('tests fn in module that calls fn in another module.', () => {
      5 |           expect(myImports.testFuncOneModOne()).toEqual( 'This string returned by a function in moduleTwo.mjs' );

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
      at Object.<anonymous> (myTest.test.js:2:1)

Help would be much appreciated as this is driving me mad.

alienCred
  • 47
  • 1
  • 7
  • Where are you using babel? – Slava Knyazev Jul 09 '22 at 20:09
  • I'm using babel-jest to transpile the code. babel-jest is built into Jest. Here's what the Jest docs say: "babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project ..." I have a Babel config file, so babel-jest should read it and transpile the code when I run Jest :) – alienCred Jul 09 '22 at 20:16
  • I forgot to add "import {testFuncOneModTwo} from './moduleTwo.mjs'" at the top of moduleOne.mjs. I have now added that line. Now Jest throws the error: Details: /xxx/xxxx/xxxx/xxxxx/moduleOne.mjs:91 import { testFuncOneModTwo } from './moduleTwo.mjs'; ^^^^^^ SyntaxError: Cannot use import statement outside a module 1 | // > 2 | import * as myImports from './moduleOne.mjs'; – alienCred Jul 09 '22 at 20:35
  • You can [edit] your post. – ggorlen Jul 09 '22 at 21:23
  • Does this answer your question? [SyntaxError: Cannot use import statement outside a module](https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module) – ggorlen Jul 09 '22 at 21:23
  • sadly, no, it does not answer my question. I have now added "type" : "module" to the package.json file and my javascript modules already had the '.mjs' extension but I still get the same error message :) – alienCred Jul 09 '22 at 21:54

1 Answers1

0

In case anyone is interested I solved the problem myself in the end:

  1. To the top level of the package.json file I added:
"type": "module"

This tells node that all files in the project that end with '.js' are ES6 files

  1. I changed the extensions of my modules to '.js' (so that 'moduleOne.mjs' became 'moduleOne.js' and 'moduleTwo.mjs' became 'moduleTwo.js'

) This is in keeping with the value of the package.json file's "jest" field, which has value:

"transform": {
      "^.+\\.js?$": "babel-jest"
                 }
alienCred
  • 47
  • 1
  • 7