vue-native-core: Setup with Vue Native Cli does not work

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.

  1. 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?

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 13
  • Comments: 43 (17 by maintainers)

Most upvoted comments

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

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

@neeraj-singh47 Any updates on the fix?

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.

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

I have same issue. :C

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

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