🧐[问题]更新next.js版本从13.4.5到13.4.12后。ConfigProvider 设置local语言对pro components不生效

[Yuchen-Cui]

🧐 问题描述

我通过ConfigProvider 的local属性来设置语言为英语。今天更新next.js版本后发现包括ProTable,ProFormList在内的多个组件不生效。但是antd的组件都是生效的

💻 示例代码

export default function App({ Component, pageProps: { session, ...pageProps }, }: AppProps) {
  const getPopupContainer = () => document.body;
  return (
    <ConfigProvider locale={en_US}  getPopupContainer={getPopupContainer}>
        <Component {...pageProps} />
    </ConfigProvider>
  )
}

© 版本信息 ant-design/pro-components ：2.6.11 antd : 5.8.3, next : 13.4.8 或者更高的版本

🚑 其他信息

这是更新next.js版本前后的对比

[LengYXin]

不止是 多语言 。https://github.com/ant-design/pro-components/issues/7504#issue-1842950045 其他的配置也都失效了

[jorgelucasalima]

hello friend, is there any way to fix the problem? I have the same problem in my project

[Yuchen-Cui]

hello friend, is there any way to fix the problem? I have the same problem in my project

Well, I couldn't find a way to solve it. I've chosen to use Next.js version 13.4.5 until they fix the issue.

[chenshuai2144]

是不是多版本的了？ 保障provide是同一份了吗？

[Yuchen-Cui]

是不是多版本的了？ 保障provide是同一份了吗？

我检查了，确定不是多版本。整个项目中，我也只有在_app文件中使用ConfigProvider并对其配置了local属性。我从next.js版本13.4.5每个小版本升级排查之后发现，当从13.4.7升级到13.4.8的时候local配置就会失效。13.4.8之前的版本都没有问题。

[jorgelucasalima]

是不是多版本的了？ 保障provide是同一份了吗？

我检查了，确定不是多版本。整个项目中，我也只有在_app文件中使用ConfigProvider并对其配置了local属性。我从next.js版本13.4.5每个小版本升级排查之后发现，当从13.4.7升级到13.4.8的时候local配置就会失效。13.4.8之前的版本都没有问题。

What correction to perform my friend ?

[jorgelucasalima]

Has anyone notified the antd?

[Yuchen-Cui]

Has anyone notified the antd?

I don't believe you need to do that, as it works for all Ant Design components, at least in my project

[jorgelucasalima]

What correction ?

[hengkx]

我升级后也有问题了

[FreeDrifter]

解决了吗 ?

[Yuchen-Cui]

解决了吗 ? 木有，我试着创建了测试的demo，只包含一个页面，然后配置local属性，还是不好用的。next.js版本从13.8开始local 属性的配置就对pro component不生效了。antd的component是正常的

[LengYXin]

是不是多版本的了？ 保障provide是同一份了吗？ antd 等是否多版本情况也排除了。检索了一遍 Pro 使用到 ConfigProvider 的地方。也没发现什么奇怪的地方~ 就很纳闷~

[chenshuai2144]

build 一份出来，搞个统计看看

[FreeDrifter]

确实 next 降级到 13.4.6 就没有问题了. next 13.4.6 以上版本做了变更, 但 Antd 未做兼容导致的吗 ? 问题的根因在哪里 ?

[BubbleCola]

确实 next 降级到 13.4.6 就没有问题了. next 13.4.6 以上版本做了变更, 但 Antd 未做兼容导致的吗 ? 问题的根因在哪里 ?

我也遇到了这个问题 next版本是13.4.19 首次加载路由跳转界面pro组件的theme不生效，但是刷新一下页面theme又好了，降级到13.4.6后问题消失....

[chenshuai2144]

nextjs 经常乱合并pr，上次把 antd 路径拼错了。

[LengYXin]

@chenshuai2144 我破案了。只需要将antd 从 transpilePackages配置中删除即可。大家升级的时候应该都没有改这个配置。虽然还没搞懂什么原理。大家可以试试

之前官方的示例是需要将 antd 加入到 transpilePackages 配置中进行编译转换的。这个配置会导致 ConfigProvider 生效。 没有删除 transpilePackages 配置的情况下

我把 antd 从 transpilePackages 删除后 好使了。

测试代码。

