create-solito-app fails to compile

[skyriverbend]

A default Solito app created usingcreate-solito-app fails when running yarn web with the following error:

Error: [BABEL] /Users/glowy/code/trashy/my-solito-app/apps/next/pages/_app.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type

Setting forceSwcTransforms: true inside next.config.js seems to resolve the issue.

[nandorojo]

Good to know, we should probably change the examples to set that to true then.

[biomassives]

on xenial xubuntu..

this is my current install failure trace:

ecoops@ecoops-Latitude-7490:~/Documents/expo/solito$ npx create-solito-app@latest my-solito-app Need to install the following packages: create-solito-app@0.2.0 Ok to proceed? (y) 🧑‍🎤 Creating solito app...

Creating a new solito app in my-solito-app... my-solito-app folder created. Copying template into my-solito-app...

Downloaded template into my-solito-app...

my-solito-app created! Installing packages. This might take a couple of minutes.

yarn install yarn install v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies...

success Saved lockfile. Done in 53.91s. Success! Created my-solito-app at my-solito-app Inside that directory, you can run several commands:

yarn web Starts the development server for the Next.js site. yarn native

We suggest that you begin by typing:

cd my-solito-app yarn web

ecoops@ecoops-Latitude-7490:~/Documents/expo/solito$ cd my-solito-app/ ecoops@ecoops-Latitude-7490:~/Documents/expo/solito/my-solito-app$ yarn web yarn run v1.22.19 $ cd apps/next && yarn next $ /home/ecoops/Documents/expo/solito/my-solito-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, 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 root value has an unexpected property, projectRoot, 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.

See more info here: https://nextjs.org/docs/messages/invalid-next-config warn - You have enabled experimental feature (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 - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.json" https://nextjs.org/docs/messages/swc-disabled info - automatically enabled Fast Refresh for 1 custom loader info - Using external babel configuration from /home/ecoops/Documents/expo/solito/my-solito-app/apps/next/.babelrc.json error - ./pages/_app.tsx Error: [BABEL] /home/ecoops/Documents/expo/solito/my-solito-app/apps/next/pages/_app.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type at Generator.next () at Generator.next () Attention: Next.js now collects completely anonymous telemetry regarding usage. This information is used to shape Next.js' roadmap and prioritize features. You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: https://nextjs.org/telemetry

[t1gu1]

Same things as biomassives comment.

For me after creating the project, I do a yarn web and I got that error: (If I try to pin point it)

error - ./pages/_app.tsx
Error: error:0308010C:digital envelope routines::unsupported
    at Generator.next (<anonymous>)
    at new Promise (<anonymous>)

• I try on linux and windows and I got the same error.
• I use the LTS version of node.
• The native version works.

[nandorojo]

you need to use node 16 for some reason

[t1gu1]

I search a bit about what cause this. Here is some information that I found.

Danger

This question has more than 30 answers, most suggesting to either downgrade Node.js to pre v17 or to use the legacy SSL provider. Both of those solutions are hacks that leave your builds open to security threats.

The Correct (safe) Solution

Use an up-to-date version of Node.js, and also use packages that are up-to-date with security fixes.

A less heavy-handed (also correct) solution for Webpack

In your Webpack config, set either of the following: (See the ouput.hashFunction docs)

A. (Webpack v5) Set output.hashFunction = 'xxhash64'. B. (Webpack v4) This will depend on what hash algorithms nodejs supports on your system. Some common options you can try are output.hashFunction = 'sha512' or output.hashFunction = 'sha256'.

Source: https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

---

Using node 16 will do it for the moment. Thx for the info! It could be nice to address that security issue for the web and be able to use a newer node version.

So I think it is a web package issue because it only append with the web build using a newer version of node like the LTS.

---

P.S. I test it on linux and I just run export NODE_OPTIONS=--openssl-legacy-provider before running yarn web like that (package.json script) "web": "export NODE_OPTIONS=--openssl-legacy-provider && cd apps/next && yarn next" and it works using a new node version. <-- This is a workaround isn't a long term solution and don't fix the security issue.

So it confirm that is the problem.

[t1gu1]

I made more research.

I think that the problem seems to be from @expo/next-adapter package. Here the issue: https://github.com/expo/expo-cli/issues/4616

Someone say:

This should be fixed when webpack-config is updated with webpack v5 https://github.com/expo/expo-cli/pull/3763

---

The project is currently using "@expo/next-adapter": "^4.0.12" of what I see. 5.0.0 is currently available. Maybe the transition to the 5.0.0 version should be consider now, to have a fastest migration when the fix will get out.

[nandorojo]

expo’s webpack config now uses webpack 5, so a resolution might fix that

[jcamden]

Thanks, @nandorojo. I can confirm that adding

  "resolutions": {
    "@expo/next-adapter": "^5.0.0"
  }

did allow me to run the next dev server with Node 18.

[nandorojo]

Got it, I'd accept a PR upgrading that!

[nandorojo]

Fixed in Solito 3.1.0's examples.

See the upgrade guide here: https://github.com/nandorojo/solito/releases/tag/v3.1.0