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?
Related
I am a beginner regarding the architecture of an application and I want to try to build an application using a Monorepo.
I have a small question about a next.js frontend application that uses my ui package made in React that shares components between my different applications using a monorepo architecture.
For info, my project structure looks like this:
/project
- /apps
- /client (Next.js)
- /packages
- /ui-components (React)
I need to create a <Link> component in my /ui-components that can be reused in my /client while taking advantage of the navigation functionality offered by next.js.
My question is: Should I install next.js on my /ui-components part as well? Wouldn't this cause problems during the build for example or there could be potential duplications or performance issues?
I wondered if it would be possible to install next.js as a separate package in my /packages root and use it in my /client and /ui-component as well as any part that needs next.js features?
No, you don't need to install Next.js on your /ui-components part. You can just install it on the /client part and use it there. You can then just import the components from the /ui-components part into the /client part, and the Next.js navigation will still work. You won't have any issues with build or performance, and you won't have any duplication of code.
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 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 have a React project created with npx create-react-app where I implemented a handful React Components. I don't really see this project as an "React application", as it's just a personal library of Components I consume in another project, an HTML web application rendered using server-side technologies. My goal is to gradually replace parts of this application with React components. I don't really envision it becoming a single React application, my plan is just to replace the parts I think make sense to be developed with React.
I have no issue implementing these components - I'm using Storybook to organize the independent modules. But I'm struggling with the build process.
If I run npm run build I create a single application, based on the original React application code bootstrapped by create-react-app, which I essentially abandoned in favor of the Storybook setup. If I add the files generated by npm run build my project, I can't get React to render my components properly.
I managed to get a manual build process to work:
In my HTML project I add https://unpkg.com/react#16/umd/react.production.min.js and https://unpkg.com/react-dom#16/umd/react-dom.production.min.js
For each of my React components source files, I run npx babel --presets react-app/prod src/MyComponent.js -o build/mycomponent.js
Then I combine all the npx babel outputs in a single components.js file, adjusting some repeated functions that appear on the top of all files, and suppressing the import and export statements.
I load the component.js file in my HTML project, and I can create my components using plain JS:
ReactDOM.render(
React.createElement(MyComponent, {param: value}, null),
document.getElementById('myComponent')
);
Is there a better process to build my components to a single JS file I could consume in my HTML application?
As you expected, the project should be a reusable module/ UI library (say the name is my-ui) for other projects. I did the similar thing before and just introduce my approach here. First, export the components as normal. Second, create an index.js. Third, import and export those components you exported. Fourth, if you are familiar with webpack, use index.js as the entry in webpack.config.js to bundle the entire project as one file. You can publish this package, or just use it locally.
Then in other projects, import my-ui, you can use any component exported from that module.
A native React project has a lot of build features (e.g. dynamic css) that appear to get thrown away by just adding React components into a Meteor project. Is there a way to have a full-fledged React project within a Meteor project? Or is there a way to simply inject Meteor into a React project (everything seems oriented towards just injecting React components into a Meteor project), the way that there is for React-Native. The modules and documents that I've been able to find appear to be pretty outdated.