If you are still getting the "Can't resolve 'react-native' in '.../common'" make sure you have the common package set to private in package.json ("private": true) and also make sure you have react-native installed correctly on the web package. Thanks for this series of tutorials!
I'm confused with react-native-web documentation, how to set up a react-native-web monorepo for android, iOS and web, finally found this video and it helps me, thanks
Getting React Native setup with symlinks is tricky right now. The React Native team will be fixing this shortly, so if you run into any trouble I recommend moving on to the next video and not worry about the native portion until they fix it.
In case someone is getting a "Hooks can only be called inside the body of a function component" when running the server, i ran into the same issue when setting my workspace, related issue: @t And as @gaearon explained it was occasioned because there were two different copies of react, reading through i figure out that my yarn.lock file was messing up the dependencies, because i had two different versions of React, at the time of doing this series, react-cli comes with React 16.8.4, and the series use 16.8.4, because of that i had duplicated dependencies occasioning a unexpected no-hoist in my common package, i fixed the problem copying the yarn.lock file from Ben's repo, deleting node_modules and running yarn, you can also solve it manually as explained in this Medium post: @t
@@happygaljoo2203 download the yarn.lock file from the repo github.com/benawad/react-native-web-series/tree/1_monorepo_setup and replace it in your folder
@@gonzalochristobal I tried this, and I am still getting the same error: Hooks can only be called inside the body of a function component. (fb.me/react-invalid-hook-call)
I get the error message: "Hooks can only be called inside the body of a function component. (fb.me/react-invalid-hook-call)" Why is that? I've checked all the versions of the dependencies and it seems I got it all correct. Thank you, super interesting tutorial! Solved: react-dom and react were on different versions
Thanks! Would of been great if the common folder was a standalone storybook project in which you could develop and test components in isolation. Was unable to find ressources on how to properly setup "Storybook + Typescript + React Native"
Awesome Ben! Would like to ask you the following scenario: What if you have to use specific package that just works in mobile (ex: react-native-navigation)? If you're getting the main app entry from @wow/common and reusing in both projects (mobile & web) how do you deal with such problem? I guess you'll have to redeclare main apps? Thanks!
react-native-navigation would be difficult because it would effect most parts of the application. If it only occurs in one component, we can create 2 different versions of that component.
@Ben Awad, thanks for sharing! Would it break if we just add react-native-web on the existing react-native repo? Does the common/dist folder generate optimized code with tree shaking or do we need to add it?
Awesome course Ben, thanks for doing this. Can this configuration be used on a Javascript project instead of a Typescript?, because right now we are working in a React Native Web project, but it won't use Typescript :(
How are you adding @wow/common into the dependencies like this if it's not in a registry? I'm getting the error where is trying to search it within a registry url and ofc, it's not, so packages won't install.
How many "node_module" directories should we be having with this setup? I have four so far (one at my-monorepo, and three more in app, common, and web directories). Not sure if these all should be there or if they are supposed to get hoisted up into one main "node_modules" directory at my-monorepo level.
There should be a node_modules folder in the root of the workspace, and in each of the directories in the packages folder. If I understand correctly workspaces does some work to prevent duplicate installs of the same version of the same npm packages across the workspace and uses linking to handle the sub-packages node_modules folders.
I was trying the same thing with javascript, but I got stuck at compiling common code into dist folder. Is there any equivalent way of compiling jsx into dist folder?
I got the following error, while trying to execute 'yarn build' command inside '../web/ 'directory There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "jest": "23.6.0" Don't try to install it manually: your package manager does it automatically. However, a different version of jest was detected higher up in the tree: F:\monorepo\test-development ode_modules\jest (version: 24.1.0) Manually installing incompatible versions is known to cause hard-to-debug issues. If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will permanently disable this message but you might encounter other issues.
@@bawad I restored to use the original "App.js" and the error does changed to: ````` ../common/src/App.js 19:5 Module parse failed: Unexpected token (19:5) You may need an appropriate loader to handle this file type. | }); | > type Props = {}; | export default class App extends Component { | // export default class App extends Component { ````` Maybe I also need a TypeScript compiler for that. If I convert it to ES6, maybe I need to use Babel or Webpack.
It installs all the dependencies for web in the root `node_modules` folder, why it doesn't happen to you? my proyect isn't starting since it does not find all the dependencies inside web folder... HEEEEELP PLS!
Hello Ben, I am quite new on react-native. I try to set the mono-repo only with web but showing me the next error ../common/dist/index.js Module not found: Can't resolve 'react-native' in '/Users/jorgezevallos/Coding/react/MonoRepo/packages/common/dist' I try to copy the exactly package.json from your GitHub but no working. Any suggestions?
Getting React Native setup with symlinks is tricky right now. The React Native team will be fixing this shortly, so I recommend moving on to the next video and not worry about the native portion until they fix it.
I have same problem too. I don't understand I create a project by my self and it got this problem.But I clone a git repo from Ben and it don't have this problem
@Ben Awad, Thanks for the tutorials, for WEB setup, I keep getting the same error as @Jorge Zevallos said as well. I have tried everything but no avail. It says Module not found in the index file in the dist directory But when I check it, the React-Native package is there(it references the root directory node_modules) but when I run "yarn start", the same problem appears. Pls, can you tell me what to do?
I have got an error that I described here: stackoverflow.com/questions/57717853/error-registering-package-in-react-native-application-how-do-i-solve-it. Please someone help me with this.
![Chino Pacas - Modo Capone (with Drake & Fuerza Regida) [Video Oficial]](http://i.ytimg.com/vi/zjv8TQ0gBkg/mqdefault.jpg)
Thanks for picking new tech/concepts for the series!
If you are still getting the "Can't resolve 'react-native' in '.../common'" make sure you have the common package set to private in package.json ("private": true) and also make sure you have react-native installed correctly on the web package.
Thanks for this series of tutorials!
I'm confused with react-native-web documentation, how to set up a react-native-web monorepo for android, iOS and web, finally found this video and it helps me, thanks
Thank you for putting this together. Highly appreciated. Learned a lot.
Getting React Native setup with symlinks is tricky right now. The React Native team will be fixing this shortly, so if you run into any trouble I recommend moving on to the next video and not worry about the native portion until they fix it.
It is okay to not setup the React Native part right ?
Yes
Didn't know we could do `rm -rf packages/*/node_modules` cool!
In case someone is getting a "Hooks can only be called inside the body of a function component" when running the server, i ran into the same issue when setting my workspace, related issue:
@t
And as @gaearon explained it was occasioned because there were two different copies of react, reading through i figure out that my yarn.lock file was messing up the dependencies, because i had two different versions of React, at the time of doing this series, react-cli comes with React 16.8.4, and the series use 16.8.4, because of that i had duplicated dependencies occasioning a unexpected no-hoist in my common package, i fixed the problem copying the yarn.lock file from Ben's repo, deleting node_modules and running yarn, you can also solve it manually as explained in this Medium post:
@t
Links
github.com/facebook/react/issues/14317
medium.com/@scinos/de-duplicating-yarn-lock-ae30be4aa41a
@@happygaljoo2203 download the yarn.lock file from the repo github.com/benawad/react-native-web-series/tree/1_monorepo_setup and replace it in your folder
@@gonzalochristobal I tried this, and I am still getting the same error: Hooks can only be called inside the body of a function component. (fb.me/react-invalid-hook-call)
@@happygaljoo2203 try deleting your node_module files and reinstall using 'yarn' using @ben's yarn.lock
I had the same issue and getting this yarn.lock file worked for me.
Why did Ben use "module": "commonjs" in the tsconfig.json file inside the "common" package? Why not use "esnext" or other?
I get the error message: "Hooks can only be called inside the body of a function component. (fb.me/react-invalid-hook-call)" Why is that? I've checked all the versions of the dependencies and it seems I got it all correct. Thank you, super interesting tutorial! Solved: react-dom and react were on different versions
Thanks! Would of been great if the common folder was a standalone storybook project in which you could develop and test components in isolation. Was unable to find ressources on how to properly setup "Storybook + Typescript + React Native"
I think I tried that a couple months ago and didn't have much luck with it. Might give it another try sometime though
@@bawad I did some work today. I had a hard time but now have a work in progress here github.com/gablabelle/react-native-web-storybook-typescript
Awesome Ben! Would like to ask you the following scenario: What if you have to use specific package that just works in mobile (ex: react-native-navigation)? If you're getting the main app entry from @wow/common and reusing in both projects (mobile & web) how do you deal with such problem? I guess you'll have to redeclare main apps? Thanks!
react-native-navigation would be difficult because it would effect most parts of the application. If it only occurs in one component, we can create 2 different versions of that component.
@Ben Awad, thanks for sharing! Would it break if we just add react-native-web on the existing react-native repo? Does the common/dist folder generate optimized code with tree shaking or do we need to add it?
I don't think react-native-web breaks the react-native project but react-native breaks the web project
Awesome course Ben, thanks for doing this. Can this configuration be used on a Javascript project instead of a Typescript?, because right now we are working in a React Native Web project, but it won't use Typescript :(
Yeah you can use JavaScript in a typescript setup
How are you adding @wow/common into the dependencies like this if it's not in a registry? I'm getting the error where is trying to search it within a registry url and ofc, it's not, so packages won't install.
How many "node_module" directories should we be having with this setup? I have four so far (one at my-monorepo, and three more in app, common, and web directories). Not sure if these all should be there or if they are supposed to get hoisted up into one main "node_modules" directory at my-monorepo level.
There should be a node_modules folder in the root of the workspace, and in each of the directories in the packages folder. If I understand correctly workspaces does some work to prevent duplicate installs of the same version of the same npm packages across the workspace and uses linking to handle the sub-packages node_modules folders.
@@MattHagner Thanks!
Hi, can you please add the link to the previous videos, that you created the 'MyOwesomeProject' and the 'react-native-series' one ?
ruclips.net/p/PLN3n1USn4xll9wq0rw0ECrO0j2PFzuXtn
that thumbnail tho
😜
I was trying the same thing with javascript, but I got stuck at compiling common code into dist folder. Is there any equivalent way of compiling jsx into dist folder?
I allowed js in tsconfig and its compiing with tsc.
yarn install just crate one node_modules in packages, not inside app and web folder
Awesome as usual! When I press ctrl + period it doesn't show me import suggestions
and your cursor is at the end of the word like mine?
React Native Text doesn't work for me either. I use Ctrl + Space for that
I got the following error, while trying to execute 'yarn build' command inside '../web/ 'directory
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"jest": "23.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of jest was detected higher up in the tree:
F:\monorepo\test-development
ode_modules\jest (version: 24.1.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
you should be running build inside of the common package, but you can also add SKIP_PREFLIGHT_CHECK to the build command in the web package
Did you checkout Flutter? It looks promising ✨
I haven't yet, but I do want to try it
*Can you help how can I `import App from '@es6-app/common' ?*
"..\common\package.json" has `"main": "src/App.js"` property.
What error are you getting? Is App undefined?
@@bawad
import React, { Component } from 'react';
^^^^^
SyntaxError: Unexpected identifier
*AND*
[ error ] ../common/src/App.js 24:6
Module parse failed: Unexpected token (24:6)
You may need an appropriate loader to handle this file type.
| render() {
| return (
>
I'm not sure how to fix that for js
@@bawad I restored to use the original "App.js" and the error does changed to:
`````
../common/src/App.js 19:5
Module parse failed: Unexpected token (19:5)
You may need an appropriate loader to handle this file type.
| });
|
> type Props = {};
| export default class App extends Component {
| // export default class App extends Component {
`````
Maybe I also need a TypeScript compiler for that.
If I convert it to ES6, maybe I need to use Babel or Webpack.
You can still use JavaScript with the typescript compiler so I would give that a try
Cool! ☺☺
How is the react-native jsx in common being translated into readable code for the web?
Webpack replaces all react-native imports with react-native-web
Why not have one package for both app and web and use Platform "if" conditions for rare device specific logics?
it's a little cleaner to split up the react-native and create-react-app boilerplate
I am wondering this also. You could use file.ios.js , file.android.js, and file.web.js extensions when you need the entire components to be different
It installs all the dependencies for web in the root `node_modules` folder, why it doesn't happen to you? my proyect isn't starting since it does not find all the dependencies inside web folder... HEEEEELP PLS!
have you tried cloning my code?
Hello Ben,
I am quite new on react-native. I try to set the mono-repo only with web but showing me the next error
../common/dist/index.js
Module not found: Can't resolve 'react-native' in '/Users/jorgezevallos/Coding/react/MonoRepo/packages/common/dist'
I try to copy the exactly package.json from your GitHub but no working.
Any suggestions?
Getting React Native setup with symlinks is tricky right now. The React Native team will be fixing this shortly, so I recommend moving on to the next video and not worry about the native portion until they fix it.
I have same problem too. I don't understand I create a project by my self and it got this problem.But I clone a git repo from Ben and it don't have this problem
@Ben Awad, Thanks for the tutorials, for WEB setup, I keep getting the same error as @Jorge Zevallos said as well. I have tried everything but no avail. It says Module not found in the index file in the dist directory But when I check it, the React-Native package is there(it references the root directory node_modules) but when I run "yarn start", the same problem appears. Pls, can you tell me what to do?
have you tried comparing your code against mine?
@@bawad Yea, I have compared the package.json in both web and common. the only difference is that I am using React 16.8.3 and React-Native 0.59.1.
Can you make a series about nodejs projects on zeits now? I keep hitting walls and their documentation is abysmal
I'll probably deploy to zeit now sometime
I have got an error that I described here: stackoverflow.com/questions/57717853/error-registering-package-in-react-native-application-how-do-i-solve-it. Please someone help me with this.
can i do this without typescript?
yeah, typescript can compile javascript files
Will this course continue to be updated?
Hopefully using play js. hes workspace seems fun
Come learn typescript :)
Yeah I'll do an updated monorepo for react native when symlinks work
@@bawad
Master: how do you enter the typescript course, is there a course link? Thanks :)
@@bawad Yeah,very nice!
thoughts on lerna?
I like it and we might add it later if we have a use for it
@@bawad
Please tell me the first one.
What?
@@bawad if You associate react & react native with lerna please tell me the first one
Yeah you can use react and react native with lerna