npm run web fails #268

smplman · 2019-07-21T15:24:20Z

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

The text was updated successfully, but these errors were encountered:

da-mask · 2019-07-23T07:27:27Z

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 · 2019-07-23T10:41:38Z

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 · 2019-07-23T13:53:49Z

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 · 2019-07-25T00:55:10Z

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 · 2019-07-27T03:24:56Z

@smp4488 are you still experiencing this issue?

smplman · 2019-07-27T04:58:25Z

@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 · 2019-08-23T10:21:43Z

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

RishabhKarnad · 2019-09-05T15:42:22Z

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 · 2019-10-05T12:30:00Z

Any news on this?

archagy · 2019-12-30T21:36:11Z

Same issue, can't run npm run web

cakpep · 2020-01-21T06:27:58Z

any news?

mi-constantin · 2020-03-06T12:48:48Z

any news ?

jmoussu · 2020-03-10T18:05:32Z

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

mivd7 · 2020-03-31T14:05:16Z

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

mivd7 · 2020-04-10T13:13:15Z

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

rfink · 2020-04-18T19:27:53Z

Same issue

JohnKlein985 · 2020-06-07T02:00:47Z

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 · 2020-06-07T13:52:55Z

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 · 2020-06-07T13:53:48Z

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

Ossip · 2020-11-15T16:16:36Z

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

wiredmatt · 2020-12-30T01:45:41Z

@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 · 2021-06-20T14:19:20Z

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 · 2021-10-08T03:00:21Z

Still no solution to this? What a bummer.

phiberber · 2021-10-17T02:01:21Z

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 · 2021-10-17T02:25:56Z

@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 · 2021-10-17T10:35:35Z

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

comod · 2022-01-13T14:59:59Z

LOL

RishabhKarnad self-assigned this Sep 5, 2019

RishabhKarnad transferred this issue from GeekyAnts/vue-native-core May 6, 2020

RishabhKarnad transferred this issue from GeekyAnts/vue-native-cli Jun 7, 2020

RishabhKarnad removed their assignment Aug 24, 2020

RishabhKarnad added bug Something isn't working help wanted Extra attention is needed labels Aug 24, 2020

RishabhKarnad mentioned this issue Dec 9, 2020

Unable to resolve "../../App" from "node_modules\expo\AppEntry.js" #183

Closed

RishabhKarnad mentioned this issue Apr 14, 2021

Question: Example of ejecting Vue-Native app #313

Closed

RishabhKarnad mentioned this issue Jul 14, 2021

Initial setup problem #324

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

npm run web fails #268

npm run web fails #268

smplman commented Jul 21, 2019

da-mask commented Jul 23, 2019

raduungurean commented Jul 23, 2019

smplman commented Jul 23, 2019

da-mask commented Jul 25, 2019

icarter09 commented Jul 27, 2019

smplman commented Jul 27, 2019

Nithinshetty1 commented Aug 23, 2019

RishabhKarnad commented Sep 5, 2019

Saganic commented Oct 5, 2019

archagy commented Dec 30, 2019

cakpep commented Jan 21, 2020

mi-constantin commented Mar 6, 2020

jmoussu commented Mar 10, 2020

mivd7 commented Mar 31, 2020 •

edited

mivd7 commented Apr 10, 2020

rfink commented Apr 18, 2020

JohnKlein985 commented Jun 7, 2020 •

edited

RishabhKarnad commented Jun 7, 2020

RishabhKarnad commented Jun 7, 2020

Ossip commented Nov 15, 2020

wiredmatt commented Dec 30, 2020

boldness1 commented Jun 20, 2021 •

edited

peckyboy commented Oct 8, 2021

phiberber commented Oct 17, 2021

peckyboy commented Oct 17, 2021

luc122c commented Oct 17, 2021

comod commented Jan 13, 2022

npm run web fails #268

npm run web fails #268

Comments

smplman commented Jul 21, 2019

da-mask commented Jul 23, 2019

raduungurean commented Jul 23, 2019

smplman commented Jul 23, 2019

da-mask commented Jul 25, 2019

icarter09 commented Jul 27, 2019

smplman commented Jul 27, 2019

Nithinshetty1 commented Aug 23, 2019

RishabhKarnad commented Sep 5, 2019

Saganic commented Oct 5, 2019

archagy commented Dec 30, 2019

cakpep commented Jan 21, 2020

mi-constantin commented Mar 6, 2020

jmoussu commented Mar 10, 2020

mivd7 commented Mar 31, 2020 • edited

mivd7 commented Apr 10, 2020

rfink commented Apr 18, 2020

JohnKlein985 commented Jun 7, 2020 • edited

RishabhKarnad commented Jun 7, 2020

RishabhKarnad commented Jun 7, 2020

Ossip commented Nov 15, 2020

wiredmatt commented Dec 30, 2020

boldness1 commented Jun 20, 2021 • edited

peckyboy commented Oct 8, 2021

phiberber commented Oct 17, 2021

peckyboy commented Oct 17, 2021

luc122c commented Oct 17, 2021

comod commented Jan 13, 2022

mivd7 commented Mar 31, 2020 •

edited

JohnKlein985 commented Jun 7, 2020 •

edited

boldness1 commented Jun 20, 2021 •

edited