Cannot read property 'pop' of undefined

[muhaimincs]

Bug report

Describe the bug

next build failed after upgrade to 9.2.0

Failed to compile.

chunk commons [initial]
static/chunks/commons.c26e165c.chunk.css
Cannot read property 'pop' of undefined

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/home/ubuntu/app/node_modules/next/dist/build/index.js:10:900)
    at <anonymous>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior

Build success

System information

• OS: Ubuntu 18
• Version of Next.js: 9.2.0
• Node: 8.12.0

[kachkaev]

Both Node 8 and 9 are no longer supported (not by Next.js, but in general). They reached their official end of life. Please try using Node 10, 12 or 13.

[Timer]

Closing as Node 8 is EOL as mentioned above. Please upgrade to Node 10 or newer.

[muhaimincs]

I just tested it using node v11.10.1, the errors still the same

[ivadimko]

node v10.16.0 - the same error
node v12.12.0 - the same error

only thing that helped is adding

    if (config.optimization.splitChunks) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
    }

in my next.config.js

[dawsbot]

I confirmed this error on node v12.13.1 and @ivadimko 's fix solved this error, but created full white pages for all routes. My next version is v9.2.0

[Timer]

Can someone provide a reproducible demo? Otherwise we cannot look into/fix this.

[dawsbot]

@Timer I've got a massive private repo of which we cannot easily isolate the area of issue. I'll have to rely on someone else to provide a reproducible demo.

UPDATE: I fixed this bug entirely by doing a dynamic import with ssr: false for a component which relies heavily on DOM API's.

[timneutkens]

@dawsbot it's unlikely someone will come along to provide a reproduction as you're already the 3rd person to report without providing one.

[dawsbot]

@timneutkens I hear you. What's the best way to take part in the open-source community here with a public example when I'm working on a private proprietary project covered by an NDA?

I don't actually know what options exist here; I'm open to suggestions.

[timneutkens]

What's the best way to take part in the open-source community here with a public example when I'm working on a private proprietary project covered by an NDA?

Spending time figuring out where what causes the issue would be one way. Another would be sharing the project under NDA, though generally we only look at projects under enterprise support as it takes significantly more time.

[dawsbot]

Thank you for the explanation of the options here @timneutkens 🙌

I won't be building a reproducible example. Seems best to put this plainly. Thanks for a great tool, I'll be using this for years to come!

[muhaimincs]

I'm trying to reproduce it

https://github.com/muhaimincs/nextjs-css-error

but turn out another error appear

[ivadimko]

My PR #10171 has been closed so let's continue discussion here. Unfortunately, I can't provide reproducible demo for the moment. Error happened in big private project. We use styled components there but tried to work with css-modules as better solution.
I'll try to reproduce error in small synthetic project and let you know in case I catch it.

Anyway, thank you for such a great tool. We're very happy by using it.

[dawsbot]

@ivadimko We also use styled-components in the repo I'm seeing this error in 🕵️‍♂️

[Timer]

What version of @zeit/next-css is everyone using?

[dawsbot]

@Timer my version of @zeit/next-css is v1.0.1

[Timer]

Hello everyone. We've managed to create a minimal reproducible demo of this bug with a closed-source example graciously provided by someone. 🙏

We've narrowed the issue down to extract-css-chunks-webpack-plugin, specifically, this line.

This plugin appears to not account for an edge-case webpack produces under our new chunking configuration.
The minimal reproducible demo is to import CSS in pages/_app.js and then also a component that's imported using import() (or next/dynamic).

For reference, the same code that errors with extract-css-chunks-webpack-plugin works with Next.js' new built-in CSS support (which uses mini-css-extract-plugin).

---

We will file a bug with extract-css-chunks-webpack-plugin on behalf of the community!

Unfortunately, since this is not a bug with Next.js, there are no instructions we can give to fix this until it's resolved upstream.

---

Reduced reproduction:
https://github.com/Timer/extract-css-chunks-webpack-plugin-bug

[ScriptedAlchemy]

Addressing the issue now. Will update both threads

[muhaimincs]

I'm trying to reproduce it

https://github.com/muhaimincs/nextjs-css-error

but turn out another error appear

does anyone tried this?

[khades]

@Timer i did research, based on your bug showcase branch, and posted what i found in mini-css-extract-plugin issue, that discuss dynamic imports - webpack-contrib/mini-css-extract-plugin#341 (comment)

[pavelzubov]

@Timer We also have this error in our project (next.js 9.3.6, without extract-css-chunks-webpack-plugin).
The problem arises using dynamic imports. I couldn't figure out the details, but error disappeared when I changed import of one of component from dynamic to default.
View webpack-contrib/mini-css-extract-plugin#341

[khades]

Well if we are to fix that problem (and that's NOT nextjs problem), we need the most simpliest way to reproduce bug, cause my reasoning "that works" doesnt work that good for them.

[kavience]

Hi,every body, I solved this question by here , in this way, you need to found
node_modules/mini-css-extract-plugin/dist/index.js line 341

        if (!success) {
          // no module found => there is a conflict
          // use list with fewest failed deps
          // and emit a warning
          if (!bestMatch) {
             break;
           }        
          const fallbackModule = bestMatch.pop();
          usedModules.add(fallbackModule);
        }
      }

add this line in there

if (!bestMatch) {
             break;
 }   

[khades]

@pavelzubov try my fix (see above), and check if it builds with dynamic imports.

It is not guaranteed that nextjs is not buggy here

[ghost]

any news about this?

[jackguoAtJogg]

node v10.16.0 - the same error
node v12.12.0 - the same error

