next.js编译时候出现"Cannot read property 'pop' of undefined"的问题

这个真的是报错报的莫名其妙。(:з」∠)

问题：

Cannot read property 'pop' of undefine

原因：

找了很久解决方法，似乎是mini-css-extract-plugin这个插件引起的，所以有很多都是说直接改的 “mini-css-extract-plugin” 里面的文件，开发环境这么玩，生产环境的话就只能改完后，在公司的npm仓库重新发包，然后部署的时候直接从公司npm仓库下载，但不利于更新和迭代。最后总算勉强找到一个方法。

解决：

在配置文件next.config.js加入

module.exports = widthcss(widthLess({
  ...
  webpack: (config) => {
    // 增加的内容
    if (config.optimization.splitChunks && isProd) {
      config.optimization.splitChunks.cacheGroups.shared.enforce = true;
    }
    // 增加的内容
    
    ...
  },
}));

顺便贴一下其他解决方法，找都找了 (:з」∠)

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

---

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

---

only by modifying mini-css-extract-plugin itself. Before line

mini-css-extract-plugin/src/index.js

Line 498 in 1ffc393

const fallbackModule = bestMatch.pop();

add code

if (!bestMatch) {
    break;
}

I think that’s the right way, cause bestMatch is not filled when all chunks have all modules resolved.

参考资料：

mini-css-extract-plugin: Cannot read property ‘pop’ of undefined #341

next.js: Cannot read property ‘pop’ of undefined #10161