Every starter (including old ones) fail with Yarn 3

SleeplessByte commented 1 year ago

Yarn 1 is deprecated and running yarn will now automatically upgrade to Yarn 3 using the node_modules linker, which should just work (according to Yarn), however it doesn't. I cannot figure out if this is a Yarn issue or a solito issue. One of my projects from earlier stopped working after running yarn install again.

The error message is the same as reported here: https://github.com/nandorojo/solito/issues/265#issuecomment-1358397434

Reproduction would be

windows
yarn 3
run
node 16.19 or 18.x

Then run:

npx create-solito-app@latest -t with-expo-router

And finally go into the directory and run yarn next.

$ yarn next
The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install react-dom'
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, 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, 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, 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, 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.
  - The value at .images.loaderFile must be 1 character or more but it was 0 characters.

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.

Error: Cannot find module 'react-dom/server.browser'
Require stack:

- path\to\folder\node_modules\next\dist\server\render.js
- path\to\folder\node_modules\next\dist\server\next-server.js
- path\to\folder\node_modules\next\dist\server\dev\next-dev-server.js
- path\to\folder\node_modules\next\dist\server\next.js
- path\to\folder\node_modules\next\dist\server\lib\start-server.js
- path\to\folder\node_modules\next\dist\cli\next-dev.js
- path\to\folder\node_modules\next\dist\lib\commands.js
- path\to\folder\node_modules\next\dist\bin\next
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (path\to\folder\node_modules\next\dist\server\render.js:40:53)
    at Module._compile (node:internal/modules/cjs/loader:1165:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
    at Module.load (node:internal/modules/cjs/loader:1043:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12) {  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'path\\to\\folder\\node_modules\\next\\dist\\server\\render.js',  
    'path\\to\\folder\\node_modules\\next\\dist\\server\\next-server.js',
    'path\\to\\folder\\node_modules\\next\\dist\\server\\dev\\next-dev-server.js',
    'path\\to\\folder\\node_modules\\next\\dist\\server\\next.js',    
    'path\\to\\folder\\node_modules\\next\\dist\\server\\lib\\start-server.js',
    'path\\to\\folder\\node_modules\\next\\dist\\cli\\next-dev.js',       
    'path\\to\\folder\\node_modules\\next\\dist\\lib\\commands.js',   
    'path\\to\\folder\\node_modules\\next\\dist\\bin\\next'
  ]

This may also be a next option; I really can't tell from the errors, but it seems to be an underlying problem of next not being able to find react-dom at all.

It could also be because peer dependencies are missing all over. These should really be listed in the projects:

➤ YN0002: │ @dripsy/core@npm:3.6.0 doesn't provide react (pe0a6f), requested by @react-native-community/hooks
➤ YN0002: │ @dripsy/core@npm:3.6.0 doesn't provide react-native (p1b1d3), requested by @react-native-community/hooks
➤ YN0002: │ @dripsy/core@npm:3.6.0 doesn't provide react-native-web (pcbb4c), requested by @expo/html-elements
➤ YN0002: │ @expo/cli@npm:0.3.1 doesn't provide expo-modules-autolinking (pe8419), requested by @expo/prebuild-config    
➤ YN0002: │ @expo/webpack-config@npm:0.17.2 doesn't provide expo (p4d71d), requested by expo-pwa
➤ YN0002: │ app@workspace:packages/app doesn't provide @babel/core (pf955d), requested by react-native-reanimated        
➤ YN0002: │ app@workspace:packages/app doesn't provide react (pccf59), requested by react-native-reanimated
➤ YN0002: │ app@workspace:packages/app doesn't provide react-native (p8d7a1), requested by react-native-reanimated       
➤ YN0002: │ babel-preset-expo@npm:8.5.1 doesn't provide @babel/core (pe9622), requested by @babel/plugin-proposal-decorators
➤ YN0002: │ babel-preset-expo@npm:8.5.1 doesn't provide @babel/core (p10ae9), requested by @babel/plugin-transform-react-jsx
➤ YN0002: │ babel-preset-expo@npm:8.5.1 doesn't provide @babel/core (p7f780), requested by @babel/preset-env
➤ YN0002: │ babel-preset-expo@npm:9.2.0 doesn't provide @babel/core (p39888), requested by @babel/plugin-proposal-decorators
➤ YN0002: │ babel-preset-expo@npm:9.2.0 doesn't provide @babel/core (p7e493), requested by @babel/plugin-transform-react-jsx
➤ YN0002: │ babel-preset-expo@npm:9.2.0 doesn't provide @babel/core (pab3f6), requested by @babel/preset-env
➤ YN0060: │ expo-app@workspace:apps/expo provides expo-splash-screen (p77e24) with version 0.16.1, which doesn't satisfy what expo-router requests
➤ YN0002: │ expo-app@workspace:apps/expo doesn't provide metro (pf07f8), requested by expo-router
➤ YN0060: │ expo-app@workspace:apps/expo provides react (pc731f) with version 18.2.0, which doesn't satisfy what react-native and some of its descendants request
➤ YN0002: │ expo-asset@npm:8.6.1 doesn't provide expo (p54353), requested by expo-constants
➤ YN0002: │ expo-asset@npm:8.6.1 doesn't provide expo (p46891), requested by expo-file-system
➤ YN0002: │ expo-linking@npm:3.2.2 doesn't provide expo (pe5069), requested by expo-constants
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react (pf8cde), requested by @radix-ui/react-slot
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react (p97412), requested by @react-navigation/bottom-tabs    
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react (p5dca3), requested by @react-navigation/native
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react (pbd08e), requested by @react-navigation/native-stack   
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react-native (pf54db), requested by @bacons/react-views       
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react-native (pfe200), requested by @bacons/expo-metro-runtime
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react-native (p9bcdf), requested by @react-navigation/bottom-tabs
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react-native (p5696e), requested by @react-navigation/native  
➤ YN0002: │ expo-router@npm:0.0.31 [72208] doesn't provide react-native (p06b68), requested by @react-navigation/native-stack
➤ YN0002: │ expo-splash-screen@npm:0.16.1 [72208] doesn't provide expo-modules-autolinking (p0ca7f), requested by @expo/prebuild-config
➤ YN0002: │ moti@npm:0.19.0-alpha.6 [f87a9] doesn't provide react (pc41a5), requested by framer-motion
➤ YN0002: │ moti@npm:0.19.0-alpha.6 [f87a9] doesn't provide react-dom (p68b1e), requested by framer-motion
➤ YN0002: │ next-app@workspace:apps/next doesn't provide eslint (p27b06), requested by eslint-config-next
➤ YN0060: │ next-app@workspace:apps/next provides next (peafc5) with version 13.0.1, which doesn't satisfy what @expo/next-adapter requests
➤ YN0002: │ next-app@workspace:apps/next doesn't provide react (p0043a), requested by @expo/next-adapter
➤ YN0002: │ next-app@workspace:apps/next doesn't provide react (p4bb88), requested by next
➤ YN0002: │ next-app@workspace:apps/next doesn't provide react-dom (p9cfe9), requested by next
➤ YN0002: │ next-app@workspace:apps/next doesn't provide react-native-web (p1be0f), requested by @expo/next-adapter      
➤ YN0002: │ next-app@workspace:apps/next doesn't provide webpack (p9164a), requested by next-fonts
➤ YN0002: │ next-app@workspace:apps/next doesn't provide webpack (p051c4), requested by next-images
➤ YN0002: │ react-native-codegen@npm:0.69.2 doesn't provide @babel/preset-env (p066db), requested by jscodeshift

When installing these into the project (cd next && yarn add react react-dom react-native-web react-native-gesture-handler), next does start, despite the "invalid config" error, but breaks on error - ../../node_modules/@expo/html-elements/build/css/units.js, probably because this dependencies needs to be higher.

I don't quite understand how you have this working with Yarn at the moment.

nandorojo commented 1 year ago

I'm using yarn 1 so that must be why it works for me. I know that create-tamagui-app uses yarn 3, so maybe we could follow the steps they took to upgrade the examples? Yarn 1 does work for what it's worth...

SleeplessByte commented 1 year ago

Unfortunately Yarn 1 is in maintenance mode so we'd love to get rid of that.

I went ahead and downgraded the local version:

rm -rf .yarn # will be regenerated automatically
rm -f .yarnrc.yml # will be regenerated as .yarnrc

yarn set version 1.22.1
yarn install

Now make sure you're in the next app folder because the dir passed to findPagesDir in next will be the workspace root.

cd apps/next
yarn next

It still complains about an invalid next.config.js, but it works!

I think the problem is the peer dependencies, as listed above, so perhaps solving those for a blank next project, and blank expo project, and then combining then will solve it. Probably the quickest thing to try.

nandorojo commented 1 year ago

Interesting. For some reason I've had zero issues using Yarn 1 generally. I would prefer to upgrade this all to Yarn 3, since Yarn 1 is super slow. However, when I tried to do so in my real app's monorepo, basically everything went wrong lol. So I decided to stick with what I had for now...

jcamden commented 1 year ago

Yarn plug'n'play (pnp), which is pretty central to Yarn 2/3, replaces node_modules with a .cache directory of zipped packages. There is a lot to like there (I was a dedicated Yarn PnP user for some time), but the lack of a node_modules folder can introduce a lot headaches. Especially relevant here, I think, is lack of compatibility with react-native with expo via metro.

Maybe a different issue, but I came to this thread for the next config errors mentioned by @SleeplessByte . I think the problematic options are being introduced somewhere in the withPlugins business.

nandorojo commented 1 year ago

You'd have to use it without PnP, since React Native doesn't support it: https://yarnpkg.com/features/pnp#incompatible

jcamden commented 1 year ago

Thanks :) Ah, and I just saw your response about the next config warnings here 👍

