Can't install sample project

[mihiron]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

% npx --no-install next info
npm ERR! canceled

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2022-08-04T11_46_58_425Z-debug-0.log

OS: MacOS Monterey 12.5
npm: 8.15.0
Node.js: 18.7.0

Which example does this report relate to?

blog-starter

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Trouble with first install with npx create-next-app --example blog-starter.

Error message is this.

Downloading files for example blog-starter. This might take a moment.

? Could not download "blog-starter" because of a connectivity issue between your machine and GitHub.
✔ Could not download "blog-starter" because of a connectivity issue between your machine and GitHub.
Do you want to use the default template instead? … no

Aborting installation.
Unexpected error. Please report it as a bug:
 DownloadError: Premature close
    at createApp (/Users/username/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:317:17028)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async run (/Users/username/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:317:23064)

Expected Behavior

It worked fine when the Node version was 16.16.0.

In 18.7.0, I think there is a bug around the sample installation.

To Reproduce

OS: MacOS Monterey 12.5

$ brew install n
$ sudo n latest
// latest version is 18.7.0
$ sudo n use
> 18.7.0
$ npx create-next-app --example blog-starter blog-starter-app

[titusdmoore]

I am looking into this. Note for anyone else investigating. All examples cause an issue.

[balazsorban44]

I could reproduce it, this seems to be a bug. 👍 Thanks for reporting. @titusdmoore feel free to debug. A good starting point might be: https://github.com/vercel/next.js/blob/canary/packages/create-next-app/helpers/examples.ts

[titusdmoore]

Another update, the issue does appear to be in the downloadAndExtractExample function in examples.ts like @balazsorban44 said. Logging the issue gives you an Error [ERR_STREAM_PREMATURE_CLOSE]: Premature close error. Additional logging seems to suggest that the issue is with the tar.extract function on line 101, because the got.stream function does appear to be working as expected.
I have gotten to the end of the time I can spend looking at this for now, if someone else wants to work on this issue.

[jeferson-sb]

@titusdmoore I recently found out that this might be an issue with the node-tar library that is being used to extract the contents from the stream of GitHub examples, basically while it does extract the content it throws an ERR_STREAM_PREMATURE_CLOSE error when it ends, so it will be caught on the catch clause of the createApp function when the command runs

next.js/packages/create-next-app/index.ts

Lines 140 to 162 in b0f5901

	} catch (reason) {
	if (!(reason instanceof DownloadError)) {
	throw reason
	}
	const res = await prompts({
	type: 'confirm',
	name: 'builtin',
	message:
	`Could not download "${example}" because of a connectivity issue between your machine and GitHub.\n` +
	`Do you want to use the default template instead?`,
	initial: true,
	})
	if (!res.builtin) {
	throw reason
	}
	await createApp({
	appPath: resolvedProjectPath,
	packageManager,
	typescript: program.typescript,
	})
	}

[peterblazejewicz]

I'm using NVM to downgrade Node to LTS (16). Doing so, create works. I've used curl to verify endpoint really works (curl -O https://codeload.github.com/vercel/next.js/tar.gz/canary).

[titusdmoore]

Any node version < 18 will work. Thanks to @jeferson-sb we know that the issue is in node-tar. He has opened an issue here. The issue is that node-tar extract() emits the close event. Which when in a pipeline causes it to error due to premature close in the newer node versions.

[SukkaW]

That's really weird though.

I have checked the source code of node-tar. Seems that its implementation won't cause such a race condition.
Also, node-tar is used by npm. There must be a lot of people using npm with Node.js 18, but node-tar never cause this kind of issue in npm.

[balazsorban44]

@SukkaW Indeed weird, although this is enough to reproduce the issue:

import { promisify } from "node:util"
import Stream from "node:stream"

import tar from "tar"
import got from "got"

const pipeline = promisify(Stream.pipeline)

pipeline(
  got.stream("https://codeload.github.com/vercel/next.js/tar.gz/canary"),
  tar.extract({ cwd: process.cwd(), strip: 3 }, [
    "next.js-canary/examples/with-mongodb",
  ])
)

To fix this in create-next-app, I've tried replacing node-tar with tar-fs, but it has a long-standing PR mafintosh/tar-fs#46 that prevents me from moving the extracted files to the top-level.

A workaround I can see is to catch the ERR_STREAM_PREMATURE_CLOSE error and not throw it in Node 18, as the files actually seems to be extracted correctly.

[chof64]

Greetings, in response to #39181 (comment), a queston from the issue #39181.

At the time of opening the issue, the environment I was running it with is
Node 18.7.0,
NPM 18.5
ZorinOS 16.1 (Core)

However, I've moved to Windows 10 since then, and I've still been experiencing the same problem,
Node 18.7.0
NPM 8.15.0
Ubuntu 22.04
WSL 2
Windows 10 Pro 21H2

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.