vue-native-core
vue-native-core copied to clipboard
GeekyAnts
npm run web fails
I'm trying to run my app using the web variant. I'm getting this error when the app spins up. Ive tried to look through the expo-cli package to see if I could find anything and came up empty. I'm guessing that i'm missing a config somewhere.
Failed to compile.
C:/Users/smplman/AppData/Roaming/npm/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js
Error: Failed to load config "universe/node" to extend from.
Referenced from: BaseConfig
at _normalizeObjectConfigDataBody.next (<anonymous>)
at _normalizeObjectConfigData.next (<anonymous>)
Here is how I setup my app
vue-native init test-app
cd test-app
npm run web
I got similar output from a expo/react project when trying to spin up a web variant to. File that failed to compile was at /c/Users/{me}/sites/{project-name}/node_modules/expo/AppEntry.js
npm install --global [email protected] / yarn global add [email protected] for now
It does not work with expo-cli@3
Thanks for the feedback. I downgraded and now i'm getting this error.
Failed to compile.
/Users/smplman/projects/personal/arduino-menu/node_modules/expo/AppEntry.js
Cannot find file: 'App.json' does not match the corresponding name on disk: './app.json'.
I got past this error by setting up webpack, I'm sorry I didn't document what I did exactly, but hopefully this gets you moving in the right direction.
@icarter09 I blew away my test app, downgraded expo-cli and re ran vue-native init. After that I renamed app.json to App.json. Here is the error i'm getting now.
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ExpoRootComponent`.
▼ 32 stack frames were expanded.
invariant
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:55
createFiberFromTypeAndProps
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:10217
createFiberFromElement
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:10238
reconcileSingleElement
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:12531
reconcileChildFibers
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:12588
reconcileChildren
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:14402
finishClassComponent
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:14758
updateClassComponent
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:14696
beginWork
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:15644
performUnitOfWork
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:19312
workLoop
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:19352
HTMLUnknownElement.callCallback
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:149
invokeGuardedCallbackDev
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:199
invokeGuardedCallback
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:256
replayUnitOfWork
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:18578
renderRoot
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:19468
performWorkOnRoot
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20342
performWork
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20254
performSyncWork
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20228
requestWork
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20097
scheduleWork
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:19911
scheduleRootUpdate
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20572
updateContainerAtExpirationTime
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20600
updateContainer
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20657
ReactRoot.../../../../../../../../../projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20953
(anonymous function)
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:21090
unbatchedUpdates
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20459
legacyRenderSubtreeIntoContainer
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:21086
render
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:21155
renderApplication
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-native-web/dist/exports/AppRegistry/renderApplication.js:21
run
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-native-web/dist/exports/AppRegistry/index.js:49
Function.runApplication
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-native-web/dist/exports/AppRegistry/index.js:89
▲ 32 stack frames were expanded.
registerRootComponent
C:/Users/smplman/src/launch/registerRootComponent.web.tsx:15
12 | const RootComponent = (...props) => <App exp={{}} {...props} />;
13 | AppRegistry.registerComponent('main', () => RootComponent);
14 | const rootTag = document.getElementById('root') || document.getElementById('main');
> 15 | AppRegistry.runApplication('main', { rootTag });
16 | }
17 |
View compiled
Module.../../../../../../../../../projects/arduino-menu-vue-native/node_modules/expo/AppEntry.js
C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/expo/AppEntry.js:10
__webpack_require__
C:/Users/smplman/projects/arduino-menu-vue-native/webpack/bootstrap:724
721 | };
722 |
723 | // Execute the module function
> 724 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 725 |
726 | // Flag the module as loaded
727 | module.l = true;
View compiled
fn
C:/Users/smplman/projects/arduino-menu-vue-native/webpack/bootstrap:101
98 | );
99 | hotCurrentParents = [];
100 | }
> 101 | return __webpack_require__(request);
| ^ 102 | };
103 | var ObjectFactory = function ObjectFactory(name) {
104 | return {
View compiled
0
http://192.168.1.80:19006/static/js/bundle.js:114763:18
__webpack_require__
C:/Users/smplman/projects/arduino-menu-vue-native/webpack/bootstrap:724
721 | };
722 |
723 | // Execute the module function
> 724 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 725 |
726 | // Flag the module as loaded
727 | module.l = true;
View compiled
(anonymous function)
C:/Users/smplman/projects/arduino-menu-vue-native/webpack/bootstrap:791
788 |
789 |
790 | // Load entry module and return exports
> 791 | return hotCreateRequire(0)(__webpack_require__.s = 0);
| ^ 792 |
View compiled
(anonymous function)
http://192.168.1.80:19006/static/js/bundle.js:795:10
This seems to be happening 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. I'll need to have a closer look.
Also running into this issue when running 'expo start --web' (or 'npm run web')
would really appreciate an update for this as I'm looking to deploy an app with this as a web version first
Long story short, at the time, vue-native-cli does not work using web, only android and iOS.
Would really love to have this resolved so that the vue-native-cli can also be ran as a web app. Without this functionality, it is better just to use react-native and avoid vue-native-cli. This is a big deal for ease of development and should be addressed as soon as possible. Developers here have been complaining about this issue since the end of last year, and even though the geekyants devs are looking and closing issues pertaining to this(one being 3 days ago), we have no timeline of when it will be fixed.
Hey guys. The Vue Native team is a bit occupied with other things at the moment and this issue has been put on hold for now. Sorry that an update took so long.
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.
The above findings were also specifically for Expo, but once that's working, it should be possible to adapt it to bare React Native apps.
We could use your help or thoughts on this. In any case, it might be a while before web is supported.
I'm moving this issue back to core, since it is concerned with vue-native-scripts
Hi @RishabhKarnad , do you have any estimate if / when you guys can look into this? Would be very helpful to get this working.
@icarter09 I blew away my test app, downgraded expo-cli and re ran vue-native init. After that I renamed app.json to App.json. Here is the error i'm getting now.
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `ExpoRootComponent`. ▼ 32 stack frames were expanded. invariant C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:55 createFiberFromTypeAndProps C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:10217 createFiberFromElement C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:10238 reconcileSingleElement C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:12531 reconcileChildFibers C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:12588 reconcileChildren C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:14402 finishClassComponent C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:14758 updateClassComponent C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:14696 beginWork C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:15644 performUnitOfWork C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:19312 workLoop C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:19352 HTMLUnknownElement.callCallback C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:149 invokeGuardedCallbackDev C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:199 invokeGuardedCallback C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:256 replayUnitOfWork C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:18578 renderRoot C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:19468 performWorkOnRoot C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20342 performWork C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20254 performSyncWork C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20228 requestWork C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20097 scheduleWork C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:19911 scheduleRootUpdate C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20572 updateContainerAtExpirationTime C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20600 updateContainer C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20657 ReactRoot.../../../../../../../../../projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20953 (anonymous function) C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:21090 unbatchedUpdates C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:20459 legacyRenderSubtreeIntoContainer C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:21086 render C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-dom/cjs/react-dom.development.js:21155 renderApplication C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-native-web/dist/exports/AppRegistry/renderApplication.js:21 run C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-native-web/dist/exports/AppRegistry/index.js:49 Function.runApplication C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/react-native-web/dist/exports/AppRegistry/index.js:89 ▲ 32 stack frames were expanded. registerRootComponent C:/Users/smplman/src/launch/registerRootComponent.web.tsx:15 12 | const RootComponent = (...props) => <App exp={{}} {...props} />; 13 | AppRegistry.registerComponent('main', () => RootComponent); 14 | const rootTag = document.getElementById('root') || document.getElementById('main'); > 15 | AppRegistry.runApplication('main', { rootTag }); 16 | } 17 | View compiled Module.../../../../../../../../../projects/arduino-menu-vue-native/node_modules/expo/AppEntry.js C:/Users/smplman/projects/arduino-menu-vue-native/node_modules/expo/AppEntry.js:10 __webpack_require__ C:/Users/smplman/projects/arduino-menu-vue-native/webpack/bootstrap:724 721 | }; 722 | 723 | // Execute the module function > 724 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 725 | 726 | // Flag the module as loaded 727 | module.l = true; View compiled fn C:/Users/smplman/projects/arduino-menu-vue-native/webpack/bootstrap:101 98 | ); 99 | hotCurrentParents = []; 100 | } > 101 | return __webpack_require__(request); | ^ 102 | }; 103 | var ObjectFactory = function ObjectFactory(name) { 104 | return { View compiled 0 http://192.168.1.80:19006/static/js/bundle.js:114763:18 __webpack_require__ C:/Users/smplman/projects/arduino-menu-vue-native/webpack/bootstrap:724 721 | }; 722 | 723 | // Execute the module function > 724 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 725 | 726 | // Flag the module as loaded 727 | module.l = true; View compiled (anonymous function) C:/Users/smplman/projects/arduino-menu-vue-native/webpack/bootstrap:791 788 | 789 | 790 | // Load entry module and return exports > 791 | return hotCreateRequire(0)(__webpack_require__.s = 0); | ^ 792 | View compiled (anonymous function) http://192.168.1.80:19006/static/js/bundle.js:795:10
Quite sad, I'm trying to make it cross platform but even trying the solutions from the suggested issue won't make it work on web, it just works on mobile.
Hi guys are you sure this problem is solved after vue-scripts package added on devDependancies ? Im still having the same issue, I still have same error on fresh installed project I tried both windows and ubuntu OSs and getting same error yet.I also get the error on mobile but it fixes when I add babel core using yarn but npm not making it work properly.
/home/fuat/WebstormProjects/advocateV/node_modules/expo/AppEntry.js Module not found: Can't resolve '../../App' in '/home/fuat/WebstormProjects/advocateV/node_modules/expo'
If you check out the "readme-update" branch, there's a warning in the readme.
⚠️ This repository has been deprecated and is no longer maintained by the author ⚠️
I still wonder how an 8k stars project got deprecated. But I guess the only option, for now, is using NativeScript Vue.
@phiberber I wonder the same thing myself. I actually was interested in using vue-native for a project I already built for web only in Vue sometime ago. Didn't want to have to rebuild it in react, react native or flutter instead just reuse many of the Vue logic I already had. Decided to just use Cordova but might consider nativescript Vue if it supports web and native simultaneously.
Yes, it is very disappointing. In another issue, one of the developers says "This project is not in active development."
