Next.js: 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 - https://github.com/webpack-contrib/mini-css-extract-plugin/issues/341#issuecomment-594540353

[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 https://github.com/webpack-contrib/mini-css-extract-plugin/issues/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: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/341#issuecomment-675603278

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.