---
tags: v3, testing, ops
---

# v3 External Apps With DAOhaus Packages

- We've been testing creating external apps with our published packages
- Here are the following targets we've tested with:
- Vite React (JavaScript)
- Vite React (TypeScript)
- Create React App (JavaScript)
- Create React App (TypeScript)
- Create Next App (JavaScript)
- Create Next App (TypeScript)
- Goal is to identify any errors/issues when bringing in our packages to external apps so that we can eliminate friction for community developers
- Once we iron out the kinks we'll create the starter templates for each of the tools (Vite, CRA, Next) and also be able to demonstrate how folks can scaffold apps using our tooling with popular React tools

## Documented Issues

- We can update this section with issues and errors we identify and then update once we've resolved them

### NextJS Starter

- Issue with the `@daohaus/ui` package bundle with both JS and TS Next starters
- To replicate:
- `npx create-next-app` / `npx create-next-app --typescript`
- `yarn add @daohaus/ui`
- In the `_app.[j/t]sx` file:
- `import { HausThemeProvider } from '@daohaus/ui'`
- Wrap the `<Component />` with `HausThemeProvider`:

// app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
  <HausThemeProvider>
    <Component {...pageProps} />
  </HausThemeProvider>
  )
}

- Run `yarn dev`
- Navigate to localhost
- Error output:
- Looks to be a bundling error in the `umd.js` file -- @jord identified this extra `}` in the compiled module -- not sure how we'll need to approach this
- Odd that this isn't an issue with Vite and CRA, but is with Next

#### Potential Fixes

- Jord discovered an extra semicolon and } in a styled-components template string that could be sneaking into our compiled builds and causing issues:
- If this is the case, we'll want to figure out how to detect errors in the SC template strings since they're undetected in our CI runs -- it's likely that these aren't detected since they're template strings

### Vite Starter

- Issue with `useState` being null is occurring in both the JS an TS Vite templates
- To replicate:
- `yarn create vite test-app-name --template react-ts` (TS)
- OR `yarn create vite haus-vite-ts --template react` (JS)
- `yarn add @daohaus/ui`
- - `yarn add @daohaus/ui`
- In the `main.[j/t]sx` file:
- `import { HausThemeProvider } from '@daohaus/ui'`
- Wrap the `<App />` with `HausThemeProvider`:

// main.tsx

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <HausThemeProvider>
      <App />
    </HausThemeProvider>
  </React.StrictMode>
)

- Run `yarn dev`
- Navigate to localhost where Vite serves
- Error output:

#### Potential Fixes

-The `useState` error may be coming from either the `useMediaQuery` or the `HausContext` itself:
- Came across this in looking for that error - https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link/ -- was referenced here: https://stackoverflow.com/questions/72325544/react-component-cannot-read-properties-of-null-reading-usestate
- Another issue: https://stackoverflow.com/questions/71904060/uncaught-in-promise-typeerror-cannot-read-properties-of-null-reading-usesta
- https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe

### CRA Starter

- Expericencing the same issue as above in the Vite starters

- Ceramic packages not playing well with CRA js
- something due to the webpack version
- required ejecting webpack or craco/react-rewind type solution to polyfill dependencies
- would be ideal for our stuff to work out of the box with CRA

potentially solved by removing ceramic dependencies: https://github.com/HausDAO/daohaus-monorepo/pull/630

### Node Starter

- Likely just my local issue, but working through this:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/jiwalker/Projects/Personal/crypto/daohaus/haus-cli-test/node_modules/@self.id/core/dist/index.js
require() of ES modules is not supported.
require() of /home/jiwalker/Projects/Personal/crypto/daohaus/haus-cli-test/node_modules/@self.id/core/dist/index.js from /home/jiwalker/Projects/Personal/crypto/daohaus/haus-cli-test/node_modules/@daohaus/dao-data/src/Profile.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.

Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/jiwalker/Projects/Personal/crypto/daohaus/haus-cli-test/node_modules/@self.id/core/package.json.
    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/home/jiwalker/Projects/Personal/crypto/daohaus/haus-cli-test/node_modules/@daohaus/dao-data/src/Profile.js:4:16)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'ERR_REQUIRE_ESM'
}

## Testing Without UI Library

### Next with JavaScript

-