Installation instructions produce package resolve error

[hanneskaeufler]

Describe the problem:

I tried to start a next.js project as per instructions.

mkdir foo && cd foo && npx create-next-app .

That installs cleanly

Success! Created foo at /Users/hanneskaeufler/Projects/personal/foo

Now on to installing tailwind as per instructions

npm install tailwindcss postcss autoprefixer

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: postcss@8.1.7
npm ERR! node_modules/postcss
npm ERR!   postcss@"8.1.7" from next@10.0.3
npm ERR!   node_modules/next
npm ERR!     next@"10.0.3" from the root project
npm ERR!   postcss@"*" from the root project
npm ERR!   3 more (autoprefixer, tailwindcss, postcss-js)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.1.13" from postcss-nested@5.0.3
npm ERR! node_modules/tailwindcss/node_modules/postcss-nested
npm ERR!   postcss-nested@"^5.0.1" from tailwindcss@2.0.2
npm ERR!   node_modules/tailwindcss
npm ERR!     tailwindcss@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/hanneskaeufler/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hanneskaeufler/.npm/_logs/2020-12-13T12_39_18_787Z-debug.log

~/Projects/personal/foo (master) node --version
v15.4.0
~/Projects/personal/foo (master) npm --version
7.0.15
~/Projects/personal/foo (master)

Link to a minimal reproduction:

This one-liner reliably errors out for me:

mkdir foo && cd foo && npx create-next-app . && npm install tailwindcss postcss autoprefixer

[DaniGuardiola]

I couldn't reproduce this. Here's my log:

$ mkdir foo && cd foo && npx create-next-app . && npm install tailwindcss postcss autoprefixer
Creating a new Next.js app in /tmp/foo.

Installing react, react-dom, and next using yarn...