"use client";
import { Button, ConfigProvider, Divider } from 'antd'
import React from 'react';
import { ProForm, ProFormText } from '@ant-design/pro-components'
export default function HomeTest() {
  return (
    <ConfigProvider
      prefixCls='text'
      theme={{
        token: {
          colorPrimary: '#f00'
        }
      }}>
      <main className="flex flex-col items-center justify-between p-24">
        测试页面
        <Button type='primary'>
          我是按钮
        </Button>
        <Divider>表单</Divider>
        <ProForm>

        </ProForm>
      </main>
    </ConfigProvider>

  )
}

Nextjs 版本信息

[MidnightWXD]

@chenshuai2144 我破案了。只需要将antd 从 transpilePackages配置中删除即可。大家升级的时候应该都没有改这个配置。虽然还没搞懂什么原理。大家可以试试

之前官方的示例是需要将 antd 加入到 transpilePackages 配置中进行编译转换的。这个配置会导致 ConfigProvider 生效。 没有删除 transpilePackages 配置的情况下

我把 antd 从 transpilePackages 删除后 好使了。

测试代码。

"use client";
import { Button, ConfigProvider, Divider } from 'antd'
import React from 'react';
import { ProForm, ProFormText } from '@ant-design/pro-components'
export default function HomeTest() {
  return (
    <ConfigProvider
      prefixCls='text'
      theme={{
        token: {
          colorPrimary: '#f00'
        }
      }}>
      <main className="flex flex-col items-center justify-between p-24">
        测试页面
        <Button type='primary'>
          我是按钮
        </Button>
        <Divider>表单</Divider>
        <ProForm>

        </ProForm>
      </main>
    </ConfigProvider>

  )
}

Nextjs 版本信息

我有个问题，我没在next.config.js中配置过transpilePackages.....

[LengYXin]

@chenshuai2144 我破案了。只需要将antd 从 transpilePackages配置中删除即可。大家升级的时候应该都没有改这个配置。虽然还没搞懂什么原理。大家可以试试 之前官方的示例是需要将 antd 加入到 transpilePackages 配置中进行编译转换的。这个配置会导致 ConfigProvider 生效。 没有删除 transpilePackages 配置的情况下 我把 antd 从 transpilePackages 删除后 好使了。 测试代码。

"use client";
import { Button, ConfigProvider, Divider } from 'antd'
import React from 'react';
import { ProForm, ProFormText } from '@ant-design/pro-components'
export default function HomeTest() {
  return (
    <ConfigProvider
      prefixCls='text'
      theme={{
        token: {
          colorPrimary: '#f00'
        }
      }}>
      <main className="flex flex-col items-center justify-between p-24">
        测试页面
        <Button type='primary'>
          我是按钮
        </Button>
        <Divider>表单</Divider>
        <ProForm>

        </ProForm>
      </main>
    </ConfigProvider>

  )
}

Nextjs 版本信息

我有个问题，我没在next.config.js中配置过transpilePackages.....

那直接升级 13.5.2 然后跑一下看看？我这个是无意中发现去掉就好使了~ 其他的比如 transpilePackages 中也不能包含 pro-components 的组件配置

[LengYXin]

还是有问题。步骤是 更改ConfigProvider 配置的热更新情况下 Pro 的组件不会更新。只有整体刷新才行

[LengYXin]

应该是解决了： 排除transpilePackages 会有 client 中 ConfigProvider 丢失的问题。但是SSR 没有问题。 把所有的 依赖丢 transpilePackages 测试一切又正常了。目前测试一切正常。 "next": "13.5.2", 这是我测试的最小化代码仓库：https://github.com/LengYXin/next-antd-pro

[MidnightWXD]

应该是解决了： 排除transpilePackages 会有 client 中 ConfigProvider 丢失的问题。但是SSR 没有问题。 把所有的 依赖丢 transpilePackages 测试一切又正常了。目前测试一切正常。 "next": "13.5.2", 这是我测试的最小化代码仓库：https://github.com/LengYXin/next-antd-pro

你有试过local属性改成enUS么。 我刚才复制了一个protable的示例code到page文件里，然后给ConfigerProvider添加locale={enUS}属性。但是显示的还是中文。

[LengYXin]

应该是解决了： 排除transpilePackages 会有 client 中 ConfigProvider 丢失的问题。但是SSR 没有问题。 把所有的 依赖丢 transpilePackages 测试一切又正常了。目前测试一切正常。 "next": "13.5.2", 这是我测试的最小化代码仓库：https://github.com/LengYXin/next-antd-pro

