Bumping next.js version to v10.0.6 breaks build

[domano]

What's wrong?

After upgrading my app from next v10.0.5 to 10.0.6 webpack from next is not detected.

Steps to reproduce

1. Create next app with version 10.0.6
2. Cosmos says that there is no webpack and the dependency needs to be installed
   (3. Doing so breaks the build due to some obscure loader chaining issue - but i think that installing an additional webpack dep should not be done anyways )

Screenshots

User info

Additional context

I am using tailwindcss with the required loaders ( works with next 10.0.5 )

[ovidiuch]

Hi @domano,

I've found the culprit. In v10.0.6, the Next team decided to inline webpack and remove it as an npm dependency. This commit does it.

Tried seeing if Cosmos can work with the inlined copy at node_modules/next/dist/compiled/webpack, but it doesn't seem to work like a regular webpack dependency. I get TypeError: webpack.DefinePlugin is not a constructor. Maybe it's bundled differently than regular webpack.

Babel was also inlined in Next one patch version earlier in 10.0.5. This commit does it. In the process the inlined babel-loader was moved from next/dist/compiled/babel-loader to packages/next/build/webpack/loaders/next-babel-loader.js.

[ovidiuch]

Started a conversation in the Next repo vercel/next.js#21746

[callumlocke]

Has anyone got a workaround? Adding a direct dependency on webpack doesn't work, as noted in the original report.

[ovidiuch]

Has anyone got a workaround? Adding a direct dependency on webpack doesn't work, as noted in the original report.

Best thing you can do right now is downgrade to next@10.0.5. And follow this thread to see when the Next team makes their embedded webpack copy available to 3rd party tools.

[ovidiuch]

Update:

No reply from the Next community as to how reuse their inlined webpack copy.

I fiddled a bit more with reading and initialising Next's inlined webpack copy in Cosmos, and I think I made some progress, but the thing is, there are other packages also that expect webpack to be installed (ie. have webpack as a peer dependency). So even after I made Next's webpack available in Cosmos, I got this error from webpack-dev-middleware:

Error: Cannot find module 'webpack'
Require stack:
- /react-cosmos/react-cosmos-nextjs/node_modules/webpack-dev-middleware/dist/utils/setupHooks.js
- /react-cosmos/react-cosmos-nextjs/node_modules/webpack-dev-middleware/dist/index.js
- /react-cosmos/react-cosmos-nextjs/node_modules/webpack-dev-middleware/dist/cjs.js
- /react-cosmos/react-cosmos-nextjs/node_modules/react-cosmos/dist/plugins/webpack/devServer.js
- /react-cosmos/react-cosmos-nextjs/node_modules/react-cosmos/dist/plugins/webpack/index.js
- /react-cosmos/react-cosmos-nextjs/node_modules/react-cosmos/dist/webServer.js
- /react-cosmos/react-cosmos-nextjs/node_modules/react-cosmos/bin/cosmos.js

I tried installing webpack and Babel manually in this Next example repo and it worked for me: https://github.com/react-cosmos/react-cosmos-nextjs/pull/1/files. Can you give it another try with the latest versions? And if installing webpack fails in your projects, what is the error?

Thanks for your patience on this, it's a tough one for me because my hands are tied.

[ghost]

Trying to install for the first time on an existing Next.js app and was a bit perplexed when asked to install webpack. After I saw this issue I backed down to and pinned 10.0.5 and saw:

