SyntaxError: Cannot use import statement outside a module while using `fast-image-zoom`

Question

我正在尝试在我的 React/Next.js 应用程序中使用 fast-image-zoom，但出现以下错误：

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.fast-image-zoom (my-app\.next\server\pages\_app.js:20969:18)
    at __webpack_require__ (my-app\.next\server\webpack-runtime.js:25:42)
my-app\node_modules\fast-image-zoom\src\index.js:1
import styles from './styles'
^^^^^^

我试着按 _app.tsx 中的方式调用它：

import imageZoom from 'fast-image-zoom';

imageZoom();

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

但是因为它是纯 ESM 模块，所以抛出上述错误。

然后我尝试在 _document.tsx 中使用它，例如：

async componentDidMount() {
    dynamic(() => import('fast-image-zoom').then((mod) => mod.imageZoom), { ssr: false })
}

但后来我没有报错，但它不起作用。

我在这里复制了一个 -> https://stackblitz.com/edit/nextjs-edw9pk?file=pages%2F_app.js

您可以取消注释 pages/_app.js 中的两行以查看错误。

我该如何解决？

Answer 1

将您的文件更改为以下内容

_app.js代码

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const loadImageZoom = async () => {
      const imageZoom = await import('fast-image-zoom').then(
        mod => mod.default
      );
      imageZoom();
    };
    loadImageZoom();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;