Vue Native: Error when running in browser

1.2k views Asked by At

I've just created a new "vue native" project. I didn't change anything in the default blank app. I managed to run it on my android device, but impossible to run it on my browser.

I run "npm start" => "metro bundler" opens. Then I click on "Run in web browser" and I get the error below :

Error

Again, I didn't change anything. I just want to start the default app generated automatically when starting a new project.

Anyone already faced this problem? Thank you

1

There are 1 answers

1
onestepp On BEST ANSWER

"This is a known issue, and it seems running vue-native app in web is not possible at the moment, because AppEntry.js tries to import ../../App. The default packager configuration specifies .json as a valid file extension. For some reason, in web, Expo seems to be looking for App.json and ignores App.vue."

https://github.com/GeekyAnts/vue-native-core/issues/268

See the official statement from vue-native creators 2020 7th of July:

"On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.

On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.

From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet.On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.

On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.

From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet."

https://github.com/GeekyAnts/vue-native-core/issues/268#issuecomment-640222479

Good news that devices and on simulator running works with expo, and mostly vue-native was designed to run on mobile devices not on web :)

For the web you can have a similar codebase using vuejs.