yarn add v1.22.5
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning next > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning next > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning next > resolve-url-loader > rework > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning next > resolve-url-loader > rework > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning next > resolve-url-loader > rework > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
[2/4] 🚚  Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 365 new dependencies.
info Direct dependencies
├─ next@10.0.3
├─ react-dom@17.0.1
└─ react@17.0.1
info All dependencies
├─ @ampproject/toolbox-core@2.7.1
├─ @ampproject/toolbox-optimizer@2.7.0-alpha.1
├─ @ampproject/toolbox-runtime-version@2.7.1
├─ @ampproject/toolbox-script-csp@2.5.4
├─ @ampproject/toolbox-validator-rules@2.7.1
├─ @babel/code-frame@7.10.4
├─ @babel/helper-validator-identifier@7.10.4
├─ @babel/highlight@7.10.4
├─ @babel/runtime@7.12.5
├─ @babel/types@7.8.3
├─ @hapi/accept@5.0.1
├─ @hapi/boom@9.1.0
├─ @next/env@10.0.3
├─ @next/polyfill-module@10.0.3
├─ @next/react-dev-overlay@10.0.3
├─ @next/react-refresh-utils@10.0.3
├─ @types/json-schema@7.0.6
├─ @webassemblyjs/floating-point-hex-parser@1.9.0
├─ @webassemblyjs/helper-code-frame@1.9.0
├─ @webassemblyjs/helper-fsm@1.9.0
├─ @webassemblyjs/helper-wasm-section@1.9.0
├─ @webassemblyjs/wasm-edit@1.9.0
├─ @webassemblyjs/wasm-opt@1.9.0
├─ @xtuc/ieee754@1.2.0
├─ abort-controller@3.0.0
├─ acorn@6.4.2
├─ adjust-sourcemap-loader@3.0.0
├─ agent-base@6.0.2
├─ ajv-errors@1.0.1
├─ ajv-keywords@3.5.2
├─ ajv@6.12.6
├─ ally.js@1.4.1
├─ anser@1.4.9
├─ ansi-regex@2.1.1
├─ ansi-styles@3.2.1
├─ anymatch@3.1.1
├─ are-we-there-yet@1.1.5
├─ arity-n@1.0.4
├─ arr-flatten@1.1.0
├─ asn1.js@5.4.1
├─ assert@1.5.0
├─ assign-symbols@1.0.0
├─ ast-types@0.13.2
├─ async-each@1.0.3
├─ atob@2.1.2
├─ babel-plugin-syntax-jsx@6.18.0
├─ babel-plugin-transform-define@2.0.0
├─ babel-plugin-transform-react-remove-prop-types@0.4.24
├─ balanced-match@1.0.0
├─ base@0.11.2
├─ base64-js@1.5.1
├─ binary-extensions@2.1.0
├─ bl@4.0.3
├─ bluebird@3.7.2
├─ brace-expansion@1.1.11
├─ braces@2.3.2
├─ browserify-aes@1.2.0
├─ browserify-cipher@1.0.1
├─ browserify-des@1.0.2
├─ browserify-rsa@4.1.0
├─ browserify-sign@4.2.1
├─ browserify-zlib@0.2.0
├─ browserslist@4.14.6
├─ buffer-xor@1.0.3
├─ buffer@5.6.0
├─ builtin-status-codes@3.0.0
├─ bytes@3.1.0
├─ cacache@12.0.4
├─ cache-base@1.0.1
├─ camelcase@5.3.1
├─ chalk@2.4.2
├─ chokidar@3.4.3
├─ chownr@1.1.4
├─ chrome-trace-event@1.0.2
├─ cipher-base@1.0.4
├─ class-utils@0.3.6
├─ classnames@2.2.6
├─ code-point-at@1.1.0
├─ collection-visit@1.0.0
├─ color-convert@1.9.3
├─ color-name@1.1.4
├─ color-string@1.5.4
├─ color@3.1.3
├─ colorette@1.2.1
├─ compose-function@3.0.3
├─ concat-map@0.0.1
├─ concat-stream@1.6.2
├─ console-browserify@1.2.0
├─ console-control-strings@1.1.0
├─ constants-browserify@1.0.0
├─ copy-concurrently@1.0.5
├─ copy-descriptor@0.1.1
├─ core-util-is@1.0.2
├─ create-ecdh@4.0.4
├─ create-hmac@1.1.7
├─ cross-fetch@3.0.6
├─ crypto-browserify@3.12.0
├─ css-loader@4.3.0
├─ css.escape@1.5.1
├─ css@2.2.4
├─ cssnano-preset-simple@1.2.1
├─ cssnano-simple@1.2.1
├─ cyclist@1.0.1
├─ d@1.0.1
├─ data-uri-to-buffer@3.0.0
├─ debug@2.6.9
├─ decode-uri-component@0.2.0
├─ decompress-response@6.0.0
├─ deep-extend@0.6.0
├─ delegates@1.0.0
├─ depd@1.1.2
├─ des.js@1.0.1
├─ diffie-hellman@5.0.3
├─ dom-serializer@1.0.1
├─ domain-browser@1.2.0
├─ domelementtype@2.1.0
├─ domutils@2.1.0
├─ duplexify@3.7.1
├─ electron-to-chromium@1.3.625
├─ enhanced-resolve@4.3.0
├─ errno@0.1.7
├─ es5-ext@0.10.53
├─ es6-iterator@2.0.3
├─ es6-symbol@3.1.3
├─ escalade@3.1.1
├─ escape-string-regexp@1.0.5
├─ eslint-scope@4.0.3
├─ esrecurse@4.3.0
├─ estraverse@4.3.0
├─ esutils@2.0.3
├─ etag@1.8.1
├─ event-target-shim@5.0.1
├─ events@3.2.0
├─ expand-brackets@2.1.4
├─ expand-template@2.0.3
├─ ext@1.4.0
├─ extglob@2.0.4
├─ fast-deep-equal@3.1.3
├─ fast-json-stable-stringify@2.1.0
├─ fill-range@4.0.0
├─ find-cache-dir@3.3.1
├─ find-up@4.1.0
├─ flush-write-stream@1.1.1
├─ for-in@1.0.2
├─ from2@2.3.0
├─ fs-constants@1.0.0
├─ fs.realpath@1.0.0
├─ gauge@2.7.4
├─ get-value@2.0.6
├─ github-from-package@0.0.0
├─ glob-parent@5.1.1
├─ glob-to-regexp@0.4.1
├─ glob@7.1.6
├─ has-unicode@2.0.1
├─ has-value@1.0.0
├─ hash.js@1.1.7
├─ he@1.2.0
├─ hmac-drbg@1.0.1
├─ htmlparser2@4.1.0
├─ http-errors@1.7.3
├─ https-browserify@1.0.0
├─ https-proxy-agent@5.0.0
├─ iconv-lite@0.4.24
├─ ieee754@1.2.1
├─ indexes-of@1.0.1
├─ infer-owner@1.0.4
├─ inflight@1.0.6
├─ ini@1.3.8
├─ is-accessor-descriptor@1.0.0
├─ is-arrayish@0.3.2
├─ is-binary-path@2.1.0
├─ is-data-descriptor@1.0.0
├─ is-descriptor@1.0.2
├─ is-extglob@2.1.1
├─ is-fullwidth-code-point@1.0.0
├─ is-glob@4.0.1
├─ is-plain-object@2.0.4
├─ is-windows@1.0.2
├─ is-wsl@1.1.0
├─ isarray@1.0.0
├─ jest-worker@24.9.0
├─ js-tokens@4.0.0
├─ json-parse-better-errors@1.0.2
├─ json-schema-traverse@0.4.1
├─ kind-of@3.2.2
├─ klona@2.0.4
├─ line-column@1.0.2
├─ loader-runner@2.4.0
├─ locate-path@5.0.0
├─ lodash.sortby@4.7.0
├─ lodash@4.17.20
├─ loose-envify@1.4.0
├─ lru-cache@6.0.0
├─ make-dir@3.1.0
├─ map-visit@1.0.0
├─ memory-fs@0.4.1
├─ merge-stream@2.0.0
├─ micromatch@3.1.10
├─ miller-rabin@4.0.1
├─ mimic-response@3.1.0
├─ minimalistic-crypto-utils@1.0.1
├─ minimatch@3.0.4
├─ minimist@1.2.5
├─ mississippi@3.0.0
├─ mixin-deep@1.3.2
├─ mkdirp-classic@0.5.3
├─ move-concurrently@1.0.1
├─ ms@2.0.0
├─ nanoid@3.1.20
├─ nanomatch@1.2.13
├─ napi-build-utils@1.0.2
├─ native-url@0.3.4
├─ neo-async@2.6.2
├─ next-tick@1.0.0
├─ next@10.0.3
├─ node-abi@2.19.3
├─ node-addon-api@3.0.2
├─ node-html-parser@1.4.9
├─ node-libs-browser@2.2.1
├─ node-releases@1.1.67
├─ noop-logger@0.1.1
├─ normalize-html-whitespace@1.0.0
├─ normalize-path@3.0.0
├─ npmlog@4.1.2
├─ number-is-nan@1.0.1
├─ object-copy@0.1.0
├─ os-browserify@0.3.0
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-try@2.2.0
├─ pako@1.0.11
├─ parallel-transform@1.2.0
├─ parse-asn1@5.1.6
├─ pascalcase@0.1.1
├─ path-browserify@1.0.1
├─ path-dirname@1.0.2
├─ path-exists@4.0.0
├─ path-is-absolute@1.0.1
├─ picomatch@2.2.2
├─ pify@4.0.1
├─ pkg-dir@4.2.0
├─ platform@1.3.3
├─ pnp-webpack-plugin@1.6.4
├─ posix-character-classes@0.1.1
├─ postcss-modules-extract-imports@2.0.0
├─ postcss-modules-local-by-default@3.0.3
├─ postcss-modules-scope@2.2.0
├─ postcss-modules-values@3.0.0
├─ postcss-safe-parser@4.0.2
├─ postcss-selector-parser@6.0.4
├─ prebuild-install@5.3.6
├─ process-nextick-args@2.0.1
├─ process@0.11.10
├─ promise-inflight@1.0.1
├─ prop-types@15.7.2
├─ prr@1.0.1
├─ public-encrypt@4.0.3
├─ pump@3.0.0
├─ pumpify@1.5.1
├─ querystring-es3@0.2.1
├─ querystring@0.2.0
├─ randombytes@2.1.0
├─ randomfill@1.0.4
├─ raw-body@2.4.1
├─ rc@1.2.8
├─ react-dom@17.0.1
├─ react-is@16.13.1
├─ react-refresh@0.8.3
├─ react@17.0.1
├─ readable-stream@2.3.7
├─ readdirp@3.5.0
├─ regenerator-runtime@0.13.7
├─ regex-parser@2.2.11
├─ remove-trailing-separator@1.1.0
├─ repeat-element@1.1.3
├─ resolve-url-loader@3.1.2
├─ resolve-url@0.2.1
├─ ret@0.1.15
├─ rework-visit@1.0.0
├─ rework@1.0.1
├─ run-queue@1.0.3
├─ safer-buffer@2.1.2
├─ sass-loader@10.0.5
├─ scheduler@0.20.1
├─ schema-utils@2.7.1
├─ semver@7.3.4
├─ serialize-javascript@4.0.0
├─ set-blocking@2.0.0
├─ set-value@2.0.1
├─ setimmediate@1.0.5
├─ setprototypeof@1.1.1
├─ sharp@0.26.2
├─ shell-quote@1.7.2
├─ signal-exit@3.0.3
├─ simple-get@4.0.0
├─ simple-swizzle@0.2.2
├─ snapdragon-node@2.1.1
├─ snapdragon-util@3.0.1
├─ source-list-map@2.0.1
├─ source-map-resolve@0.5.3
├─ source-map-url@0.4.0
├─ split-string@3.1.0
├─ ssri@6.0.1
├─ stacktrace-parser@0.1.10
├─ static-extend@0.1.2
├─ statuses@1.5.0
├─ stream-browserify@3.0.0
├─ stream-each@1.2.3
├─ stream-http@2.8.3
├─ string_decoder@1.3.0
├─ string-hash@1.1.3
├─ string-width@1.0.2
├─ strip-ansi@3.0.1
├─ strip-json-comments@2.0.1
├─ style-loader@1.2.1
├─ styled-jsx@3.3.2
├─ stylis-rule-sheet@0.0.10
├─ stylis@3.5.4
├─ tapable@1.1.3
├─ tar-fs@2.1.1
├─ tar-stream@2.1.4
├─ terser-webpack-plugin@1.4.5
├─ terser@5.1.0
├─ through2@2.0.5
├─ timers-browserify@2.0.12
├─ to-arraybuffer@1.0.1
├─ to-fast-properties@2.0.0
├─ to-object-path@0.3.0
├─ to-regex-range@2.1.1
├─ toidentifier@1.0.0
├─ tr46@1.0.1
├─ traverse@0.6.6
├─ ts-pnp@1.2.0
├─ tslib@1.14.1
├─ tty-browserify@0.0.0
├─ type-fest@0.7.1
├─ type@1.2.0
├─ typedarray@0.0.6
├─ union-value@1.0.1
├─ uniq@1.0.1
├─ unique-filename@1.1.1
├─ unique-slug@2.0.2
├─ unpipe@1.0.0
├─ unset-value@1.0.0
├─ upath@1.2.0
├─ uri-js@4.4.0
├─ url@0.11.0
├─ use-subscription@1.5.1
├─ use@3.1.1
├─ util-deprecate@1.0.2
├─ util@0.11.1
├─ vm-browserify@1.1.2
├─ watchpack-chokidar2@2.0.1
├─ watchpack@2.0.0-beta.13
├─ webidl-conversions@4.0.2
├─ webpack-sources@1.4.3
├─ webpack@4.44.1
├─ whatwg-url@7.1.0
├─ which-pm-runs@1.0.0
├─ wide-align@1.1.3
├─ worker-farm@1.7.0
├─ wrappy@1.0.2
├─ xtend@4.0.2
├─ y18n@4.0.1
└─ yallist@4.0.0
✨  Done in 5.27s.