ERROR in ./components/Header/Header.fixture.tsx 3:15
Module parse failed: Unexpected token (3:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Header from "./Header";
| 
> export default <Header />;
| 

Then backed down to and pinned 10.0.4 and saw:

[Cosmos] Using cosmos config found at cosmos.config.json
[Cosmos] Serving static files from public
[Cosmos] See you at http://localhost:5000
[Cosmos] Using default webpack config
[Cosmos] Building webpack...
webpack built 0adfb562de1308838e80 in 7447ms
   6719 modules

ERROR in ./components/Header/Header.tsx
Module not found: Error: Can't resolve 'components/AccountDropdown' in '/Users/jos/Developer/reaction-development-platform/example-storefront/components/Header'

ERROR in ./components/Header/Header.tsx
Module not found: Error: Can't resolve 'components/Link' in '/Users/jos/Developer/reaction-development-platform/example-storefront/components/Header'

ERROR in ./components/Header/Header.tsx
Module not found: Error: Can't resolve 'components/MiniCart' in '/Users/jos/Developer/reaction-development-platform/example-storefront/components/Header'

Given imports are working fine in my Next app I assumed they'd just start working with Cosmos. Am I missing something? Should I open a separate issue? It's not clear to me if these issues are somehow related to Next integration in general.

Thank you! 🙏🏼

[ovidiuch]

@balibebas Sorry for all the issues you're having. Did you already follow the Next.js section?

[ghost]

@balibebas Sorry for all the issues you're having. Did you already follow the Next.js section?

I did. I'll look at it more today and open a separate issue after another look. Love the dark UI of this project and pleased there are mature, focused alternatives to Storybook.

EDIT: For what it's worth I've see the exact same kinds of resolution issues with Storybook, so I assume the problem is each tool not reading the Next config to determine (a) webpack module aliases and/or (b) typescript baseUrl and paths.

[callumlocke]

The linked Next.js issue was closed on March 1 with this PR.

I tried upgrading to that version of Next (or the latest, 10.2.3, which includes the changes from that PR), but it doesn't automatically fix this Cosmos issue – I still get webpack dependency missing! when I try to run Cosmos. Also tried installing Webpack in my project (pinned to 4.44.1, the same version used by Next as a dev dep) but that still results in a load of errors, like before.

So I guess there is now some work to be done on the Cosmos side? Or are we still waiting for further changes in Next before Cosmos can use Next's webpack?

Or is there any kind of workaround we could use today? What's the actual problem - does Cosmos need to somehow read the webpack config from next.config.js? If I use a custom webpack.override.js config just for Cosmos, is there something I can put in this to make Cosmos work with a Next.js site? Do we need Next to expose its loadWebpackHook function (? or something else) so we can access whatever its config is, and if so, is there any issue open there for that?

[ovidiuch]

The linked Next.js issue was closed on March 1 with this PR.

I don't see how that PR addresses the issue, which is that Next inlined webpack in their codebase and doesn't install it as a npm dependency. Not only that, but last time I checked the embedded webpack inside Next wasn't accessible to be used by 3rd party libraries like Cosmos.

There is a chance that the PR you mentioned made the inlined Next webpack usable by outside libs, but someone will have to try this out. You could potentially import next/dist/compiled/webpack/webpack and see if you can get access to the regular webpack API. Last time I checked I couldn't.

On the Cosmos side making a Next-specific adjustment would be easy. We already have a function that looks for webpack in the user's codebase and we could extend it to check if it's inside a Next codebase and import Next's webpack instead.

react-cosmos/packages/react-cosmos/src/plugins/webpack/shared.ts

Lines 4 to 15 in 2d06f22

	export function getWebpack(rootDir: string) {
	const userWebpack = importFrom.silent<typeof webpack>(rootDir, 'webpack');
	if (!userWebpack) {
	console.warn('[Cosmos] webpack dependency missing!');
	console.log(
	'Install using "yarn add --dev webpack" or "npm install --save-dev webpack"'
	);
	return;
	}
	return userWebpack;
	}

Edit: Still no word from the Next team.

[SofianeDjellouli]

With "next": "^10.0.8" and "react-cosmos": "5.5.3", I had to install "webpack": "^4.44.2", css-loader and style-loader to make it work with no further configuration.

[sidwebworks]

Same issue, coming from Nextjs v11.0.1 here

[sidwebworks]

I got it working with Webpack 5, i installed webpack 5 again even tho i think it comes with next js. Here is the error

ERROR in ./components/layout/student_pages/sidebar/Sidebar.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/sidwebworks/Desktop/Github/peerup-webapp-alpha/components/layout/student_pages/sidebar/Sidebar.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (117:3):

[oliverschoning]

Adding my own cosmos.webpack.js file and setting the configPath to it inside the cosmos.config.json fixed this problem for me. Now if only I could get fork-ts-checker-webpack-plugin to render an error overlay then I would be all set!

Any suggestion on how I might do that @skidding ? I was initially thinking about having to modify the websocket data that gets send to the client when there is an error. But since the view is inside an iframe shouldn't it be possible to render the error modal in there without much additional setup?

Basically I want my React Cosmos to also display the fork-ts-checker error overlay that I am getting in my NextJS project:

[oliverschoning]

I was by the way able to get hotReload without the infinite reload bug by setting ts-loader to transpileOnly: true and using fork-ts-checker-webpack-plugin with the { async: true } option.

[Evgenyguzman]

Hi! Any updates for the current versions of react-cosmos and next.js?

[ovidiuch]

Hi! Any updates for the current versions of react-cosmos and next.js?

Oh yeah! :)

Just done making Cosmos work with Server Components and got it working with Next 13. In the process of ironing out the details and publishing a docs guide.

[ovidiuch]

Next 13 and React Server Components support is here 🎉