UnhandledPromiseRejectionWarning: TypeError: 无法读取 antd 和 nextjs 中未定义的属性“startsWith”

Question

我使用所有最新版本的 ant design 设置了我的 nextjs 项目。当我尝试配置 next.config.js 文件时，会抛出此错误。更具体地说，当我添加 webpack 配置时会发生错误。

 next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

(node:7620) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(node:7620) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:7620) [DEP_WEBPACK_CHUNK_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: ChunkTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:7620) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:7620) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
(node:7620) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
(node:7620) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\build\webpack-config.js:48:23)
    at Array.webpackConfig.externals._webpack.isWebpack5.require.resolve.paths (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\build\webpack-config.js:87:77)
    at config.externals (D:\OfficeProjects\heritage\management-frontend\management-ui\next.config.js:25:29)
    at D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:53948:21
    at deprecated (internal/util.js:70:15)
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54095:8)
    at next (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54073:9)
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54078:7)
    at D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54175:5
    at Hook.eval [as callAsync] (eval at create (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:31934:10), <anonymous>:37:1)
(node:7620) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (reje
ction id: 1)
(node:7620) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:7620) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\build\webpack-config.js:48:23)
    at Array.webpackConfig.externals._webpack.isWebpack5.require.resolve.paths (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\build\webpack-config.js:87:77)
    at config.externals (D:\OfficeProjects\heritage\management-frontend\management-ui\next.config.js:25:29)
    at D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:53948:21
    at deprecated (internal/util.js:70:15)
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54095:8)
    at next (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54073:9)
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54078:7)
    at D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54175:5
    at Hook.eval [as callAsync] (eval at create (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:31934:10), <anonymous>:37:1)
(node:7620) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (reje
ction id: 2)
(node:7620) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\build\webpack-config.js:48:23)
    at Array.webpackConfig.externals._webpack.isWebpack5.require.resolve.paths (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\build\webpack-config.js:87:77)
    at config.externals (D:\OfficeProjects\heritage\management-frontend\management-ui\next.config.js:25:29)
    at D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:53948:21
    at deprecated (internal/util.js:70:15)
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54095:8)
    at next (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54073:9)
    at handleExternals (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54078:7)
    at D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:54175:5
    at Hook.eval [as callAsync] (eval at create (D:\OfficeProjects\heritage\management-frontend\management-ui\node_modules\next\dist\compiled\webpack\bundle5.js:31934:10), <anonymous>:37:1)
(node:7620) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (reje
ction id: 3)

这里是项目依赖

"dependencies": {
    "@zeit/next-less": "^1.0.1",
    "antd": "^4.16.3",
    "babel-plugin-import": "^1.13.3",
    "less": "^4.1.1",
    "less-vars-to-js": "^1.3.0",
    "next": "11.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5"
  },
  "devDependencies": {
    "@types/react": "17.0.11",
    "@types/react-dom": "^17.0.8",
    "@types/styled-components": "^5.1.10",
    "babel-plugin-styled-components": "^1.12.0",
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.0",
    "typescript": "4.3.4"
  }

babel 配置文件（babel.config.js）

module.exports = function(api) {
    api.cache(true);

    const presets = ['next/babel'];
    const plugins = [
        ['styled-components'],
        [
            "import",
            {
                "libraryName": "antd",
                "style": true
            }
        ]
    ];

    return {
        presets,
        plugins,
    };
};

下一个配置文件（next.config.js）

/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
    fs.readFileSync(path.resolve(__dirname, "./styles/less/antd-custom.less"), "utf8")
);

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables // make your antd custom effective
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
    }
    return config;
  }
});