create-nuxt-app failed to (complete) setup with the following choices on node v17.0.0.1 using FNM (postcss-nesting node version error)

Version

create-nuxt-app v3.7.1

Steps to reproduce

use FNM version: fnm 1.28.1 install node version: v17.0.0.1 > yarn create-nuxt-app <name>

use these settings:

✨  Generating Nuxt.js project in <name>
? Project name: the-green-shepherd-nuxt
? Programming language: **TypeScript**
? Package manager: **Yarn**
? UI framework: **Tailwind CSS**
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selec
tion)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selecti
on)
? Testing framework: **Jest**
? Rendering mode: **Universal (SSR / SSG)**
? Deployment target: **Static (Static/Jamstack hosting)**
? Development tools: **Dependabot (For auto-updating dependencies, GitHub only)**
? Continuous integration: **None**
? What is your GitHub username? **<my GH name>**
? Version control system: **Git**

What is Expected?

create-nuxt-app creates my project successfully

What is actually happening?

I am getting the following error:

error [email protected]: The engine "node" is incompatible with this module. Ex
pected version "12 - 16". Got "17.1.0"
error Found incompatible module.

Nov 22 '21 16:11 michahell

This is maybe more of a issue for postcss-nesting, I guess, than it is for create-nuxt-app, not sure where this should be reported...

Nov 22 '21 16:11 michahell

I get the same error described above when using ? UI framework: Tailwind CSS option.

But if we use NO css UI Framework or others then this issue doesn't occur. I've only tested that this works with ? UI framework: Bootstrap Vue and None.

You'll see a successful build with these settings:

✨  Generating Nuxt.js project in test-package
? Project name: test-package
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? wjkw1
? Version control system: Git

Click here for full error build log

yarn create nuxt-app test-package
yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-nuxt-app
[###################################################################################################################################################################] 342/342
create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in test-package
? Project name: test-package
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Tailwind CSS
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? wjkw1
? Version control system: Git
warning nuxt > @nuxt/babel-preset-app > [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 e
ngine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, u
pgrade your dependencies to the actual version of core-js.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with
 15x fewer dependencies
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries
. Upgrade to fsevents 2.
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
warning nuxt > @nuxt/webpack > cssnano > cssnano-preset-default > postcss-svgo > [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning nuxt > @nuxt/webpack > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > [email protected]: flatten is deprecated in favor of utility frame
works such as lodash.
warning nuxt > @nuxt/webpack > webpack > node-libs-browser > url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API in
stead.
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: See https://github.com/lydell/source-map-url#deprecated
warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning nuxt > @nuxt/webpack > cssnano > cssnano-preset-default > postcss-svgo > svgo > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this libr
ary is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
warning @nuxt/types > @types/webpack > @types/[email protected]: This is a stub types definition. anymatch provides its own type definitions, so you do not need this installed.
warning @nuxt/types > @types/autoprefixer > @types/[email protected]: This is a stub types definition. browserslist provides its own type definitions, so you do not need th
is installed.
error [email protected]: The engine "node" is incompatible with this module. Expected version "12 - 16". Got "18.9.1"
error Found incompatible module.

yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

/Users/wjkw1/.config/yarn/global/node_modules/sao/lib/installPackages.js:108
        throw new SAOError(`Failed to install ${packageName} in ${cwd}`)
        ^

SAOError: Failed to install packages in /Users/wjkw1/projects/test-package
    at ChildProcess.<anonymous> (/Users/wjkw1/.config/yarn/global/node_modules/sao/lib/installPackages.js:108:15)
    at ChildProcess.emit (node:events:513:28)
    at maybeClose (node:internal/child_process:1091:16)
    at Socket.<anonymous> (node:internal/child_process:449:11)
    at Socket.emit (node:events:513:28)
    at Pipe.<anonymous> (node:net:313:12) {
  __sao: true
}

Node.js v18.9.1
error Command failed.
Exit code: 1
Command: /opt/homebrew/bin/create-nuxt-app
Arguments: test-package
Directory: /Users/wjkw1/projects
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command

Sep 28 '22 00:09 wjkw1