Next.js SSR场景下如何动态导入React组件库的非组件类导出内容

方案1：调整组件库编译配置（优先推荐，根源解决问题） #

UMD格式默认会硬编码self作为全局对象指代，而Node.js（SSR运行环境）不存在self变量，仅存在global，你可以修改组件库的webpack配置自动适配多环境全局对象：

• 新增webpack output的globalObject配置：

// 组件库webpack.config.js
module.exports = {
  output: {
    // 保留原有其他output配置
    library: "你的组件库名称",
    libraryTarget: "umd",
    globalObject: "this", // 新增该行，webpack会自动适配浏览器/Node.js的全局对象
  },
  // 其他原有配置
};

• 重新编译发布组件库后，Next.js侧可直接导入所有导出内容，不需要额外兼容处理。

方案2：不改动组件库的前提下，Next.js侧兼容 #

如果暂时无法调整组件库配置，可选择以下两种兼容方式：

方式A：动态导入配合环境判断 #

你之前用process.browser条件导入未生效，是因为静态import语句会被打包工具提升到作用域顶部，无论判断条件都会先执行，改成动态导入写法即可：

// 全局变量场景
let breakpoints, colorConstants;
if (typeof window !== "undefined") {
  const lib = await import("你的组件库名称");
  breakpoints = lib.breakpoints;
  colorConstants = lib.colorConstants;
}

如果是在组件内部使用，可放在useEffect中执行：

import { useEffect, useState } from "react";

const Demo = () => {
  const [libConfig, setLibConfig] = useState(null);
  useEffect(() => {
    import("你的组件库名称").then((lib) => {
      setLibConfig({
        breakpoints: lib.breakpoints,
        colors: lib.colorConstants,
      });
    });
  }, []);

  if (!libConfig) return null; // 可替换为加载态
  // 正常使用libConfig中的变量
};

方式B：全局注入变量+打包配置适配 #

• 首先在项目入口文件（如pages/_app.js、app/layout.js）的最顶部添加全局变量兼容：

// 首行添加
if (typeof global.self === "undefined") global.self = global;

• 然后修改next.config.js，将组件库加入服务端外部依赖列表（Next.js 13+）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["你的组件库名称"],
  },
};

module.exports = nextConfig;

配置完成后重启项目即可正常导入所有导出内容。

内容的提问来源于stack exchange，提问作者SanLW