Fresh install does not work without Yarn

[trajano]

Description of the bug
I followed the guide in https://vue-native.io/docs/installation.html#For-Expo-users

To Reproduce
Steps to reproduce the behavior:

1. vue-native init learn-vn
2. cd learn-vn
3. npm start
4. Scan QR code (though the error occurs before)

What I expected
App to appear on expo

Screenshots

Did I use vue-native-cli to create the project?
Yes

Am I using Expo?
Yes

• If you created your project with vue-native init <projectName> then yes
• If you used vue-native init <projectName> --no-expo, then no

Development platform (please complete the following information):

• OS: Windows 10
• Shell/terminal:: git bash
• no Yarn

❯ expo --version
4.7.3

❯ npm --version
6.14.4

❯ node --version
v12.18.0

The device on which I run my Vue Native app

• Device: iPhone SE 2020
• OS: iOS 14

[trajano]

Did a similar process on macOS (note yarn is installed on mac) and it has no issues

[trajano]

Here's the version from Windows https://github.com/trajano/learn-vn/tree/windows-no-yarn

[trajano]

I installed

❯ yarn --version
1.22.10

And redid the process and it works. https://github.com/trajano/learn-vn/tree/windows-with-yarn

Short of the lock file differences and minor version indicator differences in package.json

diff --git a/package.json b/package.json
index 87d1e78..69a8089 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,12 @@
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
     "react-native-web": "~0.13.12",
-    "vue-native-core": "^0.3.1",
-    "vue-native-helper": "^0.3.1"
+    "vue-native-core": "0.3.1",
+    "vue-native-helper": "0.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "vue-native-scripts": "^0.3.1"
+    "@babel/core": "7.0.0",
+    "vue-native-scripts": "0.3.1"
   },
   "private": true
 }

I don't see any other differences as to why one would work but not the other.

[RishabhKarnad]

This seems to be a duplicate of GeekyAnts/vue-native-core#317

The error is caused by the semver package which is used by the vueTransformerPlugin.js file in the project root. The part of the code which uses semver is actually obsolete. So the file contents can be replaced with the following code to fix the error:

const vueNativeScripts = require("vue-native-scripts");

const upstreamTransformer = require("metro-react-native-babel-transformer");

const vueExtensions = ["vue"]; // <-- Add other extensions if needed.

module.exports.transform = function ({ src, filename, options }) {
  if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
    return vueNativeScripts.transform({ src, filename, options });
  }
  return upstreamTransformer.transform({ src, filename, options });
};

You may need to clear the Expo cache before running the app again.

expo r -c

[trajano]

Will this be released soon

[RishabhKarnad]

This has been released with v0.3.0

You can also manually edit the file in an existing project to fix the error