only thing that helped is adding

    if (config.optimization.splitChunks) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
    }

in my next.config.js

This solution works for yarn build but break running yarn dev and the error I got is TypeError: Cannot set property 'enforce' of undefined.

[jackguoAtJogg]

I found the solution by combine the solution with this comment: webpack-contrib/mini-css-extract-plugin#341 (comment)

In my next.config.js under webpack(config)

if (config.optimization.splitChunks) {
                    config.optimization.splitChunks.cacheGroups.shared = {
                        name: 'app-other',
                        test: /\.css$/,
                        chunks: 'all',
                        enforce: true,
                    }
                }

I hope this will solve issue for whoever runs into it.

[khades]

finally actually great solution, unlike my hack with !bestMatch break.

Tried it - fixed my issues.

[artworkjpm]

node v10.16.0 - the same error
node v12.12.0 - the same error

only thing that helped is adding

    if (config.optimization.splitChunks) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
    }

in my next.config.js

This workd in yarn build, but broke yarn dev. To fix this I used:

if (NODE_ENV === "production" && config.optimization.splitChunks) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
    }

[TommySorensen]

I got the Cannot read property 'pop' of undefined error in the latest version of NextJS in a random component 🤔

[promotion-xu]

node_modules/mini-css-extract-plugin/dist/index.js line 341

Hello, you way works for me. But I have athother question. If other member clone my project. Does he write this code in node_modules ?

[naupaw]

node v10.16.0 - the same error
node v12.12.0 - the same error
only thing that helped is adding

    if (config.optimization.splitChunks) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
    }

in my next.config.js

This workd in yarn build, but broke yarn dev. To fix this I used:

if (NODE_ENV === "production" && config.optimization.splitChunks) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
    }

I'm adding additional lines commons.enforce

if (NODE_ENV === "production" && config.optimization.splitChunks) {  
  config.optimization.splitChunks.cacheGroups.shared.enforce = true;
  config.optimization.splitChunks.cacheGroups.commons.enforce = true;
}

solve my issues.

[pablohpsilva]

I got the Cannot read property 'pop' of undefined error in the latest version of NextJS in a random component 🤔

Mine as well. I'm using the latest of all packages and I got this error everywhere now.

[aisakeniudun]

Hi,every body, I solved this question by here , in this way, you need to found
node_modules/mini-css-extract-plugin/dist/index.js line 341

        if (!success) {
          // no module found => there is a conflict
          // use list with fewest failed deps
          // and emit a warning
          if (!bestMatch) {
             break;
           }        
          const fallbackModule = bestMatch.pop();
          usedModules.add(fallbackModule);
        }
      }

add this line in there

if (!bestMatch) {
             break;
 }   

this line surely fixed the problem, my node's version is v10.15.3

[urffin]

Hi, every body!
Periodically i get same error Cannot read property 'pop' of undefined even on nodejs 15.

In last time problem was solved with removing from scss styles line with transition

transition: transform .2s ease-in-out;

I don't know how it can be related, but after deleting this line from scss file - error is disappeared

[pablohpsilva]

@urffin might be related. I've checked my files and the problem was also related to that.
Unfortunately, I had 2 other files that had no transition what so ever and I still got the same crappy results :(

This is the final fix:

module.exports = {
  webpack: (config) => {
    if (
      process.env.NODE_ENV === "production" &&
      config.optimization.splitChunks
    ) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
      config.optimization.splitChunks.cacheGroups.commons.enforce = true;
    }

    return config;
  }
};

[urffin]

@urffin might be related. I've checked my files and the problem was also related to that.
Unfortunately, I had 2 other files that had no transition what so ever and I still got the same crappy results :(

This is the final fix:

module.exports = {
  webpack: (config) => {
    if (
      process.env.NODE_ENV === "production" &&
      config.optimization.splitChunks
    ) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
      config.optimization.splitChunks.cacheGroups.commons.enforce = true;
    }

    return config;
  }
};

Sad, but this fix work just for my local computer, but still fail on CI, i mean error still reproduce even when this fix added. And solved just after fixing styles in some components.

[builderRyan]

我通过将解决方案与此评论相结合找到了解决方案：webpack-contrib/mini-css-extract-plugin#341（评论）

在我的 next.config.js 下的 webpack(config)

if (config.optimization.splitChunks) {
                    config.optimization.splitChunks.cacheGroups.shared = {
                        name: 'app-other',
                        test: /\.css$/,
                        chunks: 'all',
                        enforce: true,
                    }
                }

我希望这将为遇到它的人解决问题。

I found the solution by combine the solution with this comment: webpack-contrib/mini-css-extract-plugin#341 (comment)

In my next.config.js under webpack(config)

if (config.optimization.splitChunks) {
                    config.optimization.splitChunks.cacheGroups.shared = {
                        name: 'app-other',
                        test: /\.css$/,
                        chunks: 'all',
                        enforce: true,
                    }
                }

I hope this will solve issue for whoever runs into it.

Thank you for the solution， But this will make the packaging volume larger.
My new solution is to delete node_module, then yarn.
Next 10
Node 10

[insivika]

A word of caution, the solution below broke several pages/components in production (but not in development so it initially looked like it was workig)

if (NODE_ENV === "production" && config.optimization.splitChunks) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
    }

The solution below seems to have fixed the issue for me without affecting production:

    if (config.optimization.splitChunks) {
      config.optimization.splitChunks.cacheGroups.shared = {
        name: 'app-other',
        test: /\.css$/,
        chunks: 'all',
        enforce: true,
      };
    }

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