derek-primumco commented 1 year ago

I see the Next.config.js issues with Yarn 1, so I think that's a separate issue. Here's how to reproduce the next.config.js issues:

npx create-solito-app@latest next-config-issues -t with-expo-router
cd next-config-issues
yarn web

It's worth mentioning that there seem to be some versions that are out of date in the template. From the other issues, I've put together that one needs to go into apps/expo and run expo-cli upgrade (after installing expo-cli globally with yarn add global expo-cli). Possibly, it's necessary to update React (to 18.2.0) and Next (to latest, 13.x) as well.

That said, upgrading versions did not get rid of the next.config.js errors for me.

I tried to debug Yarn 3 as well. Here's my attempt at a Yarn 3 reproduction:

npx create-solito-app@latest my-with-expo-router -t with-expo-router
cd my-with-expo-router
yarn set version stable
yarn -v
yarn
yarn web

That gives a "react-dom needs to be installed for Next.js warning" so I ran:

cd apps/next
yarn add react-dom
cd ..
yarn
yarn web

Unfortunately, that doesn't fix things. Here's where that ends up:

error - ../../node_modules/@expo/html-elements/build/css/units.js:1:0
Module not found: Can't resolve 'react-native'

Import trace for requested module:
../../node_modules/@expo/html-elements/build/elements/Headings.js
../../node_modules/@expo/html-elements/build/Elements.js
../../node_modules/@dripsy/core/build/components/H1.js
../../node_modules/@dripsy/core/build/components/index.js
../../node_modules/@dripsy/core/build/index.js
../../node_modules/dripsy/build/index.js
../../packages/app/provider/dripsy.tsx
../../packages/app/provider/index.tsx
./pages/_app.tsx

