vue-native-core: 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

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 16
Comments: 27 (3 by maintainers)

Most upvoted comments

@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

+13

smplman on Jul 27, 2019

Same issue, can’t run npm run web

+11

archagy on Dec 30, 2019

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 on Jun 7, 2020

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.

JohnKlein985 on Jun 7, 2020

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

da-mask on Jul 23, 2019

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

RishabhKarnad on Jun 7, 2020

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.

RishabhKarnad on Sep 5, 2019

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

Nithinshetty1 on Aug 23, 2019

Still no solution to this? What a bummer.

peckyboy on Oct 8, 2021