Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SyntaxError: Cannot use import statement outside a module #2178

Closed
wschaef opened this issue Feb 3, 2020 · 12 comments
Closed

SyntaxError: Cannot use import statement outside a module #2178

wschaef opened this issue Feb 3, 2020 · 12 comments
Labels

Comments

@wschaef
Copy link

wschaef commented Feb 3, 2020

Stencil version:

 @stencil/core@1.8.6

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

@ionitron-bot ionitron-bot bot added the triage label Feb 3, 2020
@chrisdarroch
Copy link
Contributor

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.

chrisdarroch added a commit to chrisdarroch/stencil that referenced this issue Jul 7, 2020
chrisdarroch added a commit to chrisdarroch/stencil that referenced this issue Jul 7, 2020
chrisdarroch added a commit to chrisdarroch/stencil that referenced this issue Jul 7, 2020
chrisdarroch added a commit to chrisdarroch/stencil that referenced this issue Jul 7, 2020
@Shirinrpatel-zz
Copy link

Shirinrpatel-zz commented Jul 15, 2020

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

@raind33
Copy link

raind33 commented Jul 22, 2020

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
Copy link

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

@glenveegee
Copy link

glenveegee commented Jul 31, 2020

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 rollup@2.23.0 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
Copy link

glenveegee commented Jul 31, 2020

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
Copy link

chiyema commented Dec 4, 2020

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
Copy link

chavlji commented Dec 23, 2020

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
Copy link

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
Copy link

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
Copy link

CalinaCristian commented Oct 24, 2022

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests