question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Source maps for vue2 SFCs using TS are not created/wrongly created for v28

See original GitHub issue

After upgrading to Jest v28 SFCs that are using TypeScript and the Composition-API plugin for Vue2 are producing a weird error:

FAIL  ***/FormDateInput.spec.ts
  ● Test suite failed to run

    No element indexed by 61

      4 | import Vue from 'vue';
      5 |
    > 6 | import FormDateInput from './FormDateInput.vue';
        | ^
      7 |
      8 | const localVue = createLocalVue();
      9 |

      at ArraySet_at [as at] (node_modules/source-map/lib/array-set.js:92:9)
      at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (node_modules/source-map/lib/source-map-consumer.js:626:30)
      at node_modules/@vue/vue2-jest/lib/generate-source-map.js:29:28
          at Array.forEach (<anonymous>)
      at generateSourceMap (node_modules/@vue/vue2-jest/lib/generate-source-map.js:26:38)
      at Object.module.exports [as process] (node_modules/@vue/vue2-jest/lib/process.js:129:15)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:822:19)
      at Object.<anonymous> (***/FormDateInput.spec.ts:6:1)

It seems to me, that vue2-jest cannot produce source-maps or creates them i a way that is not consumable by the underlying source-map lib.

Relevant packages installed in a node 16 environment with npm 8 are:

  • @vue/vue2-jest”: “^28.0.0”
  • “jest”: “^28.1.0”
  • “ts-jest”: “^28.0.2”
  • “typescript”: “^4.6.3”

I know that these version do not match exactly, but it makes no difference: Even if i downgrade all to exactly v28.0.0 it does not work

The transformers property lists @vue/vue2-jest correctly for transforming vue files, which also worked for vue-jest v27 and jest 27. I have also tried to include the full path in node modules like <rootDir>/node_modules/@vue/vue2-jest, but without success.

  transform: {
    '.*\\.(vue)$': '@vue/vue2-jest',
    '.*\\.(js)$': 'babel-jest',
    '.*\\.(ts)$': 'ts-jest',
  },

Unfortunatly i cannot include a repo link since its proprietary software.

Am i missing something in the way to upgrade to jest v28 or is this a bug?

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:15 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
gbenson-ffcommented, May 25, 2022

I’m getting similar errors in a project using Vue 3 SFCs and Typescript

Read more comments on GitHub >

github_iconTop Results From Across the Web

Component .vue.s sourcemap file not generating
I set "sourceMap": true in the tsconfig.js. When running serve it does generate JavaScript source map for *.ts files. But the *.vue component, ......
Read more >
Vue + TypeScript & Debuggers - ckh|Consulting
Configuring debuggers to work with Vue + TypeScript is not easy. ... Create a Project; Configure Vue/Webpack; Source Maps; Source Maps V3 ...
Read more >
Can't get sourcemaps to work properly, please help - Vue Forum
Hi everyone. I have a problem with source-maps, my application compiles without an issue and works fine but I can't seem to get...
Read more >
使用TS的VUE2 SFC的源maps 不是为V28创建/错误创建的
Source maps for vue2 SFCs using TS are not created/wrongly created for v28升级到使用Typescript和Vue2的Coption-API插件的JEST V28 SFC之后, ...
Read more >
The joy that is Source Maps (with Vue.js and TypeScript)
For example, debugging my code using source maps. ... (and this is no joke) under: webpack-internal://node_modules/ts-loader/index.js!
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found