Closed hanneskaeufler closed 3 years ago
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
?
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 :)
@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?
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!
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
tagsI'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 ✌️
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:
npm i
npm i tailwindcss postcss-preset-env postcss-flexbugs-fixes --force
The first step can also be executed with the --force
option.
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
Now on to installing tailwind as per instructions
npm install tailwindcss postcss autoprefixer
Link to a minimal reproduction:
This one-liner reliably errors out for me: