---
tags: v3, ops, infrastructure, nx
---

# External Apps & nx

The goal is to document what we've attempted so far with using our libraries in external packages, the errors that we've encountered, and what adjustments we've made to our configuration.

## General Overview

We use an `nx` monorepo with several libraries (`libs`) and applications (`apps`). The libraries are a combination of `node` and `react` with some being strictly `node`, some strictly `react`, and others a combination of both.

All of our packages work when imported into *other apps* within our monorepo workspace. We've built these with the intention that *each library* be publishable to `npm` (this currently works) so that they'll be able to be used in external applications as `npm` imports (this only works for certain libraries).

Initially, we had issues with our UI library, but we're able to resolve these by marking certain packages as `external` in the `rollupOptions` options of the `build` command in the UI library's Vite config. Doing this for `react`, `react-dom`, and `styled-components` allows our packages to build and be used externally (provided that the app using the UI library installs the packages added as `external`).

After doing this and testing with the generated packages by importing from the `dist` folder directly we're able to fully utilize the UI library outside of the monorepo workspace.

## DAOhaus Connect

We're having build issues with the DAOhaus Connect package. Initially, these issues were isolated to two components: `<HausLayout/>` and `<DaoHausNav/>`. However, in more recent builds we're seeing more errors that are throwing critical client-side errors. The current error shows an issue with `useLocation()` being used outside of a React Router context.


This occurred even with adding `react-router-dom` as an external dependency, installig it in the app itself, and wrapping the app wrapping the app with its own `<HashRouter/>`.

Next, we removed the `useLocation()` occurrences used in the UI and DAOhaus Connect libraries. This moved past the previous error from `useLocation()` but then we ran into another error:


This is similar to the error we experienced before including `styled-components` as an external dependency. That previously resolved this issue, but it's returned after fixing the `useLocation()` error we first encountered.

This causes a client-side issue blocking rendering. Previously we were able to use most of DAOhaus Connect -- we were able to use everything except the `<HausNav/>`. However, this new set of errors is blocking any client-side rendering so we can't access the user's address.

## DAOhaus UI

We're able to resolve several of the issues by marking `react`, `react-dom`, and `styled-components` external packages that'll need to be installed *alongside* the DAOhaus UI package. For example:

yarn add @daohaus/ui react react-dom styled-components

This works well and installs the external packages. Build tools such as Vite will (likely) already have `react` and `react-dom` installed, but if not it'll be necessary to include all of the packages marked as externals in each library's Vite config.

Removing DAOhaus Connect entirely (including the `<HausConnectProvider/>`) removes the client-side errors and allows for use of DAOhaus UI.

## DAO Data

Bypassing DAOhaus Connect and setting the address via other means such as hardcoding allowed for testing of the DAO Data package. This works without issue when externally installed from `npm`.

Passing in my own address as a hardcoded value allowed for integration with the data fetching utilities provided in the DAO Data package.

## Next Steps

Since DAO Data and the UI library both work we're able to scaffold out a starter that leverages these packages. However, since DAO Data requires a user's address, and DAOhaus Connect is throwing a critical error when used externally, any user of our starter would need to utilize a different wallet connection solution and pass the address into the DAO Data queries.

- We could remove DAOhaus Connect entirely from the starter template and provide something that would allow a user to leverage our UI and DAO Data libraries to create a similar experience to the Hub app.
- Test out FormBuilder in an external app and see if this results in any errors