Initialized a git repository.

Success! Created foo at /tmp/foo
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd /tmp/foo
  yarn dev


A new version of `create-next-app` is available!
You can update by running: yarn global add create-next-app

npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN rm not removing /tmp/foo/node_modules/.bin/semver as it wasn't installed by /tmp/foo/node_modules/semver

> sharp@0.26.2 install /tmp/foo/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /home/dani/.npm/_libvips/libvips-8.10.0-linux-x64.tar.br

> @ampproject/toolbox-optimizer@2.7.0-alpha.1 postinstall /tmp/foo/node_modules/@ampproject/toolbox-optimizer
> node lib/warmup.js

AMP OPTIMIZER Downloaded latest AMP runtime data.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ autoprefixer@10.1.0
+ postcss@8.2.1
+ tailwindcss@2.0.2
added 166 packages from 60 contributors, removed 57 packages, updated 521 packages and audited 692 packages in 19.133s

39 packages are looking for funding
  run `npm fund` for details

found 2 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Have you tried with yarn?

[hanneskaeufler]

Have you tried with yarn?

I just did and that worked. Still leaving this issue open as I'd argue npm should work as well :)

[DaniGuardiola]

@hanneskaeufler I think it's probably an issue with your environment, as I couldn't reproduce the issue. Maybe check your npm config / globally installed packages?

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

It looks like that you installed one of those dependencies in the past and that you have an incorrect version cached.
Things you can do:

mkdir foo && cd foo && npx create-next-app . && npm install tailwindcss@latest postcss@latest autoprefixer@latest

Note the @latest tags

I'll PR a change that ensures this behaviour, I'll close this issue once merged!

[hanneskaeufler]

Hey! Thank you for your bug report!
Much appreciated! 🙏

It looks like that you installed one of those dependencies in the past and that you have an incorrect version cached.
Things you can do:

mkdir foo && cd foo && npx create-next-app . && npm install tailwindcss@latest postcss@latest autoprefixer@latest

Note the @latest tags

I'll PR a change that ensures this behaviour, I'll close this issue once merged!

That did the trick, thanks so much for the quick fix and help. Rock on ✌️

[akojimsg]

Ran into a similar problem while doing the getting tutorial on next.sj. Command to install tailwindcss is:

npm install tailwindcss postcss-preset-env postcss-flexbugs-fixes

I was able to fix the problem by following these steps:

1. Delete node_modules directory and run npm i
2. As the error message indicates, npm i tailwindcss postcss-preset-env postcss-flexbugs-fixes --force

The first step can also be executed with the --force option.