Hi,

First, thank you for your work

I am currently testing Solito and I have a Typescript error (ts2322 - capture below) on all Dripsy components of type string

I saw this issue https://github.com/nandorojo/dripsy/issues/67 on your Dripsy repo but it didn't work for me

Would you have any idea? Thx

I am a noob to monorepos, and Next.js, but figured I would give my best attempt at upgrading the Solito monorepo. The project seems to run fine after the changes I made. The libs below were the ones that gave me the most trouble:

Upgrade Notes

next.js: 12.2.2: Could not upgrade all the way to 12.2.4 kept getting 'Invalid next.config.js options detected' server waring vercel/next.js#39161

react-native-reanimated: 2.8.0: After upgrading to Expo SDK 46, with the expo upgrade command inside apps/expo, it installed react-native-reanimated v2.9.1. Native ran okay, but I kept getting this error on Web: software-mansion/react-native-reanimated#3355. So I put a yarn resolution on packages/app module for reanimated v2.8.0

@types/react: 18.0.1: Kept running into this next.js server error while using the latest version of this package, so I kept v18.0.1

Hey I love this, great work!

As mentioned on twitter I got an error running create-solito-app. Setting up with vercel got me a 404 though that could easily be a me problem since I've not used it before.

npx create-solito-app@latest my-solito-app
npx: installed 82 in 10.733s
yarn run v1.23.0-20211220.1904
error Couldn't find a package.json file in "/Users/danny/workspace/solito"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Command failed: yarn ts-node index.ts

running

macos 12.2.1
node v14.19.0
yarn 1.23.0-20211220.1904

let me know if you need any more details.

Hey @nandorojo, huge fan of your work here

I've created a repo using create-solito-app yesterday, but I'm having some issues. Maybe I'm missing something, but I don't have much knowledge on monorepos

Eslint

With Eslint, next/ has its own .eslintrc.js. How can I extend with my own config there? I do have my own Eslint npm package. One side note, running the nextjs app was not working until I added this:

module.exports = {
  extends: 'next',
  root: true,
  rules: {
    '@next/next/no-html-link-for-pages': ['error', 'apps/next/pages/'],
  },
};

Maybe this should be in the template?

Typescript

And with Typescript, my intellisense is a mess on Vscode. Some auto imports simply just not work.

Example: I just deleted MotiLink import from this template file, but Typescript can't find MotiLink to import

This was only one example, but I'm having this same problem with some other packages, depending from where I try to import them.

Currently, I've just added some devDependencies on root, like husky, lint-staged and commitlint for example.

Can you help me out?

Hi @nandorojo,

My app is entirely built with Solito and am loving the developer experience so far.

I'm just encountering one roadblock at the moment which is:

Let's say you have a standard bottomtabs navigator with the following tabs:

• Home
• Search
• Notifications
• Profile

Most of these these tabs will be reusing the same screens such as <PostScreen /> or <UserScreen /> in the HomeStack, SearchStack, etc...

So let's say you're in the Notifications tab and you navigate to a <PostScreen />, ideally you'd want to stay inside that notifications tab and preserve your state in all the other tabs.

However in react-navigation v6, the app yanks you back to the Home tab, which has the same instance of that <PostScreen/> as part of the HomeStack.

The obvious solution is to make a separate <PostScreen/> and <UserScreen/> for each tab.

But I fear it's going to drastically increase the complexity of the code, and I will end up regretting this.

How would you proceed in such a scenario?

Thanks!

Adds an example with nativewind

• Tries to keep as close as possible as the main example -NativeWind doesn't have default components (and @expo/html-elements doesn't work with RNW 0.18) so a new packages/components was created with examples on how to create custom components.

I'm about to build my own product using a very similar stack to your Next/Expo one and had a couple questions if you'd be nice enough to answer them:

1. Are you using Firebase? How has that experience been with Expo? Anything I should be careful about? Specifically I like SWR and noticed your https://github.com/nandorojo/swr-firestore repo and also noticed Expo tries to cater to the Firebase crowd with https://docs.expo.dev/guides/using-firebase/
2. Suuuper interested to hear about this whole "using params for state management" thing you're doing. If you could point me towards any articles/videos/etc about that, or just give me a quick rundown on why you're doing that, that would be greatly appreciated.

