I'm having some trouble with how yarn link works in conjunction with webpack. I'm developing a components library that I'm using in a different application. For development I want to use yarn link to see my components working in my application.
In my components library I have react in peerDependencies and devDependencies because I need react for running tests for instance.
Now when I bundle my application react is bundled twice because webpack resolves react in my components library to its own node_modules instead of the application I'm using it in. This results in a react error saying that react is available twice.
How can I make sure webpack only bundles react once when using yarn link?
Related
I tried to look it up but quickly got confused|
I have a package for reusable mobile components that's in a monorepo alongside multiple expo apps. Most of the components in this package are your average styled views and stuff, and all of the apps import the packages as
import ComponentName from "#my-package/Component"
It works well with all the base react native components, but now I need to specifically use an expo package (expo-icons) and I was wondering
1.- Aren't these packages tightly coupled to your expo version? They come prepackaged on expo init and you don't explicitly install anything.
2.- Is there any way to use them without explicitly installing anything in node modules? like Rely on whatever version of expo/vector-icons is installed in the app importing this package instead of whatever #my-package has installed
3.- If I relied in https://github.com/oblador/react-native-vector-icons which should work, how is the link step handled in the installing apps? Like App A imports an icon component from my package, do I need to explicitly go to my package and copy the fonts? Do I need to install https://github.com/oblador/react-native-vector-icons in app A?
I can tell these are likely questions that deal a lot more with how npm works but I have not gone too deep into it so I apologize if it's a duplicate.
You need to use peerDependencies for such packages.
See https://github.com/callstack/react-native-builder-bob#how-do-i-add-a-react-native-library-containing-native-code-as-a-dependency-in-my-library
Re: #expo/vector-icons, you can use react-native-vector-icons in your code and it'll work in both Expo and non-Expo apps since expo maps it to #expo/vector-icons automatically.
I'm developing an SPA which I'm serving up using Rails and the ruby webpacker implementation. I have my client folder split up into a yarn monorepo for my web, native, and common code so I can reuse as much as possible using react-native-web.
So far, for the native part I have to use the nohoist directive for any library I want to use. When I run the android dev server, it can't bundle anything in the hoisted node_modules folder, so anything I want to use I have to tell it to install in the local node_modules folder using nohoist.
I'm wondering if this is how these projects are supposed to be set up, if this is normal? Should I be using something like Lerna to manage symlinking and package hoisting? Have I missed a step or a library somewhere when setting this up?
I use yarn workspaces and lerna in a mono-repo and symlinking wasn't working for our react-native project.
I added the following to the child package's package.json (the react native package in the mono-repo) which prevents hoisting of anything in the react native package:
"workspaces": {
"nohoist": [
"*",
]
},
I'm assuming this would be similar to react-native-web.
We tried lots of other methods which did not work and it did seem like hoisting in general was not compatible with react native based projects.
I need to initialize a new react native project. Recommended method to create a react native project is by using a tool called create-react-app.
But this tool comes with built in 'expo' tool-chain which omit creating ./android directory within my application root directory.
Is there a way to tell while create-react-app command to create the app without integrating "Expo" ?
Why I need this is that i want to use some external native Java libraries integrated with my react-native app.
If you want to use the new archictecure with Hermes (RN version 0.70 or later), you can run:
npx react-native#latest init AwesomeProject
Where the name of your project can replace AwesomeProject.
As they note, first make sure to remove react-native-cli if you have it installed globally.
npm uninstall -g react-native-cli #react-native-community/cli
Read more from the official docs here.
I want to allow for my React Native application to use Decorators, but how do I achieve this?
In React, it's pretty simple:
I ran yarn run eject
I modified webpack.config.*.js and added plugins: ['transform-decorators-legacy']
How do I achieve something similar with react-native? I instantiated my project via the react-native CLI - react-native init AwesomeApp.
However, the eject command doesn't exist.
When you're developing an application using only React Native CLI, you don't have access to configuration files such as webpack.config.js, or an eject command.
But you can add decorators support through the same Babel plugin, just by modifying .babelrc file. Follow the steps below:
Install the plugin to your project (as a dev dependency): yarn add --dev babel-plugin-transform-decorators-legacy;
Declare the plugin in your .babelrc file: "plugins": ["transform-decorators-legacy"];
Now, next time you start the packager (or bundle the sources), React Native will be able to interpret the decorators you've used in your JavaScript files.
The example given in this article shows exactly what I have described above.
Also, you might take a look at Haul, a tool for creating React Native apps using webpack.
Good luck!
Is it possible to use npm modules with React Native projects directly, like one uses them within a React project by npm install <module-name>?
Of course I mean modules that can be used with a React app, that is front-end ones that will be run in the browsers JS runtime but not in the nodejs or iojs runtime as a React Native app does not run in the nodejs or iojs runtime.
Well, it's quite opposite. React Native actually runs within io.js runtime so most pure javascript modules for node will work. On the other hand most front-end modules written for React.js will not work for React-Native.
React Native does not use HTML DOM nor CSS as we know it from the web. It replaces the CSS/HTML DOM with the native view representation. So any front-end packages that are supposed to use HTML and be displayed in browser will not work.
On the other hand, any modules that are pure javascript and run within node.js/io.js are perfectly OK to be run in react-native.
For example, I am quite sure that Facebook uses their 'relay' data access library in their react-native apps (it's a javascript library that efficiently communicates over Facebook's Open Graph API and allows to access Facebook user's data).
The way to do it is the same as in other node.js/io.js apps. Simply run
npm install module --save
and you are done (package.json will be automatically update with the dependency for the module). Then you can use the package as usual.