Creating with-tailwindcss example instead creates with-tailwind-emotion

[almeidaalajoel]

Verify canary release

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

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Home
Binaries:
Node: 16.17.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.3.0
eslint-config-next: N/A
react: 18.1.0
react-dom: 18.1.0

Which example does this report relate to?

with-tailwindcss

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When calling
yarn create next-app --example with-tailwindcss test
or
npx create-next-app --example with-tailwindcss test
the project created is pulled from with-tailwindcss-emotion, rather than with-tailwindcss.

Expected Behavior

A project is created from with-tailwindcss example.

To Reproduce

Call
yarn create next-app --example with-tailwindcss test
or
npx create-next-app --example with-tailwindcss test.

[balazsorban44]

Thanks for reporting. I was unable to reproduce this on Linux. Might be related to Windows. 🤔

[SukkaW]

Can't reproduce on macOS either.

[balazsorban44]

@SukkaW can you check your package.json and look for emotion to be sure? 🙏

[SukkaW]

@balazsorban44 Sure.

Full example log, as you can see, no emotion from pnpm's log.

And the package.json.

[balazsorban44]

@almeidaalajoel if this is happening to you consistently, could you try to pinpoint which version of create-next-app is causing the issue? The only relevant change I can see somehow is #40182.

Please run yarn create next-app@12.2.0 --example with-tailwindcss test, changing the 12.2.0 version until the installation is correct. This way we could potentially pinpoint which PR introduced this issue. Remember to check canary releases too for higher accuracy. See a list of Next.js releases here: https://github.com/vercel/next.js/releases

[almeidaalajoel]

For some reason, I can't specify version number with yarn -
'C:\Users\almei\AppData\Local\Yarn\bin\create-next-app@12.2.0' is not recognized as an internal or external command, operable program or batch file. error Command failed. Exit code: 1
Seems to be same as this error - yarnpkg/yarn#6587 so a bit of a tangent

But npx worked, and yes, 12.2.0 is the correct with-tailwindcss repo. So it seems the issue started at 12.3.

Can confirm that canary still has the issue as well.

Sorry, accidentally closed this.

[almeidaalajoel]

I've realized I was slightly mistaken - the repo is not pulled from with-tailwindcss-emotion. It seems largely based on the emotion example but it's slightly different. I'm not exactly sure where it's coming from. It is very similar to the with-tailwindcss-emotion repo. The components folder is the same, and it has the same .babelrc specifying emotion, but there is no emotion in the package.json. Not sure if there's a way I can figure out where exactly it's pulling from?

Edit: The readme calls itself the with-tailwindcss example, but it's clearly not the current with-tailwindcss example.

[agusthas]

I've realized I was slightly mistaken - the repo is not pulled from with-tailwindcss-emotion. It seems largely based on the emotion example but it's slightly different. I'm not exactly sure where it's coming from. It is very similar to the with-tailwindcss-emotion repo. The components folder is the same, and it has the same .babelrc specifying emotion, but there is no emotion in the package.json. Not sure if there's a way I can figure out where exactly it's pulling from?

Edit: The readme calls itself the with-tailwindcss example, but it's clearly not the current with-tailwindcss example.

I've checked the examples for with-tailwindcss-emotion and with-tailwindcss. It seems that the result repo is pulled from both of them and the cli try to merge them.

Later digging on the create-next-app on canary release, i found this line interesting

next.js/packages/create-next-app/helpers/examples.ts

Line 125 in fc3ef81

filter: (p) => p.includes(`next.js-canary/examples/${name}`),

It seems that since both examples folder name with-tailwindcss and with-tailwindcss-emotion includes the word with-tailwindcss, then they both get pulled, extracted, and then merged?

[balazsorban44]

@agusthas very good catch, I opened a PR to make the path matching more precise when extracting the files. #40513

[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.