Hello so I'm working on an app for android and iOS which is quite developed by now and I'd like to activate react-native-web on it. the problem is that I have a bug when I try to run the script to launch the web development server :
The first error at the top is the one I'm struggling with I've tried updating my babel config :
I tried deleting the babel config at the root of my project and it changed nothing like the babel config has no importance
It is being used though to build the android app i know that, but for the react native web build it seems he has no importance
But is still get the same error again and again
please let me know if you need any more information's on this issue
I have a Nuxt 2 app. I'm following the docs to add Capacitor and Android Support.
Everything is fine up to the point of running npx cap add android. The android folder is generated however there are errors in the terminal
√ Adding native android project in android in 342.51ms
√ Syncing Gradle in 944.40μp
√ add in 345.44ms
× copy android - failed!
[error] The web assets directory (.\.nuxt) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
√ Updating Android plugins in 33.68ms
× update android - failed!
[error] Error: ENOENT: no such file or directory, open
'<sourceroot>\android\app\src\main\assets\capacitor.plugins.json'
I’m not running Nuxt in static mode (due to routes and content pulled in dynamically from a CMS). So I run nuxt build which generates the output into a folder named .nuxt by default.
However nuxt build doesn’t create an index.html as an entry point, the nuxt build actually states Entrypoint app = server.js server.js.map. Hence the error above where it can’t find index.html in the .nuxt directory.
Does anyone know a way to resolve this? Or have implemented Capacitor with a Nuxt SPA?
I’ve found resources when using nuxt generate for a static app but not nuxt build for a spa like in my case.
I have a Nuxt2 web app with servers (app server and separate API server), also deployed as an Android app on the Play Store (in alpha testing). Both app flavours look and behave identical and use the same API server, as I desire.
IMHO, in the lifetime of your (universal) app, BOTH build and generate will get leveraged:
build, likely by whatever web app host you use (ie AWS, Heroku, etc), during deployment of the web app.
generate by yourself, when you're ready to submit to the app stores (Apple, Google, etc), making use of Capacitor.
Let's say you have a new feature to add to the app. On that day, you make git commits and increment your version number and when you're ready to deploy the update...
For the web app...
Make commit(s) and version number change
Deploy to your app host, which for most people, will also run the build step for you
The only time I ever run build locally is when I need to make final tests, troubleshoot bugs or make optimizations (e.g. lower final package size).
For the Android or iOS apps...
Make commit(s) and version number change
nuxt generate
Run Capacitor sync (however which way you do it (for me I use: npx cap sync)
Prepare the app store build & submit (however which way you do it)
What nuxt generate does for you, and what Capacitor needs, is a fully rendered snapshot of all your app views together, all at once. It's the equivalent of a web app user opening all your app's views all at once (e.g. 50 browser tabs), pulling all components/styles/etc into their local browser. This fully rendered app state ultimately gets bundled and is what will get submitted to the app store(s).
In Nuxt docs and terminal output, they seem to strongly suggest that if you're using nuxt generate, that you want to be using target: static, however I will say you should completely ignore this advice. Static is what you'd consider if you had a "brochureware" website or some recipe book app that you update once-in-awhile. It goes as far as in the terminal output of nuxt generate, even if I have target: server defined, you'll still see a line saying something along the lines of "Outputting for target static...". Just ignore it.
There is hardly anything static about a typical universal web app.
I personally use target: server with nuxt generate and I haven't seen any problems in the app (web or Android version).
I'm trying to run my React Native app as a web site, on a browser.
I tried to go according to https://necolas.github.io/react-native-web/docs/installation/ but the instructions on the Setup page are not clear.
I found some (rare) posts regarding this, but they are old (2019) and seem to deviate from the info in the link above.
I use yarn android to run it on android.
So, I tried using yarn web. Didn't work.
Also, tried the basic react-native start followed by react-native run-web.
It seems the run-web command is not what is needed.
Any assist appreciated.
P.S. I initialized my project through Expo, as a Bare Workflow project. Hope that helps
According to the docs:
Expo for web can work on any React Native project. When you initialize a new project with a bare workflow template using expo-cli, if you run yarn web or npm run web it will start up expo-cli and open your project in a web browser.
The same guides for web from the managed workflow apply here.
So basically just initialise your project using expo init project-name and then select bare workflow or managed workflow. After that you can execute npm run web. It will open up the browser and run the web version of it. Keep in mind that there are some incompatibility of libraries from expo, for example, the Webview is incompatible on the web so you need to switch when on web to an iframe or so.
I am running React Native Code on the Web browser and in Expo Go. In the web browser, it runs fine without any error but in Expo Go, it is not importing even a single module and showing module not found error again and again on almost all modules even after reinstalling them and also reinstalling node_modules.
Can anyone tell what's the difference between running react-native code on Expo Go and Web Browser?
Also what is this issue and how to solve it?
Currently have an Azure pipeline that is watching the staging branch and building on changes using npm and Vue CLI 3. Everything has been working fine until there was a new merge and build, which caused the error t[e] is undefined to show up. I removed minification and saw that the error was module[moduleId] is undefined on page load. Everything runs fine locally, and everything had been running fine deployed prior to this.
There was a Vuetify plugin update that has since been reverted without change. I've also had this issue with the D3 library (which is currently in use), but I'm wondering if the issue is just that the building is no longer working in the pipeline, or if everything needs to be rebuilt from scratch or a cache needs to be cleared (I'm not a DevOps guy).
Anyone have any insight for an app suddenly breaking like this?
EDIT: Seems to be related to the d3 library. Any reason why it would work locally but not when deployed? And with no errors on building?