search

GeekyAnts / vue-native-core

Vue Native is a framework to build cross platform native mobile apps using JavaScript
https://vue-native.io
MIT License
8.32k stars 298 forks source link

npm run web fails #268

Open smplman opened 5 years ago

smplman commented 5 years ago

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
da-mask commented 5 years ago

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

raduungurean commented 5 years ago

npm install --global expo-cli@2.21.2 / yarn global add expo-cli@2.21.2 for now

It does not work with expo-cli@3

smplman commented 5 years ago

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'.
da-mask commented 5 years ago

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 commented 5 years ago

@smp4488 are you still experiencing this issue?

smplman commented 5 years ago

@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
Nithinshetty1 commented 5 years ago

Anybody have solution for this, i am facing same issu like@smp4488

RishabhKarnad commented 5 years ago

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.

Saganic commented 4 years ago

Any news on this?

archagy commented 4 years ago

Same issue, can't run npm run web

cakpep commented 4 years ago

any news?

mi-constantin commented 4 years ago

any news ?

jmoussu commented 4 years ago

Same I will retry later with another version expo-cli@2.21.2

mivd7 commented 4 years ago

Also running into this issue when running 'expo start --web' (or 'npm run web')

mivd7 commented 4 years ago

would really appreciate an update for this as I'm looking to deploy an app with this as a web version first

rfink commented 4 years ago

Same issue

JohnKlein985 commented 4 years ago

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.

RishabhKarnad commented 4 years ago

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.

RishabhKarnad commented 4 years ago

I'm moving this issue back to core, since it is concerned with vue-native-scripts

Ossip commented 3 years ago

Hi @RishabhKarnad , do you have any estimate if / when you guys can look into this? Would be very helpful to get this working.

wiredmatt commented 3 years ago

@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.

boldness1 commented 3 years ago

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'

peckyboy commented 2 years ago

Still no solution to this? What a bummer.

phiberber commented 2 years ago

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.

peckyboy commented 2 years ago

@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.

luc122c commented 2 years ago

Yes, it is very disappointing. In another issue, one of the developers says "This project is not in active development."

comod commented 2 years ago

LOL