tsConsumer.originalPositionFor is not a function

[RohanTalip]

Hi,

I recently upgraded both Vue Native and React Native recently from these versions:

    "react-native": "0.60.0",
    "vue-native-core": "0.0.8",
    "vue-native-helper": "0.0.11",
    "vue-native-scripts": "0.0.16"

... to these versions:

    "react-native": "0.60.4",
    "vue-native-core": "0.1.0",
    "vue-native-helper": "0.1.0",
    "vue-native-scripts": "0.1.0"

I have both Live Reload and Hot Reloading enabled in the React Native developer menu.

When I edit a .vue file, I get this error in the terminal window that the Metro Bundler is running in:

error: bundling failed: TypeError: tsConsumer.originalPositionFor is not a function
    at $PATH_TO_MY_VUE_NATIVE_APP/node_modules/vue-native-scripts/build.js:511:38
    at Object.traverseFast ($PATH_TO_MY_VUE_NATIVE_APP/node_modules/babel-types/lib/index.js:744:3)
    at Function.traverse.cheap ($PATH_TO_MY_VUE_NATIVE_APP/node_modules/babel-traverse/lib/index.js:91:12)
    at sourceMapAstInPlace ($PATH_TO_MY_VUE_NATIVE_APP/node_modules/vue-native-scripts/build.js:509:14)
    at Object.transform ($PATH_TO_MY_VUE_NATIVE_APP/node_modules/vue-native-scripts/build.js:551:7)
    at Object.module.exports.transform ($PATH_TO_MY_VUE_NATIVE_APP/vueTransformerPlugin.js:30:29)
    at $PATH_TO_MY_VUE_NATIVE_APP/node_modules/metro/src/JSTransformer/worker.js:231:31
    at Generator.next (<anonymous>)
    at asyncGeneratorStep ($PATH_TO_MY_VUE_NATIVE_APP/node_modules/metro/src/JSTransformer/worker.js:75:24)

This error also shows up in the iPhone Simulator on my Mac. If I upgrade either Vue Native or React Native (but not both) to the latest versions above I don't seem to have this issue (i.e. I keep the older versions for the other set of packages).

Looking in vue-native-scripts/build.js around line 511, I see that tsConsumer is a SourceMapConsumer:

  var tsConsumer = new sourceMap.SourceMapConsumer(tsMap);

The patch release notes for React Native version 0.60.4 mention source maps!

I suspect that there's some incompatibility between React Native v0.60.4 and the latest versions of Vue Native in terms of source maps.

[RishabhKarnad]

Hi @RohanTalip.

I just created a new Vue Native project with the latest CLI and used react-native upgrade to upgrade to react-native@0.60.4. I can confirm that I am not facing this issue.

Are you facing this issue only with iOS?

source-map@0.7.3 is a dependency of vue-native-scripts@0.1.0. There is a possibility that it was not correctly installed when you upgraded. I would recommend the following actions

1. Run yarn list source-map or npm ls source-map depending on what you are using as the package manager. This should display

└─ vue-native-scripts@0.1.0
   └─ source-map@0.7.3

2. Delete your node_modules and run yarn or npm install once again.

[RohanTalip]

@RishabhKarnad, my existing project did pull in source-map@0.7.3 as a dependency of vue-native-scripts@0.1.0.

Are you facing this issue only with iOS?

Yes, but only because I'm not targeting Android with my Vue Native / React Native app (at present).

Reproducing the problem

I made sure that yarn global list showed vue-native-cli@0.1.0. I created a new Vue Native project and also ran react-native upgrade to upgrade to react-native@0.60.4. (I had to remove the RCTGeolocation library in Xcode to get the project to compile.)

I wasn't able to reproduce the problem just by editing the text (e.g. changing "My Vue Native App" to "My Vue Native App 123").

However, when I added a button with a method for the on-press event, I was able to reproduce it:

<template>
  <view class="container">
    <text class="text-color-primary">My Vue Native App</text>
    <button :on-press="pressed" title="Press me" />
  </view>
</template>

<script>
export default {
  methods: {
    pressed() {
      console.log("Pressed");
    },
  },
};
</script>

<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
</style>

Also, once my new test app gets into this state, it seems to get stuck there (even commenting out the button and the method doesn't get it back into a good state). This is also what I see in my main project.

[RohanTalip]

Actually, I was just able to reproduce this issue in a newly created Vue Native project without upgrading to react-native@0.60.4. i.e. yarn list react-native shows react-native@0.59.10.

I ran react-native run-ios and I again enabled both Live Reload and Hot Reloading in the React Native developer menu and added the button and method as shown above and ... I get this result:

Also, enabling Live Reload and Hot Reloading doesn't seem to matter for this issue (I was able to recreate this issue in a completely new Vue Native project without enabling Live Reload or Hot Reloading, and simply just reloaded the app via command-R).

[leitom]

I can confirm having these issues as well.
It appears when start using <script></script> in the .vue files.

[RishabhKarnad]

The problem occurs because of a change in source-map in which the SourceMapConsumer constructor was made asynchronous and returns a Promise. We will be releasing a fix for this soon.

[RohanTalip]

Thanks @RishabhKarnad!

[RishabhKarnad]

v0.1.1 has just been released! This issue should be fixed if you upgrade to this version

[ThePJMP]

@RishabhKarnad thanks for your fast answer. I'll test the new version.