CODEWITHSUNDEEP
javascriptnode.jswebpacknext.jswebpack-5
deadcoder0904
deadcoder0904

Reputation: 8683

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

I want to create RSS script using Next.js.

So I put up a script in a subfolder inside the root folder scripts/ & named it build-rss.js

next.config.js

module.exports = {
    webpack: (config, options) => {
        config.module.rules.push({
            test: /\.svg$/,
            issuer: { and: [/\.(js|ts|md)x?$/] },
            use: [
                {
                    loader: '@svgr/webpack',
                    options: {
                        prettier: false,
                        svgo: true,
                        svgoConfig: { plugins: [{ removeViewBox: false }] },
                        titleProp: true,
                    },
                },
            ],
        })

        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
            }
        }

        if (!options.isServer) {
            config.resolve.fallback.fs = false
        }

        return config
    },
}

When I try to run my script npm run build:development which in package.json represents:

"scripts": {
    "clean": "rimraf .next",
    "dev": "next dev",
    "export": "next export",
    "start": "next start",
    "lint": "next lint",
    "build:development": "next build && npm run export && npm run rss:development",
    "build": "next build && npm run export && npm run rss",
    "rss:development": "node ./.next/server/scripts/build-rss.js",
    "rss": "node ./.next/serverless/scripts/build-rss.js"
}

It throws an error saying:

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

But I checked. The file does exist.

The blunder is this used to work earlier. Probably few versions ago when my other project used the same combination.

I have made a complete reproduction showcasing the error → https://github.com/deadcoder0904/next-script-rss-error

Just clone it, install it & try the script npm run build:development in the terminal to see the error.

Upvotes: 2

Views: 3667

Answers (3)

hassan marzooq
hassan marzooq

Reputation: 36

I had the same Error! I deleted the .next Folder and did an npm run dev, It started to work for me!

Upvotes: 0

Jackyef
Jackyef

Reputation: 5002

Not sure if you are still looking for an answer, but simply changing the webpack entry as follows seems to have fixed the problem.

entries['scripts/build-rss'] = './scripts/build-rss.js';
// instead of entries['./scripts/build-rss']

Upvotes: 0

user16435030
user16435030

Reputation:

Based on our conversation:

entry: path.join(__dirname, '..', 'path/to/file')

That's what a webpack entry looks like. It can also be an array or an object:

entry: [
  path.join(__dirname, '..', 'path/to/file'),
  // other entries here
]

Whereas you're already getting the whole webpack config:

webpack: (config, options)

So doing:

const originalEntry = config.entry

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

Makes no sense to me if you can just do:

config.entry.push('./scripts/build-rss')
// config.entry['./scripts/build-rss'] = './scripts/build-rss.js'

Unless I miss something with how nextjs is loading the webpack config.

Even then I'd suggest that you use path.join in order to ensure it's loaded to the correct location, because that relative root will execute from wherever webpack is compiled from.

Along with that in your first project you used nextjs v10 and now you're using nextjs v11, which has an upgrade from webpack 4 to 5, which is a major upgrade. I don't know the details, I can only speculate, but under no conditions should you assume that "because your previous project was working this one should using the same stuff", it won't necessarily (especially not in this case).

The first intuitive thing I thought was that webpack should by default bundle everything to a single output file, unless the configuration for that was changed by nextjs (I don't know). So using a script you added to entries didn't make sense to me, because it wouldn't exist. But you're saying that it does exist so I can only assume that webpack is configured to do code splitting and outputs each entry to a different file. In which case I have no idea. As far as I'm aware in webpack 5 (I don't know about webpack 4) code splitting is disabled in dev and enabled in production so your problem is likely a discrepancy between dev and production.

Perhaps the last thing you can try is to change your !options.dev, because right now you're only adding that script when it's production but you're trying to run the script using development.

If you really just have to get it working you can downgrade your nextjs to the previous version you were using (v10), even though that's not really a solution.

Other than that I'm out of ideas.

Upvotes: 1

Related Questions