I debug your code, it seems that removing handleAntdInServer will not change anything

Chastrlove commented 3 years ago

@SolidZORO I am very puzzled why use externals and null-loader，Can you explain the reason for this use

Chastrlove commented 3 years ago

Reproduce repository: https://github.com/Chastrlove/nextjs-starter

SolidZORO commented 3 years ago

hi，之前的 nextjs 是有需要用到 null-loader 让 server 不去处理 less/css 的，因为 server 无法处理 style。

不过我看 webpack5 的 api 有变动，似乎可以用 ignore 的一个参数代替 null-loader 但没有深入研究。

所以你去掉了这个 loader，在 webpack 4/5 上可以正常运行吗？

Chastrlove commented 3 years ago

// fix: prevents error when .less files are required by node
if (require && require.extensions) {
  require.extensions['.less'] = () => {};
}

这段代码实际上和handlerAntdServer的作用重复了. 我看到这个PR https://github.com/vercel/next.js/pull/7490 是把这段代码去了，换成了handlerAntdServer中的处理方式。我的想法是:如果用了require.extensions['.less'] = () => {};相当于webpack不处理less文件，node运行到less文件的执行个空函数。但是这么做会导致next export命令有问题。于是官方换了处理方式，在externals加入正则（服务器端默认node_modules全部externals），强行让webapck解析less文件,把antd/lib/style下面的文件以webacpk.require的形式引入，同时配合null-loader，把less的打包内容置为空

/***/ "antd/lib/button/style":
/*!****************************************!*\
  !*** external "antd/lib/button/style" ***!
  \****************************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("module.exports = require(\"antd/lib/button/style\");//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vZXh0ZXJuYWwgXCJhbnRkL2xpYi9idXR0b24vc3R5bGVcIj80ZTQyIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6ImFudGQvbGliL2J1dHRvbi9zdHlsZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIm1vZHVsZS5leHBvcnRzID0gcmVxdWlyZShcImFudGQvbGliL2J1dHRvbi9zdHlsZVwiKTsiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///antd/lib/button/style\n");

/***/ }),

/***/ "./node_modules/antd/lib/button/style/index.js":
/*!*****************************************************!*\
  !*** ./node_modules/antd/lib/button/style/index.js ***!
  \*****************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiIuL25vZGVfbW9kdWxlcy9hbnRkL2xpYi9idXR0b24vc3R5bGUvaW5kZXguanMuanMiLCJzb3VyY2VzQ29udGVudCI6W10sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/antd/lib/button/style/index.js\n");

/***/ }),

SolidZORO commented 3 years ago

这些代码放在那边挺久了，可能是为了兼容 nextjs 各个版本而写的。不知道去掉之后会不会对某一个版本的 nextjs 产生影响。

我感觉目前需要测试的版本是： nextjs 9 + webpack4 nextjs 10 + webpack4 nextjs 10 + webpack5

其实我最近一年都没有用 nextjs，这个 plugin 我写完后就没用过，后来发现可以复用在 CRA (cra-co) 上，才开始又继续过来改进维护。

谢谢你的提示，假如有时间，下次再使用 nextjs 时我会测试一下，如果你有时间 PR，也随时欢迎。

SolidZORO / next-plugin-antd-less

I debug your code, it seems that removing handleAntdInServer will not change anything #56