I've been playing with React.js for a while and I'm starting to build up a small number of my own components.
What is the approved way of packaging them up into something I can import into different projects?
At the moment, I'm cutting and pasting the actual file around, which is clearly bad. In .NET I would create a new .dll and import that. Publishing a npm package doesn't feel right, although I don't know why.
Create a git repository with your components and reference that repo in your package.json like:
"package-name": "git+ssh://git#github.com/<user>/<repo>.git"
Related
I'm trying to use Lit.dev to create reusable web components across my organization, and I'm trying to import one of those components into a new React project using create-react-app
I started by creating a local Storybook project to make sure my components rendered correctly, which they do (see screenshot)
I pushed library of test components to my GitHub account, then I installed to a boilerplate create-react-app project using npm i https://github.com/my-user/my-design-system/, which added my library of components to /node_modules, which I can import into a React app using
import `my-design-system/MyCustomComponent`
For simple components, this is straightforward, and I can successfully render my Lit-created web component in my React project, but for components that use things such as #decorators or importing Sass styles, I get errors. For example:
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
etc...
I feel like I could solve this problem by configuring my React project to use the appropriate loaders and TypeScript configs, etc., but I feel like this is defeating the purpose of creating an external web component library to be framework agnostic. I feel like I am most likely missing a step that converts or builds my Lit project into a JavaScript bundle that other projects can use without much fuss (right now, in my React project, I'm just importing my web component straight from the source file in node_modules/my-design-system/MyCustomComponent
I'm completely new to creating my own packages, so I feel like I lack the vocabulary to accurately describe what I'm trying to accomplish. Can anyone point me in the right direction?
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.
In work we have a pretty complicated stack and situation, which could be somehow described as the following schema:
The situation is:
We have an old, poorly maintained PHP/AngularJs project which uses webpack for bundling.
We also have another project ("Some React Project") which contains a few sub-projects, and all of them are bundled into some bundle, which is then bundled with the old angularjs project. The AngularJs project then renders the React components from this bundle using some bridge library.
In addition, we have another modern React project, which is completely isolated and has it's own CI/CD process (it's actually another app).
Now we are going to develop a new module, using react, which should be used in all three projects.
We first thought about maintaining it by publishing it to NPM and for each update, to deploy it in any project using npm install. The problem is that it has SO MUCH OVERHEAD. It is so very hard to test and deploy. It's hard to maintain and since
some of our projects are very old, it's a complete nightmare.
Are there any other options available?
Is it possible to somehow deploy to package artifacts somehwere, and then automatically update it in all the projects?
Have you considered installing directly from another repo ?
Actually the overhead might be to have an auto-updated package. This would mean that you could never introduce a breaking change in that package.
{
"dependencies": {
...,
"common-package": "git+ssh://git#<your_forge_host>/path/to/<repo>.git#<your_tag_or_branch>",
...
},
...
}
I understand we can create and test React Native Components in isolation in Storybook. But how do we export/publish the components to integrate in our app?
In React -
I used react-docgen that will allow me to create and document components as a standalone project
Then I will build and publish my doc app as a package to npm registry and npm install as dependency in my app to import those components
How do we do same in Storybook with React Native? Should I -
copy files/code of tested components in my actual app?
export everything just in stories folder and build and publish as package and install as dependency in my app?
Install storybook in my actual app? But I guess that's not an option as storybook is supposed to be run as standalone app in itself
May be I am missing something obvious as no tutorial/article/doc talk about how to consume the created Components in final apps? Can someone please shed some light? Thank you.
Ok, someone finally said this in a tutorial-
Once you find the component and the state that you want, you can see the source code you need to place in your application to get the exact same functionality
So, after all it will act simply like a UI library documentation from where you need to copy code from example and cannot add stories as dependency to your project.
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.