SyntaxError: Cannot use import statement outside a module

[wschaef]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
I'm using a lib named Elix (https://component.kitchen/elix) and it works for npm start.
But I get an ERROR on npm-test:

 SyntaxError: Cannot use import statement outside a module

      2 | import { Model, Data, Element, Relation } from '../../global/model/index';
      3 | import { MatchResults, RouterHistory } from '@stencil/router';
    > 4 | import 'elix/define/Tabs'
        | ^
      5 | 
      6 | 
      7 | @Component({

sformer.js:537:17)
      at ScriptTransformer.transform (xxxxxx/node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/app-home/app-home.tsx:4:1)

Expected behavior:
npm test doesn't fail

Steps to reproduce:
Create Stencil a default Project with "npm init stencil" and select app
Related code:

npm install elix

add to any of stencil component. E.g. app-home
import 'elix/define/Tabs'

run npm test

// insert any relevant code here

Other information:
I've searched throught stenciljs and jest documentation and tried to solve it by adding

  testing: {
    transformIgnorePatterns: ["/node_modules/", "/node_modules/elix/.*"]
  }

to stencil.config.ts

[chrisdarroch]

I've been running in to this one, too.

Jest doesn't work with ES modules (see jestjs/jest#9292, jestjs/jest#9622, and jestjs/jest#8751), so at the moment, it will bail on any code it encounters with an import statement inside it.

From what I can gather, Stencil is compiling the Typescript component file, then passing that code to Jest. What seems to be going wrong is that dependencies of the component file are not transpiled, so any import statements in those will cause the test to bail.

In theory, if the spec tests were to use the full CJS output for a given component, it would work. In practice, I'm not sure what needs to change. It doesn't seem like something fixable just by changing the jest parameters... but maybe I'm missing something.

[Shirinrpatel-zz]

I am facing same issue currently. Can you please suggest any workaround or fix for this? Thanks

[raind33]

I am facing same issue currently. Can you please suggest any workaround or fix for this? Thanks

Me too! I am seeing the same question

[Kiliandeca]

Hi @shirinrpatel @raind33, maybe this can help you jestjs/jest#9395 (comment)

[glenveegee]

I'm running into this issue too.

It started happening in 1.17.0 (fine in 1.16.5) which points to the upgrade of [email protected] as the smoking gun. In my case, one of my stencil components imports the graphql package. Testing my stencil component fails. Looking a graphql contents, all its modules have been compiled to js but all the folders contain both a transformed .js and an untransformed .mjs. Jest fails when testing my stencil component because it tries to import the .mjs files which are untransformed. It breaks because these are not being transformed by jest.

If I rm -r node_modules/**/*.mjs then the jest passes so this suggests .mjs files are being imported in preference to .js

I haven't yet found a way to coerce jest to compile the .mjs files that it clearly prefers

[glenveegee]

I've found a fix that works for me although this only became an issue after upgrading to 1.17.x.

So if you're on 1.17.x and you're getting this issue when running jest test you should be able to work around the issue by adding the following moduleFileExtensions setting to your stencil config in the testing block as follows:

  testing: {
    ...
    moduleFileExtensions: [
      'ts',
      'tsx',
      'js',
      'mjs',
      'jsx',
      'json',
      'd.ts'
    ]
  }

[chiyema]

Hi @shirinrpatel @raind33, maybe this can help you facebook/jest#9395 (comment)

Thanks @Kiliandeca. It was working for me by adding something like

testing: {
    transform: {
      "^.+\\.jsx?$": "babel-jest"
    },
    transformIgnorePatterns: [
      "node_modules/(?!(DEPENDENCY_NEED_TO_BE_TRANSFROMED)/)"
  ],

[chavlji]

We're facing the same problems. Any import outside component's *.ts file makes Jest tests failing.

Any working solution or at least a workaround?

[paulcpederson]

Just for those that may arrive at this page in the future. I was getting this error because somehow a whole bunch of compiled JS files got left in my source. So the tests were running on the TS file (working) and then on the generated JS file which threw this error.

Solution was to remove generated js files (something like rm src/components/*/*.js). Hope this may help some other poor soul!

[mecanos28]

Having the same issue. Have tried adding all the possible permutations of below code and it has not worked. (adding in stencil.config.ts)

testing: {
    transform: {
      '^.+\\.jsx?$': 'babel-jest',
    },
    transformIgnorePatterns: [
      // eslint-disable-next-line max-len
      '/node_modules/(?!(@amzn/katal-components/|@katal/react/|@babel/runtime/helpers/esm/|lit-element|lit-html/)/)',
    ],
  },

[CalinaCristian]

A solution that worked for me was to add this in stencil.config.ts:
You use the jest-preprocessor as per the docs specify, and you exclude the modules that are exported as ESM from the ignore pattern so it does it on them as well (initially tried babel-jest and ts-jest but I had other issues from using those solutions).

// Can simply extend the list if we ever consume more esModules.
const esModules = [
    // dependencies of esm packages
].join('|');

export const config: Config = {
    //...
    transform: {
        '^.+\\.(ts|tsx|js|jsx|css)$': "@stencil/core/testing/jest-preprocessor"
    },
    transformIgnorePatterns: [`/node_modules/(?!${esModules})`],

[christian-bromann]

Let's consolidate this effort to enable support for ESM in Stencil unit tests within #3230. Thanks for all your comments.