nextjs9 加载 antd4 国际化语言包报错

Question

nextjs版本 8.* 9.*
antd 版本 4.*

import zh_CN from 'antd/lib/locale-provider/zh_CN';

或

import zh_CN from 'antd/lib/locale/zh_CN';

都报如下错误

换了antd3 最新的版本也是一样的错误

Answer 1

nextjs默认把node_modules下一个js作为一个公共的js来处理，webpack就不会去分析node_modules下一个js的依赖了，会导致很多在node_modules中的依赖拿取不到，你可以尝试

 webpack(config) {
    if (config.externals) {
      const includes = [/locale/]
      config.externals = config.externals.map((external) => {
        if (typeof external !== 'function') return external
        return (ctx, req, cb) => {
          return includes.find((include) =>
            req.startsWith('.') ? include.test(path.resolve(ctx, req)) : include.test(req)
          )
            ? cb()
            : external(ctx, req, cb)
        }
      })
    }
    return config
  }

Answer 2

我的理解是，要让webpack的loader去处理这个esModule，所以要在externals这地方判断一下，不要给他排除了

webpack: (config, { isServer }) => {
    if (isServer) {
      const antdLocale = /antd\/es/;
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles) || request.match(antdLocale)) 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',
      });
    }
  

Answer 3

请问楼主解决了这个问题了没呢，目前做项目也卡到这个地方了，楼主能分享一下经验码