I have been trying to setup a monorepo using turborepo. I want to have a Nextjs application along with a React Native application (using Expo).
I have come as far as getting everything to work using yarn and it's no-hoist options as well as expo-yarn-workspaces. You can see my repo here: https://github.com/juliusmarminge/turbo-expo-next-starter. This is my first monorepo so not sure if it follows conventions by any means.
The issue I'm getting into is I don't want to be forced to use Yarn, especially since pnpm is getting more popular and I use it for most my other projects. Has anyone any experience in using Expo in a monorepo without using Yarn? Feels like all examples online is using it...
Thanks in advance,
Julius
You can use it with pnpm AND get-workspaces (from yarn) to update your metro.config.js and to resolve node_modules.
Related
I am trying to render 3D files in my react project. I am using ThreeJS for my react project of version 16.13.1. After installing #react-three/fiber & #react-three/drei these packages, I am getting error of Module not found: Can't resolve 'react-dom/client'. After searching solution for this I get to know that for these we have to upgrade React version to 17 or above. I did it in demo project & it worked. But the restriction is that I can not update actual project version from 16 to 18 as it will change or break so many things as well as I have to take care of other dependencies. Is there any solution available for using ThreeJS with React v16.
Or if there is any other way or different packages available to render 3D files (like .glb, .gltf) please share with me.
Thank you in advance.
How to find a version of a library that supports particular version of react?
Google <library-name> npm
Go to npm page
Go to repository (usually github)
Open package.json
Check version of react; if it's matching your version go to 7.
Change tag to some previous version; go to 5.
#react-three/fiber & #react-three/drei for react 16.13.1
These two should work:
#react-three/fiber 4.2.21
#react-three/drei 3.2.0
npm install #react-three/fiber#4.2.21 #react-three/drei#3.2.0
Disclaimer
You can never know if the packages work without trying. Many things changes and bug fixes only apply to the newest versions.
I found one package react-3d-viewer to render 3D files which perfectly work for me.
Google model viewer also works and it comes with variety of props which is good for customization of rendered 3D model.
https://github.com/dwqdaiwenqi/react-3d-viewer
https://modelviewer.dev/docs/index.html
I'm just a bit annoyed by having to do npx create-react-app and wait then delete most of the files and code.
I've seen some people use npm i react react-dom, is this another way as well?
can i also use react offline ?
You can add a in your html if you don't want to use create-react-app. Then just create a file with that name. Otherwise I believe other methods still give you a boilerplate.
Even if without create-react-app, can make React applications. But it's bother than with it. create-react-app just automates downloading libraries and many many configurations. So what they do is same.
Create react app creates spa and gives entire folder structure out of the box, but you don't always need to use cra command for that, you can create spa yourself with minimal packages if you know the actual working of spa, you can use react, webpack, webpack dev server, babel.
Description
Please, I'm desperate. For the last 3 days, I've been trying without luck to implement react-hot-loader within an electron app and don't know what else to try. I'm following many comments, posts, issues trying to replicate what they did but none gives me enough information about the entire setup so I can find what I'm missing. I've already tried electron-webpack but it didn't work for me. It has HMR from webpack, but no react-hot-loader and that makes applications using react-router a pain to work with. Maybe it's not possible, but people seem to have achieved it so I'm not willing to give up.
Expected behavior
Project setup with electron, webpack, webpack-dev-server, react, react-router, react-hot-loader. I want to be able to change CSS and HTML strings without having to rebuild the entire project with webpack and restart it.
Actual behavior
Looking for the right styles in a component accessed through react-router links takes forever. Can't keep doing this. I've been using the dev tools for that purpose but it's not even close to the speed achievable by trying things in an IDE.
Environment
Deps:
electron 4.2.10
webpack-cli 3.3.7
webpack-dev-server 3.8.0
webpack 4.39.3
react-hot-loader 4.12.12
react-router-dom 5.0.1,
System:
OS Ubuntu 18.04 LTS
node 10.16.2
npm 6.9.0
yarn 1.7.3
Reproducible Demo
This is the project I'm trying to set it up for https://github.com/nahuelarjonadev/kafka-lens/, but I'm ultimately looking for just a super simple working demo so I can mirror the configurations or at least get a hint on how to do it. I couldn't find one yet.
Use the webpack react electron boilerplate and add on it the react-hot-reloader or whatever else you want to add, i am sure that will probably work, is a good starting point for sure.
https://github.com/electron-react-boilerplate/electron-react-boilerplate
I've had so many troubles with the tool, I seriously have been debugging expo morethan the app itself.
How might I remove expo completely from CRNA? I would like to use CRNA and it's debugging tools without expo
You can do it by ejecting your app running npm run eject
Then, if you have any reference to expo just remove all of them.
your app modules before being ejected looks like this below:
When you run npm run eject it will ask some questions like:
be sure to select React Native: I'd like a regular react Native project
And your folders will now look like this (no expo):
Just be careful because ejecting is a permanent process, you should make a backup of your files.
Once you eject from Expo, though, and if you're using a Windows computer, you'll only be able to develop for Android, I believe. You'll still need a Mac to work in React Native without Expo. I'm a beginner but just wanted to highlight this difficulty faced by Windows users when ejecting from Expo.
I want to use my UI components as a reusable seperate repo/project for my react-native iniit App.
So i creatd a seperate project folder like this
and installed these dependencies
and few dependencies externally with my other app.
Then i used
yarn link
to link this project to my working app as a module just like a node module. but i get this error when i try to run my app?
Is there an issue with my method, or is there a sure way i can try to reach my goal because i found multiple ways and various configuration of creating such component libraries.but i didn't use any since the end goal is different.
This is a known issue with the React Native packager. See this discussion: https://github.com/facebook/react-native/issues/637.
This may have to do with using watchman, although there seem to be a few different cases where this can crop up.
TL;DR: React Native packager does not respect symlinks to projects, so npm and yarn link do not work like you would expect them to. Apparently this is being resolved in metro-bundler: https://github.com/facebook/metro-bundler/issues/1.
Unfortunately the workarounds are not that pretty, but there are a few options discussed in the issue 637 discussion. It also looks like you may be using a github repo for your package.
You could tell npm to get your library from github via your project's package.json, so you probably do not need npm link, though you will not be able to link to your local files for your module this way.