Setup with Vue Native Cli does not work

[ommehaz]

I am following the steps provided here -> https://vue-native.io/docs/installation.html The commands I am running:

1. npm install -g vue-native-cli
2. vue-native init myproject // Initializes crna project
3. cd myproject
4. npm install
5. npm start: 5a. starts metro bundler with text:

INFO 23:49 Starting Metro Bundler on port 19001. INFO 23:49 Metro Bundler ready.

6. I scan the Qr code with my iphone camera. 6.a expo app opens and the red screen with error on is there and my metro bundler writes:

ERROR 23:52 Unable to resolve "../../App" from "node_modules/expo/AppEntry.js" ERROR 23:52 Building JavaScript bundle: error

Content of my rn-cli.config.js (autogenerated):

---

module.exports = {
  getTransformModulePath() {
    return require.resolve("./vueTransformerPlugin.js");
  },
  getSourceExts() {
    return ["vue"];
  }
};

---

Content of my vueTransformerPlugin.js (autogenerated):

---

var semver = require('semver');
var vueNaiveScripts = require("vue-native-scripts");
var reactNativeVersionString = require("react-native/package.json").version;
var reactNativeMinorVersion = semver(reactNativeVersionString).minor;

if (reactNativeMinorVersion >= 56) {
  upstreamTransformer = require("metro/src/reactNativeTransformer");
} else if (reactNativeMinorVersion >= 52) {
  upstreamTransformer = require("metro/src/transformer");
} else if (reactNativeMinorVersion >= 47) {
  upstreamTransformer = require("metro-bundler/src/transformer");
} else if (reactNativeMinorVersion === 46) {
  upstreamTransformer = require("metro-bundler/build/transformer");
} else {
  // handle RN <= 0.45
  var oldUpstreamTransformer = require("react-native/packager/transformer");
  upstreamTransformer = {
    transform({ src, filename, options }) {
      return oldUpstreamTransformer.transform(src, filename, options);
    }
  };
}
var vueExtensions = ["vue"]; // <-- Add other extensions if needed.

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

---

Content of node_modules/expo/AppEntry.js:

---

import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);

---

My package.json file:

---

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^30.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "vue-native-core": "0.0.8",
    "vue-native-helper": "0.0.9"
  },
  "devDependencies": {
    "vue-native-scripts": "0.0.14"
  }
}

---

My computer is a macbook 15 from 2018 and my OS is macOS High Sierra version 10.13.6 What am I doing wrong?

[anekix]

experiencing the same issue. why is this happening?

[neeraj-singh47]

React-native-scripts has been deprecated. You'll have to add this line "packagerOpts": { "config": "rn-cli.config.js" } in app.json within expo object.

[neeraj-singh47]

We'll release a new vue-native-cli version containing the above fix

[neeraj-singh47]

Latest version of Vue Native Cli with the fix has been released. https://github.com/GeekyAnts/vue-native-cli/releases/tag/0.0.3

[zek]

React-native-scripts has been deprecated. You'll have to add this line "packagerOpts": { "config": "rn-cli.config.js" } in app.json within expo object.

Actually I followed everything but still I get same error.

[neeraj-singh47]

@zek Did you restart the app again?

[zek]

You mean in the simulator? Yes I did. Also I restarted expo.

[neeraj-singh47]

@zek Can you verify that you have a rn-cli.config.js file in root directory?

[zek]

Yes I have. I tried to switch vue-native from my existing project.

I can also confirm that If I put some error lines to vueTransformerPlugin.js it gives error also uses upstreamTransformer = require("metro/src/transformer"); this transformer. But I have no idea what happens after that

module.exports = {
  getTransformModulePath() {
    return require.resolve("./vueTransformerPlugin.js");
  },
  getSourceExts() {
    return ["vue"];
  }
};

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "connectycube-reactnative": "^1.3.3",
    "expo": "^30.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "vue-native-core": "0.0.8",
    "vue-native-helper": "0.0.9"
  },
  "devDependencies": {
    "vue-native-scripts": "0.0.14"
  }
}

var semver = require('semver');
var vueNaiveScripts = require("vue-native-scripts");
var reactNativeVersionString = require("react-native/package.json").version;
var reactNativeMinorVersion = semver(reactNativeVersionString).minor;

