如何修复 React 应用程序中的 fancybox 编译错误

Question

我将 fancybox 更新到最新版本，并为我的 React App 启动了 npm start。但是，我遇到了这些错误消息：

Compiled with problems:

ERROR in ./src/Pages/Fancybox.jsx 5:0-80

Module not found: Error: Package path ./dist/fancybox.esm.js is not exported from package /Users/*/Documents/GitHub/*/node_modules/@fancyapps/ui (see exports field in /Users/*/Documents/GitHub/*/node_modules/@fancyapps/ui/package.json)


ERROR in ./src/Pages/Fancybox.jsx 6:0-41

Module not found: Error: Package path ./dist/fancybox.css is not exported from package /Users/*/Documents/GitHub/*/node_modules/@fancyapps/ui (see exports field in /Users/*/Documents/GitHub/*/node_modules/@fancyapps/ui/package.json)

我想查看文档，但它们不再可用。我在 github 上提出了一个问题，看看我是否可以对包进行任何更改。我尝试将

esm

更改为

umd

和

'@fancyapps/ui/dist/fancybox.css'

到

'@fancyapps/ui/dist/fancybox/fancybox.css'

等，但似乎没有任何效果。因此，我无法加载我的应用程序。

Fancybox.jsx

import React, { useEffect } from "react";
import { Fancybox as NativeFancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';
import '@fancyapps/ui/dist/fancybox/fancybox.css';

function Fancybox(props) {
  const delegate = props.delegate || "[data-fancybox]";

  useEffect(() => {
    const opts = props.options || {};

    NativeFancybox.bind(delegate, opts);

    return () => {
      NativeFancybox.destroy();
    };
  }, [delegate, props.options]);

  return <>{props.children}</>;
}

export default Fancybox;