Next.js 13.4+TypeScript导入PhotoSwipeLightbox报错求助

第一步：清理冲突的类型依赖 #

PhotoSwipe v5及以上版本自带官方TypeScript类型声明，你单独安装的@types/photoswipe反而会和内置类型冲突，先卸载它：

npm uninstall @types/photoswipe

第二步：确保安装正确版本的PhotoSwipe #

如果你的PhotoSwipe版本过低，可能没有内置类型或正确的导出路径，重新安装最新稳定版：

npm install photoswipe@latest

第三步：修正导入路径与TS配置 #

正确的导入方式

直接使用官方推荐的路径，不要手动去dist目录找类型文件：

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css'; // 务必导入样式文件

调整tsconfig.json配置

确保你的tsconfig.json（或tsconfig.app.json）核心配置项正确：

{
  "compilerOptions": {
    "moduleResolution": "Node16", // 若package.json含"type": "module"则用NodeNext，否则用Node16
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

第四步：Next.js App Router额外处理 #

如果你用的是Next.js App Router（app目录），必须给组件加上'use client'指令——PhotoSwipe是客户端侧运行的库，无法在服务端组件中初始化：

'use client';

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';

export default function Gallery() {
  // 初始化示例
  const lightbox = new PhotoSwipeLightbox({
    gallery: '#my-gallery',
    children: 'a',
    pswpModule: () => import('photoswipe')
  });

  lightbox.init();

  return (
    <div id="my-gallery">
      <a href="large-image.jpg" data-pswp-width="1200" data-pswp-height="800">
        <img src="thumbnail.jpg" alt="示例图片" />
      </a>
    </div>
  );
}

最后排查步骤 #

如果仍报错，删除node_modules、package-lock.json（或yarn.lock）后重新执行npm install，强制刷新依赖缓存。

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