# @kitware/vtk.js + Jest = Cannot use import statement outside a module

**URL:** https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012
**Category:** Web
**Created:** [June 17, 2021, 11:53am UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012 "2021-06-17T11:53:44Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![FezVrasta](https://discourse.vtk.org/user_avatar/discourse.vtk.org/fezvrasta/32/2692_2.png) [@FezVrasta](https://discourse.vtk.org/u/FezVrasta)
#### Post date: [June 17, 2021, 11:53am UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012/1 "2021-06-17T11:53:44Z")

</div>

Hi, I’m trying to write some Jest tests on a Create React App project, but when I try to import any @kitware/vtk.js module and run my Jest tests I get the following error:

> Cannot use import statement outside a module

I tried to add the node module to `transformIgnorePatterns`:

```
"transformIgnorePatterns": [
  "node_modules/(?!(@kitware)/)"
],

```

but it doesn’t seem to help at all (unlike it happens with other node modules that had the same issue).

Do you have any suggestion to use @kitware/vtk.js and Jest together?

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [June 18, 2021, 7:56pm UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012/2 "2021-06-18T19:56:26Z")

</div>

Does [this thread](https://discourse.vtk.org/t/how-to-tune-babel-loader-to-properly-import-a-module-named-macro-js-when-using-cra/5808) solve your issue?

---

<div class="post-metadata">

### Author: ![kit](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/k/9fc29f/32.png) [@kit](https://discourse.vtk.org/u/kit)
#### Post date: [January 27, 2025, 1:39pm UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012/3 "2025-01-27T13:39:58Z")

</div>

I am getting this error but adding type: ‘module’ to package.json does not seem to help. Should I be adding something else to the `jest.config.d`?

Error:

```auto
....

    Details:

    /host/node_modules/vtk.js/Sources/IO/XML/XMLImageDataReader/index.js:1
    ({"Object.<anonymous>":function(module,exports,require, __dirname,__ filename,jest){import vtkXMLReader from 'vtk.js/Sources/IO/XML/XMLReader';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 |
    > 2 | import vtkXMLImageDataReader from 'vtk.js/Sources/IO/XML/XMLImageDataReader';
        | ^

```

Test:

```auto
import vtkXMLImageDataReader from 'vtk.js/Sources/IO/XML/XMLImageDataReader';
test('mytest', done => {
  console.log('My test has been called')
  done();
});

```

`jest.config.js`

```auto
module.exports = {
    transform: {
      "^.+\\.jsx?$": "babel-jest"
    }
}

```

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [January 28, 2025, 3:11pm UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012/4 "2025-01-28T15:11:36Z")

</div>

Hi, you’ll need to add `vtk.js` to jest’s `transformIgnorePatterns`:

```auto
transformIgnorePatterns: [
  '/node_modules/(?!@kitware/vtk.js)'
]

```

> <https://github.com/Kitware/vtk-js/issues/2930>
>
> \### Bug description
> 
> I am writing tests on the vtk functions that I'm using, b…ut get errors when importing the tests. The issues do not arise when compiling and running it normally, which makes me think that its only related to jest. The error: 
> 
> \`\`\`
> /path/to/project/node\_modules/@kitware/vtk.js/Common/DataModel/Plane.js:1
> ({"Object.\<anonymous\>":function(module,exports,require,\_\_dirname,\_\_filename,jest){import \_defineProperty from '@babel/runtime/helpers/defineProperty';
> ^^^^^^
> 
> SyntaxError: Cannot use import statement outside a module
> 
> 6 | import { Matrix4 } from 'three';
> 7 | import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
> \> 8 | import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
> | ^
> 9 | import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
> 10 | import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
> 11 | //@ts-ignore
> 
> at Runtime.createScriptFromCode (node\_modules/jest-runtime/build/index.js:1728:14)
> \`\`\`
> 
> \### Steps to reproduce
> 
> Can be minimally reproduced with the following test: 
> \`\`\`
> import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
> describe('Dummy test', () =\> {
> beforeEach((done) =\> {
> jest.clearAllMocks();
> done();
> });
> test('Dummy test', () =\> {
> const \_plane = vtkPlane.newInstance();
> });
> });
> \`\`\`
> 
> \### Detailed Behavior
> 
> \-
> 
> \### Expected Behavior
> 
> \-
> 
> \### Environment
> 
> Package.json info:
> \- "@kitware/vtk.js": "^28.8.2"
> \- "babel-eslint": "^10.1.0"
> \- "babel-jest": "^24.0.0"
> \- "jest": "^27.5.1"
> 
> 
> OS: MacOS

---

<div class="post-metadata">

### Author: ![kit](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/k/9fc29f/32.png) [@kit](https://discourse.vtk.org/u/kit)
#### Post date: [January 28, 2025, 3:42pm UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012/5 "2025-01-28T15:42:33Z")

</div>

Hi, thanks for the suggestion however I am still getting the same error

_jest.config.js_

```auto
module.exports = {

    transform: {
      "^.+\\.jsx?$": "babel-jest",
    },
    transformIgnorePatterns: [
      '/node_modules/(?!@kitware/vtk.js)'
    ],
}

```

vtk.js is installed (using npm) under `node_modules/@kitware/vtk.js`. Is there something else I can check?

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [January 28, 2025, 4:10pm UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012/6 "2025-01-28T16:10:14Z")

</div>

Do you have a babel.config.js? This is more of an environment issue with jest.

---

<div class="post-metadata">

### Author: ![kit](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/k/9fc29f/32.png) [@kit](https://discourse.vtk.org/u/kit)
#### Post date: [January 28, 2025, 4:14pm UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012/7 "2025-01-28T16:14:33Z")

</div>

I have a _.bablerc_

```auto
{
  "presets":['@babel/preset-env'],
}

```

Thanks for your help. In case you have not guessed I am pretty new to `jest`

---

<div class="post-metadata">

### Author: ![kit](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/k/9fc29f/32.png) [@kit](https://discourse.vtk.org/u/kit)
#### Post date: [January 28, 2025, 4:30pm UTC](https://discourse.vtk.org/t/kitware-vtk-js-jest-cannot-use-import-statement-outside-a-module/6012/8 "2025-01-28T16:30:37Z")

</div>

**Update** I got it working with the following changes

1- Using the jsdom test environment, and importing using the full path

```auto
/**
 * @jest-environment jsdom
 */
import vtkXMLImageDataReader from '@kitware/vtk.js/IO/XML/XMLImageDataReader.js';

test('mytest', done => {
  console.log('My test has been called')
  done();
});

```

I could not get it to import from just `@kitware/vtk.js`

2- Changing `.babelrc` to `babel.config.json`.

I expect there is a better or more ellegant solution though.
