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.
Related
I created a React component and uploaded it to a private git repo. It's a fairly simple component that renders a data table that can be sorted etc. I used nwb to for the setup / build process (https://github.com/insin/nwb).
It's not published on npm, so when I want to use it on a project I install via something like npm install --save git+ssh://git#github.com/Me/myRepo.git. This all works fine in normal React projects.
Unfortunately on a NextJS site I'm working on, NextJS won't compile, and is giving the error CSS Modules cannot be imported from within node_modules and linking me to https://nextjs.org/docs/messages/css-modules-npm
That page suggests that I might be accidentally using the package's source files - but I'm not. When I look in my /node_modules/myComponent/ folder, there's a /lib/ folder that has the compiled source. However, the styles are still in separate files and are included into the compiled source just like you might normally do (var _defaultModule = _interopRequireDefault(require("./styles/default.module.scss"));).
I did some searching online and it seems like the "quick and easy" solution is to use https://github.com/martpie/next-transpile-modules.
I'd prefer to solve this by fixing my repo though, so that when I install it on a project (whether NextJS or whatever) I get whatever it is that NextJS wants.
So my various questions are:
Is there a way to set up my repo so NextJS is happy with it?
Is nwb not the preferred way to make a React component? Should I have used some other process? I'm not having this problem with any other component, so it seems like this is something I did wrong with my repo.
I'm struggling with making changes and possible a pull request for a third party react native package with cocoapods and auto linking.
In this case I want to add some minor functionality to React Native Camera. And I've forked the repo.
While developing I'd like to use my local code, but I can't get it to work.
I'ven tried using npm link, but this doesn't work since React Native can't find the linked package with the TypeScript import statement.
I've also tried just to edit Objective C code directly in node_modules, running pod install again and rerunning react-native run-ios, but it doesn't seem to include my changes.
I've never really made pull requests to other packages before, so I think I need some help. I thought this would be the easiest thing to google, but it turns out it's not.
You may be doing this already, but make sure that you clean and rebuild the project from xcode if you're modifying objective C code in the node modules folder, before re running react-native run-ios.
If you've already installed the library you also shouldn't need to rerun pod install.
Similarly on android, be sure to rebuild the project in android studio.
I am new to npm, react and webpack but I have a question. In npm how do you prevent a library from being included production package file?
For example, I am just building a very small component in react and on the site where I am going to place my small component. The problem is Jquery library and bootstrap is already being called in the masterpage of the site and I didn't want to call the same library again in my small application production build but I still want to use them during development(because I am only testing it on local and jquery is not called there). TIA
Appreciate your time ready this and hope I got to learn more from you. By the way I created the app using create-react-app but I already 'ejected' it, so its using the webpack 3
Take a look at Webpack externals
You can have two webpack configs, on the dev config you include the package as normal, but for your production config add externals for jquery, so it uses the global one already on the page
The ability you're looking for is named Code splitting
React loadable may be a good option for you as well
I hope this is a reasonable forum for this question.
I have a library of React components that I've developed that I'd like to use in multiple personal projects. When I update/improve that library I'd like it to allow me to update in all projects where it is used.
I'm using Meteor as a build tool, which will prompt me when there is an update available for a dependency it's using, so I assume it'd be an NPM module or something. It is checked in to GitHub and I don't mind if it's public.
What would be the best way to achieve this?
I know two ways:
Publish your module on NPM
Link using npm link
For the first one, your module will be public unless you pay NPM for a private module.
The second one, make your module available locally only (It is used for a development purpose, but it fits your needs).
https://docs.npmjs.com/cli/link
If you have your package published on GitHub, you can simply create dependency by linking to tarball/master. If your path is https://github.com/my-nick/my-package, just add to your dependencies in your project's package.json:
"my-package": "https://github.com/my-nick/my-package/tarball/master"
If you have your package well described (package.json file with name, main and version attributes) it should works after meteor npm install.
Of course it works for Meteor 1.3 and higher only, lower versions don't support npm.
I did not use is personally yet, but an frequently mentioned tool for this purpose is https://lernajs.io/, which is e.g. used by create-react-app.
I want to split my web project into three: front-end, back-end and super-admin.
What is the best way to re-use the components across code bases? Npm packages? That seems hard to maintain:
Open component dev package
Make changes
Push changes
Tag version
Update all projects
Seems complex and prone to errors. Is there a better way?
Depends on if you need to use different versions of the shared components from different projects. If so, you probably need to make a versioned npm package. However, if you just want to share the packages and use the same version everywhere, you have other options. For one, you don't have to actually build and publish an npm packge, you can just use npm link. This will basically create a symlink to your shared code in node_modules of the other projects.
Alternatively, you can do it without any npm package at all, just have the shared components in a separate project (directory) and import them in javascript through an alias, using a bundling system (webpack alias / browserify aliasify).