Running cosmos with Yarn and Next.js fails

[htunnicliff]

What's wrong?

Following the Getting Started instructions and Next.js instructions, running cosmos results in an error

Steps to reproduce

# Create a Next.js application using yarn and create-next-app
yarn create next-app cosmos-issue
cd cosmos-issue

# Install cosmos and html-webpack-plugin (per Next.js instructions)
yarn add -D react-cosmos html-webpack-plugin@4

# Run cosmos
yarn cosmos
# > [Cosmos] Using default cosmos config
# > [Cosmos] See you at http://localhost:5000
# > [Cosmos] webpack dependency missing!
# > Install using "yarn add --dev webpack" or "npm install --save-dev webpack"

User info

OS: macOS 11.2.3
Cosmos: 5.6.2
Yarn: 1.22.10
Next.js: 10.1.1

package.json:

{
  "name": "cosmos-issue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "html-webpack-plugin": "4",
    "react-cosmos": "^5.6.2"
  }
}

[ovidiuch]

Please see #1289

[htunnicliff]

@skidding – Can you update the docs to explain that react-cosmos does not support Next.js beyond version 10.0.5?

[ovidiuch]

@skidding – Can you update the docs to explain that react-cosmos does not support Next.js beyond version 10.0.5?

The situation is a bit more complicated. I'm not sure if you followed the thread, but Next no longer installs webpack in your project, so if you want to use Cosmos with Next 10.0.6 and above you need to install webpack yourself (as was suggested by Cosmos in your example). That should work, as long as you don't pass a custom webpack config to Cosmos that depends on Next-related stuff. Give it a shot if you haven't already.

Feel free to update the docs to reflect this reality in the meantime.

[htunnicliff]

@skidding – I am a newcomer and just started trying out this library today. It would be welcoming to newcomers if a longstanding issue like this (#1289 is two months old) was given a cursory mention in the docs at minimum. I would suggest that a maintainer or contributor more familiar with cosmos should update the docs.

[ovidiuch]

@htunnicliff I understand the frustration. It can be hard for me to catch up sometimes and the breaking Next change (that came from a patch version) has been a bit overwhelming. The reason why I haven't clearly stated that Cosmos doesn't work with Next >= 10.0.6 is because I haven't had the chance to properly test whether you can make it work by installing webpack yourself outside of Next.

Just added a mention of this in the Next.js docs section.

[htunnicliff]

That is awesome! Thank you for adding that so quickly.