Next.js动态导入非组件遇阻：slickgrid-react构建报错求助

问题分析 #

• App目录下标记'use client'的页面/组件引入slickgrid-react后，开发环境正常但构建时抛出window is not defined错误
• 使用next/dynamic导入非组件模块（如Formatters、Filters）时触发报错，因该函数仅支持React组件的动态导入
• 通过useEffect异步导入后，直接访问ref.current会出现Cannot read properties of null错误，原因是异步导入未完成时组件已完成首次渲染

解决方案 #

方案1：异步导入配合加载状态（推荐） #

在组件内通过useEffect异步导入slickgrid-react的非组件模块，同时用状态变量跟踪加载状态，确保仅在导入完成后使用相关模块：

'use client';

import { useState, useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';

// 动态导入slickgrid-react组件并禁用SSR
const SlickgridReact = dynamic(() => import('slickgrid-react').then(mod => mod.SlickgridReact), { ssr: false });

export default function SlickGridWrapper() {
  const [isModulesLoaded, setIsModulesLoaded] = useState(false);
  // 存储非组件模块的ref
  const groupTotalFormatters = useRef<any>(null);
  const formatters = useRef<any>(null);
  const filters = useRef<any>(null);

  useEffect(() => {
    let isMounted = true;

    const loadSlickgridModules = async () => {
      try {
        const { GroupTotalFormatters, Formatters, Filters } = await import('slickgrid-react');
        
        if (isMounted) {
          groupTotalFormatters.current = GroupTotalFormatters;
          formatters.current = Formatters;
          filters.current = Filters;
          setIsModulesLoaded(true);
        }
      } catch (err) {
        console.error('加载slickgrid模块失败:', err);
      }
    };

    loadSlickgridModules();

    return () => {
      isMounted = false;
    };
  }, []);

  // 未加载完成时显示占位状态
  if (!isModulesLoaded) {
    return <div>加载表格中...</div>;
  }

  // 安全使用导入的模块
  const sumTotalsFormatter = groupTotalFormatters.current.sumTotals;

  return (
    <SlickgridReact
      columns={[
        {
          id: 'amount',
          name: '金额',
          field: 'amount',
          formatter: sumTotalsFormatter
        }
      ]}
      gridOptions={{ enableGrouping: true }}
      dataset={[]}
    />
  );
}

方案2：封装客户端专属导入模块 #

创建单独的客户端文件统一处理slickgrid-react非组件模块的导入，确保仅在浏览器环境下加载：

1. 创建slickgrid-client-imports.ts文件：

// slickgrid-client-imports.ts
'use client';

import type { GroupTotalFormatters, Formatters, Filters } from 'slickgrid-react';

// 初始化导出变量为null
export let GroupTotalFormatters: typeof GroupTotalFormatters | null = null;
export let Formatters: typeof Formatters | null = null;
export let Filters: typeof Filters | null = null;

// 仅在浏览器环境下异步导入模块
if (typeof window !== 'undefined') {
  (async () => {
    const mod = await import('slickgrid-react');
    GroupTotalFormatters = mod.GroupTotalFormatters;
    Formatters = mod.Formatters;
    Filters = mod.Filters;
  })();
}

2. 在组件中使用该模块：

'use client';

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { GroupTotalFormatters } from './slickgrid-client-imports';

const SlickgridReact = dynamic(() => import('slickgrid-react').then(mod => mod.SlickgridReact), { ssr: false });

export default function SlickGridWrapper() {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    // 轮询检查模块是否加载完成
    const checkLoadedInterval = setInterval(() => {
      if (GroupTotalFormatters) {
        setIsLoaded(true);
        clearInterval(checkLoadedInterval);
      }
    }, 50);

    return () => clearInterval(checkLoadedInterval);
  }, []);

  if (!isLoaded) {
    return <div>加载中...</div>;
  }

  return (
    <SlickgridReact
      columns={[
        {
          id: 'total',
          name: '总计',
          field: 'total',
          formatter: GroupTotalFormatters.sumTotals
        }
      ]}
      gridOptions={{ enableGrouping: true }}
      dataset={[]}
    />
  );
}

关键原因解释 #

1. 为何'use client'仍触发SSR错误？
   App Router中，'use client'标记的组件虽最终在客户端执行，但构建/预渲染阶段服务器会解析组件的顶层代码（包括导入语句）。如果slickgrid-react的模块在顶层导入时直接访问window对象，服务器端解析时就会触发window is not defined错误，因此必须确保这些模块仅在浏览器环境下导入。

2. 为何异步导入后会出现null取值错误？
   组件渲染流程早于useEffect的执行时机，首次渲染时useEffect中的异步导入还未完成，此时ref.current仍为null，直接访问其属性就会抛出错误。通过加载状态变量等待导入完成后再渲染依赖代码，即可避免该问题。

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