HiveBrain v1.2.0
Get Started
← Back to all entries
debugtypescriptCritical

Jest won't transform the module - SyntaxError: Cannot use import statement outside a module

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
syntaxerrorwonmodulestatementjestusethetransformcannotoutside

Problem

I couldn't get rid of this SyntaxError: Cannot use import statement outside a module error no matter what I have tried and it got so frustrating. Is there anybody out here solved this issue? I have read a million stackoverflow and github issue threads. No clear solutions.

This is a React, Typescript, Webpack project. I am trying to test a module. But Jest won't transform the module to plain javascript somehow.

The error I get is

/Users/me/dev/Project/project/node_modules/variables/src/variables.js:12
    import './main.js';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      17 | 
      18 | */
    > 19 | import { GlobalVars } from 'variables'
         | ^
      20 | 
      21 | export const Vars = new GlobalVars()
      22 |


What I have tried to solve this (and didn't work):

-
Using env setup in babel.config: env.test.preset: ['@babel/plugin-transform-modules-commonjs']

-
modifying transform setup in Jest configuration as '^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': 'ts-jest' and all other possibilities around this.

-
In Jest configuration, testPathIgnorePatterns, transformIgnorePatterns

-
Using .babel.config.js instead of .babelrc.js

...and more.

I have this setup:

package.json

"jest": {
    "preset": "ts-jest",
    "testEnvironment": "node"
  }


.babelrc.js

module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-react',
'@babel/preset-typescript',
],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/proposal-class-properties',
'@babel/transform-regenerator',
'@babel/plugin-transform-template-literals',
'react-hot-loader/babel',
],
}


variables.ts

import { GlobalVars } from 'variables'

export const Vars = new GlobalVars()


variables.spec.ts

`import { Vars } from './variables.ts'

describe('Test The Package', () => {
it('Should accept new variables', () => {
Vars.newVariable = 'new

Solution

Even though I have tried them separately, I haven't tried them together (transform and transformIgnorePatterns). So this jest configuration solved my issue:

"jest": {
    "preset": "ts-jest",
    "testEnvironment": "node",
    "transform": {
      "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!variables/.*)"
    ]
  },


My mistakes were:

  • Not using transform and transformIgnorePatterns together.



  • And defining babel-jest as the transformer instead of ts-jest (I guess that is a problem when the preset of jest is defined as ts-jest. Because if I change it to be babel-jest it throws the same error again.):



--- "node_modules/variables/.+\\.(j|t)sx?$": "babel-jest"
+++ "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"

Code Snippets

"jest": {
    "preset": "ts-jest",
    "testEnvironment": "node",
    "transform": {
      "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!variables/.*)"
    ]
  },
--- "node_modules/variables/.+\\.(j|t)sx?$": "babel-jest"
+++ "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"

Context

Stack Overflow Q#61781271, score: 124

Revisions (0)

No revisions yet.