Thank you again for all your help, transparency, and tools you're developing to make this stack an enjoyable experience!

I'm using Node v18.12.0 (today it's the latest version) and getting the errors below:

yarn run v1.22.19
$ cd apps/next && yarn next
$ /Users/glauber/Dev/alpha-app/node_modules/.bin/next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - Invalid next.config.js options detected: 
  - The root value has an unexpected property, webpackDevMiddleware, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, configOrigin, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, target, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, webpack5, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The value at .amp.canonicalBase must be 1 character or more but it was 0 characters.
  - The value at .assetPrefix must be 1 character or more but it was 0 characters.
  - The value at .i18n must be an object but it was null.

See more info here: https://nextjs.org/docs/messages/invalid-next-config
warn  - You have enabled experimental features (forceSwcTransforms, swcPlugins) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - automatically enabled Fast Refresh for 1 custom loader
error - ./pages/_app.tsx
Error: error:0308010C:digital envelope routines::unsupported
    at Generator.next (<anonymous>)
    at new Promise (<anonymous>)
wait  - compiling...
error - ./pages/_app.tsx
Error: error:0308010C:digital envelope routines::unsupported
    at Generator.next (<anonymous>)
    at new Promise (<anonymous>)

The error is the same as seen in #177, but the mentioned solution didn't work as I am using the latest Node version.

I have been able to successfully load custom google fonts into my Solito app so I think I'm close on this. Thanks in advance.

I am following the Expo docs to load a custom icon font via IcoMoon. Loading fine on native / expo but it seems Next is unable to locate the font file. I believe I have my next-fonts config set up correctly, because as I said, normal fonts are loading fine. But I also know that on web, custom fonts are being loaded by the tag in the document head. So not sure how a static asset like local .tff file gets loaded....

Please see below for relative code:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true
}

const { withExpo } = require('@expo/next-adapter')
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const withFonts = require('next-fonts')
const withTM = require('next-transpile-modules')([
  'solito',
  'dripsy',
  '@dripsy/core',
  'moti',
  '@motify/core',
  '@motify/components',
  'app'
])

module.exports = withPlugins(
  [
    withTM,
    withFonts,
    [
      withImages,
      {
        images: {
          disableStaticImages: true
        }
      }
    ],
    [withExpo, { projectRoot: __dirname }]
  ],
  nextConfig
)

useResouces.ts

import * as Font from 'expo-font'
import { useEffect, useState } from 'react'

export const useResources = () => {
  const [fontsLoaded, setFontsLoaded] = useState(false)
  const [iconsLoaded, setIconsLoaded] = useState(false)

  const loadFontAsync = async () => {
    try {
      await Font.loadAsync({
        RobotoSlab: require('../assets/fonts/RobotoSlab-Regular.ttf'),
        OpenSans: require('../assets/fonts/OpenSans-Regular.ttf'),
        'OpenSans-Bold': require('../assets/fonts/OpenSans-SemiBold.ttf')
      })
    } catch (error) {
      //   console.log('Font Load Error:', error)
    } finally {
      setFontsLoaded(true)
    }
  }

  const loadIconsAsync = async () => {
    try {
      await Font.loadAsync({
        IcoMoonFont: require('../assets/icons/icomoonFont.ttf')
      })
    } catch (error) {
      // console.log('Icon Font Load Error:', error)
    } finally {
      setIconsLoaded(true)
    }
  }

  useEffect(() => {
    loadFontAsync()
    loadIconsAsync()
  }, [])

  return {
    fontsLoaded,
    iconsLoaded
  }
}

dripsy.tsx

import * as Font from 'expo-font'
import { useEffect, useState } from 'react'

