packagerOpts no longer used in expo app.json

[trajano]

Description of the bug

The app.json/app.config.js no longer describes the use of packagerOpts which is noted here https://github.com/GeekyAnts/vue-native-core/blame/master/converting-react-native-project.md#L63.

Is the process to support migrating an existing react-native app to use vue-native supposed to work with thee current versions of Expo?

To Reproduce

n/a

What I expected

I would be able to find the instructions to migrate an expo app to use vue-native. However, the instructions link to https://vue-native.io/docs/installation.html#modifying-app-json which does not exist.

Instead I have to look for the source to see where it is documented and found it here https://github.com/GeekyAnts/vue-native-core/blame/master/converting-react-native-project.md

Screenshots

n/a

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

no

Am I using Expo? yes

Development platform (please complete the following information):

• OS: Windows and macOS
• Shell/terminal: Git Bash

The device on which I run my Vue Native app

• Device:Android, iOS
• OS: iOS 14 Android Q

Additional context

I have an existing Expo app written in React Native. I am exploring the notion of migrating to vue-native and have a common toolset for both web and mobile devices.

[trajano]

Instead you just need to remove any notion of that, and I combined what you had for the metro.config.js with the expo metro.config.js customization

const { getDefaultConfig } = require('@expo/metro-config');

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

In which case in my app I was able to add a Vue component as a React Native component giving me an interop. So I don't have to abandon my whole project just to use vue-native.

[trajano]

I tweaked it even more to get rid of the async/await nd it appears to work with this...

const { getDefaultConfig } = require("@expo/metro-config");
const config = getDefaultConfig(__dirname);
config.transformer = {
  babelTransformerPath: require.resolve("./vueTransformerPlugin.js"),
  getTransformOptions: () => ({
    transform: {
      experimentalImportSupport: false,
      inlineRequires: false,
    },
  }),
};
config.resolver.sourceExts.push("vue");
module.exports = config;

[mawlicious]

What @trajano said is completely correct in the installation of Vue Native, however I see it doesn't answer your question. For the packerOpts part of migrating a project to Vue Native, you're not supposed to do that step anymore. If you just ignore it you would be just fine!