Hi Bruno, thanks for the awesome detailed tutorial with all the updates. And i can see you are very active in comments also which is awesome!
Its really nice to see react's progress towards PWA and cross platform portability.
I am following this tutorial to convert our old add(on Rn 0.59) over to react-native web. I followed this tutorial and setup everything up.
Than i copied the dependencies from our mobile repo's package json to packages/components/package.json. And all other code respectively in src. Idea was to get everything running on ios in this monorepo setup and than go from there to fix whatever needs to be fixed for web.
But i am getting some errors like first i got:
bundling failed: Error: Unable to resolve module path from /Users/..../projec/node_modules/react-native-dotenv/index.js: Module path does not exist in the Haste module map
Fixed it by adding path explicitly in dev-dependencies. Than started getting error:
bundling failed: Error: While trying to resolve module fs from file /Users/..../projec/node_modules/babel-plugin-dotenv/index.js, the package /Users/..../projec/node_modules/fs/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/..../projec/node_modules/fs/index.js. Indeed, none of these files exist
I am not very experienced in react and react-native, i am mainly on Ruby on Rails, so maybe this is something basic which i am getting wrong.
I found: stackoverflow.com/a/39046690/4738391 which suggests omething wrong with node environment or something. But i am a bit confused, i mean i can add these dependencies etc but it should work out of the box for mobile, as it was working fine in previous repo.
Please remove all node_modules folders and .lock files from your project, clear all caches (xcode, —reset-cache, etc), and try following the steps again. Maybe you missed something.
After running yarn to install dependencies, check the contents of packages/mobile/node_modules, and let me know which folders it has. It shouldn’t have any, all should be in the root node_modules.
If nothing works, maybe they released a new version of the cli that broke something, in that case you can use a previous version or investigate the change.
I think i was not clear in my comment, actually it did work with barebone setup as described in this post. It was working perfectly, than i started exporting my mobile code, that's when it exploded.
I wanted to just have mobile app running as it is in this architecture. Than move un-convertable code to mobile and write replacement code for only those in web. But my mobile app is not running with these errors.
I did all the cache clear and everything but same issue. mobile repo's node_modules folder have 2 folder, .bin and metro-react-native-babel-preset.
I am pretty sure it is some of my mobile dependency. I don't know if i should share the package json etc and everything here. It will just get annoyingly long here.
Let me know if i should share that here, or i can reach you through some other medium.
I do understand this blog post is like THE go to blog right now for new projects which want to take this route. but porting old projects is a lot more messy. If i do succeed in porting my app on this architecture and support web, i will leave pointers and can also write an extension of this blog post.
This was a stupid error, i had forgot to add 'module:react-native-dotenv' in my babel config presets. Adding it solved the problem and i got my mobile app compiled. There were some imports fixes etc in scode needed to be done to run app successfully. But that is done.
After cache clean and everything, second error changed to:
error: bundling failed: Error: While trying to resolve module fs from file /Users/..../projec/node_modules/babel-plugin-dotenv/index.js, the package /Users/..../projec/node_modules/fs/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/..../projec/node_modules/fs/index.js. Indeed, none of these files exist
I was running into the same issue and I think I figured out the cause of the problem. I unfortunately don't know how to fix it. It seems to be related to react-native-cli not being able to locate the metro and babel configs because it's being run from the root of the repository.
Since they aren't found, when the bundler comes across react-native-dotenv within a source file it will actually import the source file rather than using the replacement provided by the babel plugin.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Bruno, thanks for the awesome detailed tutorial with all the updates. And i can see you are very active in comments also which is awesome!
Its really nice to see react's progress towards PWA and cross platform portability.
I am following this tutorial to convert our old add(on Rn 0.59) over to react-native web. I followed this tutorial and setup everything up.
Than i copied the dependencies from our mobile repo's package json to packages/components/package.json. And all other code respectively in src. Idea was to get everything running on ios in this monorepo setup and than go from there to fix whatever needs to be fixed for web.
But i am getting some errors like first i got:
bundling failed: Error: Unable to resolve module
pathfrom/Users/..../projec/node_modules/react-native-dotenv/index.js: Modulepathdoes not exist in the Haste module mapFixed it by adding
pathexplicitly in dev-dependencies. Than started getting error:bundling failed: Error: While trying to resolve module
fsfrom file/Users/..../projec/node_modules/babel-plugin-dotenv/index.js, the package/Users/..../projec/node_modules/fs/package.jsonwas successfully found. However, this package itself specifies amainmodule field that could not be resolved (/Users/..../projec/node_modules/fs/index.js. Indeed, none of these files existI am not very experienced in react and react-native, i am mainly on Ruby on Rails, so maybe this is something basic which i am getting wrong.
I found: stackoverflow.com/a/39046690/4738391 which suggests omething wrong with node environment or something. But i am a bit confused, i mean i can add these dependencies etc but it should work out of the box for mobile, as it was working fine in previous repo.
Any help will be greatly appreciated. Thanks.
Please remove all node_modules folders and .lock files from your project, clear all caches (xcode, —reset-cache, etc), and try following the steps again. Maybe you missed something.
You shouldn’t remove the dependencies from mobile. Check this repo source code and commit diffs: github.com/brunolemos/react-native...
After running yarn to install dependencies, check the contents of packages/mobile/node_modules, and let me know which folders it has. It shouldn’t have any, all should be in the root node_modules.
If nothing works, maybe they released a new version of the cli that broke something, in that case you can use a previous version or investigate the change.
I think i was not clear in my comment, actually it did work with barebone setup as described in this post. It was working perfectly, than i started exporting my mobile code, that's when it exploded.
I wanted to just have mobile app running as it is in this architecture. Than move un-convertable code to mobile and write replacement code for only those in web. But my mobile app is not running with these errors.
I did all the cache clear and everything but same issue. mobile repo's node_modules folder have 2 folder, .bin and metro-react-native-babel-preset.
I am pretty sure it is some of my mobile dependency. I don't know if i should share the package json etc and everything here. It will just get annoyingly long here.
Let me know if i should share that here, or i can reach you through some other medium.
I do understand this blog post is like THE go to blog right now for new projects which want to take this route. but porting old projects is a lot more messy. If i do succeed in porting my app on this architecture and support web, i will leave pointers and can also write an extension of this blog post.
This was a stupid error, i had forgot to add
'module:react-native-dotenv'in my babel config presets. Adding it solved the problem and i got my mobile app compiled. There were some imports fixes etc in scode needed to be done to run app successfully. But that is done.But now next errors(on web), i posted this SO question: stackoverflow.com/questions/571953...
If i can get any help, would be great.
After cache clean and everything, second error changed to:
error: bundling failed: Error: While trying to resolve module
fsfrom file/Users/..../projec/node_modules/babel-plugin-dotenv/index.js, the package/Users/..../projec/node_modules/fs/package.jsonwas successfully found. However, this package itself specifies amainmodule field that could not be resolved (/Users/..../projec/node_modules/fs/index.js. Indeed, none of these files existI was running into the same issue and I think I figured out the cause of the problem. I unfortunately don't know how to fix it. It seems to be related to react-native-cli not being able to locate the metro and babel configs because it's being run from the root of the repository.
Since they aren't found, when the bundler comes across react-native-dotenv within a source file it will actually import the source file rather than using the replacement provided by the babel plugin.