export const useResources = () => {
  const [fontsLoaded, setFontsLoaded] = useState(false)
  const [iconsLoaded, setIconsLoaded] = useState(false)

  const loadFontAsync = async () => {
    try {
      await Font.loadAsync({
        RobotoSlab: require('../assets/fonts/RobotoSlab-Regular.ttf'),
        OpenSans: require('../assets/fonts/OpenSans-Regular.ttf'),
        'OpenSans-Bold': require('../assets/fonts/OpenSans-SemiBold.ttf')
      })
    } catch (error) {
      //   console.log('Font Load Error:', error)
    } finally {
      setFontsLoaded(true)
    }
  }

  const loadIconsAsync = async () => {
    try {
      await Font.loadAsync({
        IcoMoonFont: require('../assets/icons/icomoonFont.ttf')
      })
    } catch (error) {
      // console.log('Icon Font Load Error:', error)
    } finally {
      setIconsLoaded(true)
    }
  }

  useEffect(() => {
    loadFontAsync()
    loadIconsAsync()
  }, [])

  return {
    fontsLoaded,
    iconsLoaded
  }
}

Icon.tsx

import { createIconSetFromIcoMoon } from '@expo/vector-icons'

import icoMoonConfig from '../assets/icons/icoMoonConfig.json'

const Icon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'IcoMoonFont',
  'iconmoonFont.ttf'
)

export default Icon

and finally an instance of icon: <Icon name="add" color="blue" size={50} />

RESULT:

https://github.com/marklawlor/nativewind/issues/301

On the documentation it mentioned that you must use styled to wrap your components in order to use className and to ignore nativewind documentation regarding setting up nextjs with babel to use their nativewind/babel plugin so it can transform components using className to styled or Stylesheet for you.

Solito mentions this won't work without no explanation at all.

Need to understand what's the limiting factor and how to overcome it.

Any help or hints? @nandorojo

Hi @nandorojo and other contributors!

I'd like to contribute back and add some of the things I've learned while building my own app using this framework. This adds another example monorepo that includes a NestJs backend. It borrows from this repo but with a lot stripped out.

I've also included an important note under Resources in the docs for users that are trying to add other services to the monorepo and are experiencing a jest-haste-map collision error. I'll point out those important details in the PR itself.

Let me know if you'd like to change anything! I'd tried to keep it as minimal as possible.

Thank you!

Fix for #265

When running yarn web on a a newly created create-solito-app project, an error would be thrown:

...apps\next\pages_app.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type

Hi, @nandorojo, thanks for the amazing lib! Recently I've been playing with it and exploring my options for a next project.

Can you please go through some of my questions? If it's the case I'll maybe be able to open a PR and contribute a little.

First of all, I tried adding a lib that required SSR ( Server Side Rendering ) and had some troubles with that. Later I found you were in the same situation as I in this discussion.

Then it clicked, I had to add the lib to the group of next-transpile-modules and it worked great. But as you said, that's kind of a necessary evil, as it doesn't help with performance.

Question 1

I didn't understand why the app is being transpiled https://github.com/nandorojo/solito/blob/ff1497c4b40242f415f1e6c7591807a3a212d5ea/example-monorepos/blank/apps/next/next.config.js#L5-L11

To test my hypothesis, I removed it and it works perfectly. It even squeezed some performance points in the Chrome's Lighthouse reports that I did.

Is there a reason it's there that I'm not seeing? Can I remove it and open a PR? I believe it's just a matter of removing it from the 4 examples.... right?

Question 2

The README.md file has a section about adding dependencies. Should we add an observation about this transpilation workaround for SSR? I can do that. It's pretty likely someone will try adding a dependency ( probably UI related ) and stumble on the same problem in the future.

Question 3

Are you aware that this lib (next-transpile-modules) was deprecated? Here's a cute good bye post from the lib maintainer: https://github.com/martpie/next-transpile-modules/releases

From now on that's a native feature from Next.JS Unfortunately that doesn't exist in the current version of next we're using, so an upgrade is necessary. Is there any special reason we're in such version of next? If not, I could try upgrading it, let's hope things don't break that easily, it's Javascript we're talking about here 🙃

The root package.json should be upgraded with the following resolutions to avoid issues with [non-posix paths] (https://github.com/expo/router/issues/13) in Windows.

  "resolutions": {
    "metro": "^0.73.1",
    "metro-resolver": "^0.73.1"
  },

This monorepo builds on top of with-expo-router but it uses Tailwind / Nativewind instead of dripsy. The tailwind design and theme is taken as it is from with-tailwind monorepo.

I have also added web targets in these mono repos app.json and they seem to be working fine on web too.

I'm very new to RN, so please take a look.