vue-native-core: Unable to resolve "../../App" from "node_modules\expo\AppEntry.js"

In console, I just run the following command: vue-native init <project name> And then, delete App.js file (App.vue file still exists)

npm list -g --depth=0

+-- @vue/cli@3.9.3
+-- @vue/cli-init@3.9.0
+-- create-react-native-app@2.0.2
+-- exp@57.2.1
+-- expo-cli@3.0.8
+-- node@11.4.0
+-- npm@6.10.0
+-- react-native-cli@2.0.1
+-- vue-native-cli@0.1.0
+-- webpack@4.29.6
`-- webpack-cli@3.3.0

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-web": "^0.11.4",
    "vue-native-core": "^0.1.0",
    "vue-native-helper": "^0.1.0",
    "vue-native-scripts": "0.0.16"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-preset-expo": "^6.0.0"
  },
  "private": true
}

Beacause I have problems with installation of vue-native-scripts v.0.1.0 (#182), I added them manually. vue-native-scripts@0.0.16 did not work correncly with RN v.0.59 (expo sdk 34)

In stack trace I see:

The module '../../App' could not be found from 'C:\\sample\\node_moudules\\expo\\AppEntry.js'. Indead, none of these files exist:
* 'C:\\sample\\App(.native||.android.expo.js|.native.expo.js|.expo.js|.android.expo.ts|.native.expo.ts|.expo.ts|.android.expo.tsx|.native.expo.tsx|.expo.tsx|.android.expo.json|.native.expo.json|.expo.json|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx

But why it’s don’t try to resolve module with vue extension?

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("./vueTransformerPlugin.js"),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      })
    },
    resolver: {
      sourceExts: [...sourceExts, "vue"]
    }
  };
})();

I spent about 3 days trying to solve this issue, but nothing found how to do this.

Repository

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 9
  • Comments: 46 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I managed to get newest vue native to work.

In app.json add “sourceExts”: [ “js”, “json”, “ts”, “tsx”, “jsx”, “vue”] Inside “packagerOpts”

image

Simply adding sourceExts in packagerOpts doesnot solve the issue. Its very frustating. vue-native-cli (v-0.1.0) expo-cli (v-3…0.9)

import App from '../../App.vue' I tried this and it worked. You have to change the path in the AppEntry.js.

Same.

With yarn I don’t have the vue-native-scripts installation issue.

But I’m also getting Unable to resolve “…/…/App” from “node_modules/expo/AppEntry.js” Failed building JavaScript bundle.

This is on a totally fresh cli init project

Having the same problem!

I’ve tried for some weeks and I can’t even start the clean project.

The last try was adding "sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"] to app.json file and returns the following error. (clean install)

Resume

UnhandledPromiseRejectionWarning: Error: Cannot find module ‘metro/src/reactNativeTransformer’

Cannot read property ‘transformFile’ of undefined Failed building JavaScript bundle.

Hello there, I don’t know if this gonna be helpful, but the latest functional configuration for me is:

package.json: { “react-native”: “https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz”, “expo”: “^32.0.0”, “react”: “16.5.0” }

app.json: “sdkVersion”: “32.0.0”,

Reference SDK 32: https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough/

With that configuration, I was able to compile a new app created with the latest vue-native CLI. Sorry about my English :c, have a good day.

This is a huge error. We can’t even init a new project, so the package is essentially unusable at this version.

@damferreyra
That actually worked. I am now able to script in App.vue after using the @zyxel648 solution and downgrading ‘vue-native-scripts’ to 0.0.16. Great stuff, thanks.

I’ve tried for some weeks and I can’t even start the clean project.

The last try was adding "sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"] to app.json file and returns the following error. (clean install)

Resume

UnhandledPromiseRejectionWarning: Error: Cannot find module ‘metro/src/reactNativeTransformer’

Cannot read property ‘transformFile’ of undefined Failed building JavaScript bundle.

UPDATE: Mixing the solution of @damferreyra and @zyxel648 made it work. Thanks guys.

In app.json add “sourceExts”: [ “js”, “json”, “ts”, “tsx”, “jsx”, “vue”] Inside “packagerOpts”

As mentioned by @Shrekie. Thanks 👍

Same here, I’m guessing it may have something to do with the new version of vue-native-cli that went live 4 days ago.