你有试过local属性改成enUS么。 我刚才复制了一个protable的示例code到page文件里，然后给ConfigerProvider添加locale={enUS}属性。但是显示的还是中文。

Protable加入到transpilePackages没，以及protable依赖的pro组件。我自己项目中的没问题。我把所有的pro直接加入到了transpilePackages，示例里面只加了用到的

[LengYXin]

应该是解决了： 排除transpilePackages 会有 client 中 ConfigProvider 丢失的问题。但是SSR 没有问题。 把所有的 依赖丢 transpilePackages 测试一切又正常了。目前测试一切正常。 "next": "13.5.2", 这是我测试的最小化代码仓库：https://github.com/LengYXin/next-antd-pro

你有试过local属性改成enUS么。 我刚才复制了一个protable的示例code到page文件里，然后给ConfigerProvider添加locale={enUS}属性。但是显示的还是中文。

我把 pro table的官方示例加上了。貌似没啥问题 官方示例：https://procomponents.ant.design/components/table?tab=api&current=1&pageSize=5#%E5%9B%BD%E9%99%85%E5%8C%96%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE

[FeiPengDev]

应该是解决了：排除transpilePackages有客户端中ConfigProvider丢失的问题。但是SSR没有问题。把所有的依赖丢transpilePackages测试一切又正常了。目前测试一切正常。 "next": "13.5.2", 这是我测试的最小化代码仓库：https://github.com/LengYXin/next-antd-pro

你试过把local属性改成enUS么。我刚才复制了一个protable的还是示例代码到页面文件里，然后给ConfigerProvider添加locale={enUS}属性。但是显示的是中文。

我把 pro table 的官方示例加上了。明显没啥问题 官方示例：https://procomponents.ant.design/components/table?tab=api¤t=1&pageSize=5#%E5%9B%BD%E9 %99 %85%E5%8C%96%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE

1. 我在next13.4.9有尝试把全部的pro放到transpilePackages里，locale设置确实生效了。
2. 还有一种方法是添加babellrc，但是这样会导致next使用babel而不是swc

   {
   "presets": [
   "next/babel"
   ],
   "plugins": [
   [
     "import",
     {
       "libraryName": "antd",
       "libraryDirectory": "es"
     }
   ]
   ]
   }

但是方法1同时有个问题就是nextjs在next build的时候内存占用会突然变得很高，当我设置node 2g内存限制都会out of memory，不确定是不是next的优化问题

[MidnightWXD]

@LengYXin 搞定了，感谢万分！

[FeiPengDev]

应该是解决了：排除transpilePackages有客户端中ConfigProvider丢失的问题。但是SSR没有问题。把所有的依赖丢transpilePackages测试一切又正常了。目前测试一切正常。 "next": "13.5.2", 这是我测试的最小化代码仓库：https://github.com/LengYXin/next-antd-pro

你试过把local属性改成enUS么。我刚才复制了一个protable的还是示例代码到页面文件里，然后给ConfigerProvider添加locale={enUS}属性。但是显示的是中文。

我把 pro table 的官方示例加上了。明显没啥问题 官方示例：https://procomponents.ant.design/components/table?tab=api¤t=1&pageSize=5#%E5%9B%BD%E9 %99 %85%E5%8C%96%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE

1. 我在next13.4.9有尝试把全部的pro放到transpilePackages里，locale设置确实生效了。
2. 还有一种方法是添加babellrc，但是这样会导致next使用babel而不是swc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es"
      }
    ]
  ]
}

但是方法1同时有个问题就是nextjs在next build的时候内存占用会突然变得很高，当我设置node 2g内存限制都会out of memory，不确定是不是next和其他依赖存在优化问题

next.config.js中添加如下配置后，build内存占用减少了些。

  swcMinify: false,

--更新：build内存占用高是我们项目新引入的依赖自身问题，且在packageJson里设置set NODE_OPTIONS=--max-old-space-size=4096没生效导致的。已解决~

[FeiPengDev]

@chenshuai2144 @LengYXin 请问关于这个问题我们有更好的解决方案吗？除了babel和transpilePackages

[chenshuai2144]

transpilePackages 这个方案不好吗？

[FeiPengDev]

transpilePackages 这个方案不好吗？

这个方案可行的~感谢！