This is Yarn 3 "without PnP" (nodeLinker: node-modules) since React Native doesn't support PnP.

nandorojo commented 1 year ago

I know the tamagui solito starter has yarn 3 working, we could probably port over those changes.

derek-primumco commented 1 year ago

Thanks for the tip @nandorojo I can take a look.

derek-primumco commented 1 year ago

Fix Every starter (including old ones) fail with Yarn 3 #308

OK, this seems to work to migrate any of the Solito starters to Yarn 3.

npx create-solito-app@latest my-with-expo-router -t with-expo-router
cd my-with-expo-router
yarn set version stable
yarn -v
yarn
rm -rf yarn.lock
rm -rf node_modules
yarn
yarn -v
yarn web

@SleeplessByte Do you think you could try these commands please?

Dev Notes

You have to sit through 3x yarn (yarn install) steps.

OR you have to create a .yarnrc.yml file that looks like:

yarnPath: .yarn/releases/yarn-3.4.1.cjs
nodeLinker: node-modules

This .yarnrc.yml file is created automatically when running the second yarn (first of two runs with Yarn 3).

Implications for Repo

I know a lot of people prefer Yarn 1 generally, so the author may not want to upgrade all the examples to Yarn 3.
@nandorojo How would you feel about a PR to add a page to the docs under Guides titled "Upgrade to Yarn 3"?
https://github.com/nandorojo/solito/tree/master/docs/docs/guides

nandorojo commented 1 year ago

@nandorojo How would you feel about a PR to add a page to the docs under Guides titled "Upgrade to Yarn 3"?

yeah that would work. I'm also open to a PR to migrate all the starters themselves if this works. I assume you tried both the native app and the website, right?

nandorojo commented 1 year ago

I'm working on upgrading examples, in addition to an upgrade guide. You can follow along here: https://github.com/nandorojo/solito/releases/tag/v3.1.0

nandorojo commented 1 year ago

Fixed in 3.1.0

nandorojo / solito