next13+antd运行错误

[Lrunlin]

"next": "13.3.0" "antd": "4.24.7"

[lonelyhentxi]

next 13.3 try swc-plugin-another-transform-imports@0.2.3 @Lrunlin

[Lrunlin]

新的报错。

[Lrunlin]

const path = require("path");
const buildId = require("next-build-id");
const envObject = require("./env/index");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
const withAntdLess = require("next-plugin-antd-less");
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  pageExtensions: ["tsx"],
  experimental: {
    scrollRestoration: true,
    legacyBrowsers: false,
    swcPlugins: [
      [
        "swc-plugin-another-transform-imports",
        {
          antd: {
            transform: "antd/es/${member}",
            skipDefaultConversion: false,
            preventFullImport: true,
            style: "antd/es/${member}/style",
            memberTransformers: ["dashed_case"],
          },
        },
      ],
    ],
  },
  //生产版本打包成独立文件夹
  // output: "standalone",
  eslint: {
    ignoreDuringBuilds: true,
  },
  webpack: config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@type": path.resolve(__dirname, "./types"),
    };
    return config;
  },
  // CDN地址
  assetPrefix: envObject.CDN || "",
  // 设置缓存
  async headers() {
    return [
      {
        source: "/:all*(svg|jpg|png|css|js|webp)",
        locale: false,
        headers: [
          {
            key: "Cache-Control",
            value:
              process.env.NODE_ENV == "production"
                ? "public, max-age=9999999999, must-revalidate"
                : "public, max-age=0, must-revalidate",
          },
        ],
      },
    ];
  },
  generateBuildId: () =>
    buildId()
      .then(res => res)
      .catch(() => +new Date() + ""),
  env: envObject,
};
module.exports = withBundleAnalyzer(withAntdLess(nextConfig));

[lonelyhentxi]

const path = require("path");
const buildId = require("next-build-id");
const envObject = require("./env/index");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
const withAntdLess = require("next-plugin-antd-less");
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  pageExtensions: ["tsx"],
  experimental: {
    scrollRestoration: true,
    legacyBrowsers: false,
    swcPlugins: [
      [
        "swc-plugin-another-transform-imports",
        {
          antd: {
            transform: "antd/es/${member}",
            skipDefaultConversion: false,
            preventFullImport: true,
            style: "antd/es/${member}/style",
            memberTransformers: ["dashed_case"],
          },
        },
      ],
    ],
  },
  //生产版本打包成独立文件夹
  // output: "standalone",
  eslint: {
    ignoreDuringBuilds: true,
  },
  webpack: config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@type": path.resolve(__dirname, "./types"),
    };
    return config;
  },
  // CDN地址
  assetPrefix: envObject.CDN || "",
  // 设置缓存
  async headers() {
    return [
      {
        source: "/:all*(svg|jpg|png|css|js|webp)",
        locale: false,
        headers: [
          {
            key: "Cache-Control",
            value:
              process.env.NODE_ENV == "production"
                ? "public, max-age=9999999999, must-revalidate"
                : "public, max-age=0, must-revalidate",
          },
        ],
      },
    ];
  },
  generateBuildId: () =>
    buildId()
      .then(res => res)
      .catch(() => +new Date() + ""),
  env: envObject,
};
module.exports = withBundleAnalyzer(withAntdLess(nextConfig));

see next.js 13.1+ new api

https://nextjs.org/docs/advanced-features/compiler#module-transpilation

maybe add antd to the list can resolve?

[Lrunlin]

志强尝试过新的API对antd按需打包，但是没有找到对style文件进行按需打包的方法。也许还是需要尝试使用swc-plugin-another-transform-imports这样的第三方插件

[lonelyhentxi]

志强尝试过新的API对antd按需打包，但是没有找到对style文件进行按需打包的方法。也许还是需要尝试使用swc-plugin-another-transform-imports这样的第三方插件

transpilePackages: ['antd']

this one😂

[Lrunlin]

好吧，不过依然无效，我再去寻找一下方法。谢谢你

[lonelyhentxi]

好吧，不过依然无效，我再去寻找一下方法。谢谢你

…emmm, nextjs default dont compile any packages in node_modules, if you use any esm content (like import/export, older nodejs dont native support them) in node_modules, you need to add all of them (includes nested deps) into this list(>13.1), or add to the list of nextjs-transpile-modules（<13.1）.

if you dont want to add, please write lib folder rather than es folder.

antd/es/${member} => antd/lib/${member}

this will slightly increase bundle size, but easy.😂

---

nextjs默认不会编译node_modules中的任何包，如果您在node_modules中使用任何esm内容（如import/export，较老的nodejs不支持它们），您需要将它们全部（包括嵌套依赖，比如rc-xx）添加到此列表（>13.1），或添加到nextjs-transpile-modules列表（<13.1）。

如果您不想添加，请写lib文件夹而不是es文件夹。

antd/es/${member}=>antd/lib/${member}

这将略微增加打包的大小，但是方便不少

[Lrunlin]

问题解决了，谢谢你

[Lrunlin]

问题解决了，谢谢你

不需要设置transpilePackages，只使用swcPlugins即可

[Lrunlin]

问题解决了，谢谢你

不需要设置transpilePackages，只使用swcPlugins即可

[Lrunlin]

问题解决了，谢谢你

不需要设置transpilePackages，只使用swcPlugins即可

[Lrunlin]

目前启动和部分网页编译没啥问题但是还是会断，我在自己研究研究