Error: Cannot find module '../../webpack-runtime.js' in next.config.js due to Webpack v5

[deadcoder0904]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

16.3.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next export

Describe the Bug

I have a post-script for Next.js to generate RSS feed that looks like:

if (!options.dev && options.isServer) {
	const originalEntry = config.entry

	config.entry = async () => {
		const entries = { ...(await originalEntry()) }
		entries['./scripts/build-rss'] = './scripts/build-rss.js'
		return entries
	}
}

It gives an error on Next v11.1.0 which uses Webpack v5 underhood saying:

Error: Cannot find module '../../webpack-runtime.js'

It used to work on Webpack v4 (or Next v10) before. Even Tailwind Blog does it that way & it works for them as they are on the old version -> https://github.com/tailwindlabs/blog.tailwindcss.com/blob/master/next.config.js#L85-L93

Expected Behavior

It should work on Next v11.1.0

To Reproduce

See the main branch to see it not working on Next v11 which uses Webpack v5 -> https://github.com/deadcoder0904/next-script-rss-error/tree/main

See the old-version branch to see it working on Next v10 which uses Webpack v4 -> https://github.com/deadcoder0904/next-script-rss-error/tree/old-version

Install the dependencies & make sure perfect dependencies are installed, i.e, v11 for main branch & v10 for old-version branch as they change when using git checkout.

And then run npm run build:development which runs next build && npm run export && npm run rss:development

[Manubi]

Did you find out how to fix this? :)

[deadcoder0904]

@Manubi nope. This is hella weird. Nobody knows.

@leerob used .mjs files but it won't work for me without duplicating code. I have functions that use absolute imports using @/utils/mdx to generate RSS so I can't use .mjs

So now the alternative I'm trying is to generate rss, sitemap & other stuff in pages/tags.tsx file in getStaticProps but I prefer this method.

Would love a solution to this :)

[jserrao]

@deadcoder0904 - have no idea if this will fix your issue, but running Next v11 w/ webpack 5 on node v16 created a lot of problems for me when I upgraded from Next 10 / Webpack 4. I dropped down to Node v14 but kept Next 11 and Webpack 5 and a lot of stuff resolved.

My best guess is perhaps some of the underlying stack isn't ready for Node 16 yet but that all fails silently.

[jackyef]

FWIW, changing the webpack entry as follows fixed the problem for me.

entries['scripts/build-rss'] = './scripts/build-rss.js';
// Notice it's not entries['./scripts/build-rss']

[deadcoder0904]

@jackyef this might be because next 12 just got released. i'll have to check if its so but for previous versions, it did not work at all.

[deadcoder0904]

& yes i did notice the missing ./ but the ./ version was working in previous versions as well. see https://github.com/tailwindlabs/blog.tailwindcss.com

[jackyef]

Haha! I also used the tailwind blog as a reference. 'scripts/build-rss' definitely works in Next 11 as well though, as the tailwind blog is still on Next 11 and they use 'scripts/build-rss'.

From my experience, ./ works with Next 10, but not since Next 11. It's most likely because webpack5 is enabled by default since Next 11.

[deadcoder0904]

ah cool @jackyef, now that makes sense :)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.