if (reactNativeMinorVersion >= 56) {
    upstreamTransformer = require("metro/src/reactNativeTransformer");
} else if (reactNativeMinorVersion >= 52) {
    upstreamTransformer = require("metro/src/transformer");
} else if (reactNativeMinorVersion >= 47) {
    upstreamTransformer = require("metro-bundler/src/transformer");
} else if (reactNativeMinorVersion === 46) {
    upstreamTransformer = require("metro-bundler/build/transformer");
} else {
    // handle RN <= 0.45
    var oldUpstreamTransformer = require("react-native/packager/transformer");
    upstreamTransformer = {
        transform({ src, filename, options }) {
            return oldUpstreamTransformer.transform(src, filename, options);
        }
    };
}
var vueExtensions = ["vue"]; // <-- Add other extensions if needed.

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

[neeraj-singh47]

@zek Do you already have an existing project? If yes then what is it based on?

[zek]

Just recently created react native project with connectycube.

npm install -g expo-cli
expo init AwesomeProject
cd AwesomeProject
npm install    ;this one is missed in RN guide
npm install connectycube-reactnative --save
cd node_modules/connectycube-reactnative/xmpp.js
make
cd ../../../
cp -r node_modules/connectycube-reactnative/xmpp.js/node_modules/* node_modules/

With these steps.

[neeraj-singh47]

@zek What exactly is the error? Can you post the screenshot?

[zek]

Same error what @ommehaz gets.

Unable to resolve "../../App" from "node_modules/expo/AppEntry.js"

I just deleted node_modules directory then run npm install

now it gives the error below

[neeraj-singh47]

@zek I assume you did the below steps again cd node_modules/connectycube-reactnative/xmpp.js make cd ../../../ cp -r node_modules/connectycube-reactnative/xmpp.js/node_modules/* node_modules/ as specified in connectycube

[zek]

yes without vue-native it works. But I wanna use vue-native and connectycube together.

[zek]

[AgainPsychoX]

I have same issue. :C

[guillaumeduhan]

Hello,

Same issue here. After following solutions above, couldn’t resolve this error : « Unable to resolve module App... ».

I removed node modules, uninstall and install again crna, Vue-native and even watchman from Facebook.

Error remain the same.

[gabfr]

@guillaumeduhan @PsychoXIVI Someone managed to get around this issue? I already tried the steps above and nothing worked

[minsulander]

+1 same issue here

[gabfr]

@guillaumeduhan @PsychoXIVI Someone managed to get around this issue? I already tried the steps above and nothing worked

Both methods: creating the project with the vue native cli, and also creating with the react native cli and then installing the vue-native packages result essentially in the same error

[neeraj-singh47]

Have you guys tried out https://github.com/GeekyAnts/vue-native-core/issues/101#issuecomment-437606353?

[jimwmg]

terriable and sad taking a whole day but solved nothing

[jimwmg]

you can try those to solve the problem; issue-resolve1 : The solution can resolve the problem of 'Unable to resolve "../../App" from "node_modules\expo\AppEntry.js"';but result in css not work;

issue-resolve2: this solution take the issue perfectly

[guillaumeduhan]

hello @gabfr no solution founded and tried everything before

[guillaumeduhan]

Hello @zek you succeed by changing app.vue in app.js and again in app.vue by refreshing? Or restart server?

[manusiakemos]

still waiting

[neeraj-singh47]

There's a problem with latest version of expo. We'll release a fix soon.

[ibudisteanu]

I was looking to move from React Native to Vue-Native, but I am having the same issue. I tried the installation setup and then I encountered a blank screen and I can't open the demo app with tabs.

[manusiakemos]

yo what's up

[leoneed96]

There's a problem with latest version of expo. We'll release a fix soon.

that's awesome, but how long? And is there any hot local fix?

[croossin]

@neeraj-singh47 Any updates on the fix?

[croossin]

I was able to easily fix the issue locally with this response.

[guillaumeduhan]

@croossin Hello friend, I am going to try it soon. Tell you if it's working for me

[guillaumeduhan]

Okay everybody, @croossin had the solution before here.

[manusiakemos]

let's try

[ProjectInfinity]

This is still a problem.

[hkvega01]

I have same problem but i can't resolve that

[milgron]

Still the same problem here.

[jjmahe]

yes, I confirm, still the same issue, with a fresh expo and vue-native install. neither blank or tabs default apps work. did the rm things, no joy. I don't want to touch config files as I don't want to do what I don't understand. should work as per instructions from the install scripts themselves.

[jjmahe]

in fact when trying the expo build:os it says that it is not looking for App.vue ! that is a pity when trying a vue-native build!

[moneil868]

Has there been any progress on a fix for this?

[Ciphr7]

My project install and ran correctly after I installed yarn, I hope this helps someone.