bug: SyntaxError: Cannot use import statement outside a module (@ionic/vue@next)

[kensodemann]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Unit tests in @ionic/vue error with the following:

 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run

    /home/kensodemann/Projects/Home/test-vue/node_modules/@ionic/core/components/ion-accordion.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at Object.<anonymous> (node_modules/@ionic/vue/dist/index.js:13:25)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.251s, estimated 4s
Ran all test suites.

Expected Behavior

The tests not to fail...

Steps to Reproduce

1. ionic start test-vue tabs --type=vue
2. cd test-vue
3. npm run test:unit -- this one works
4. npm i @ioinc/{vue,vue-router}@next
5. `npm run test:unit' -- now it fails with error noted

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.17.1 (/home/kensodemann/.nvm/versions/node/v16.11.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.0.0-rc.0

Capacitor:

   Capacitor CLI      : 3.2.5
   @capacitor/android : not installed
   @capacitor/core    : 3.2.5
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.3
   native-run  : 1.5.0

System:

   NodeJS : v16.11.1 (/home/kensodemann/.nvm/versions/node/v16.11.1/bin/node)
   npm    : 8.0.0
   OS     : Linux 5.11

Additional Information

Issue manifests with @ionic/vue and @ionic/react projects, but does not seem to affect @ionic/angular projects.

With React, the error is slightly different:

    Details:

    /home/kensodemann/Projects/Home/test-react/node_modules/@ionic/core/components/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/@ionic/react/dist/index.js:6:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.388 s, estimated 2 s
Ran all test suites.

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #24026.

[kensodemann]

Cool beans!

In the meantime, I found that the following change to the config fixed the issue for me:

diff --git a/jest.config.js b/jest.config.js
index 4cf9234..7d45aa1 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,5 +3,5 @@ module.exports = {
   transform: {
     '^.+\\.vue$': 'vue-jest'
   },
-  transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router)']
+  transformIgnorePatterns: ['/node_modules/(?!@ionic|@stencil)/']
 }

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.