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

Question

I am trying to use fast-image-zoom in my React/Next.js app & I get the following error:

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'
^^^^^^

I tried calling it as is in _app.tsx:

import imageZoom from 'fast-image-zoom';

imageZoom();

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

export default MyApp;

But it threw the above error as it is a pure ESM module.

Then I tried using it in _document.tsx like:

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

But then I have no error but it doesn't work.

I've made a reproduction here -> https://stackblitz.com/edit/nextjs-edw9pk?file=pages%2F_app.js

You can uncomment the 2 lines in pages/_app.js to see the errors.

How can I solve it?

When you call imageZoom() inside MyApp, does the error go away? — Sinan Yaman
– Sinan Yaman, Commented Aug 16, 2021 at 10:55
@SinanYaman nope as the module is pure ESM so I need a check for it to only work in client-side. I tried using process.browser but that doesn't do any good as well. — deadcoder0904
– deadcoder0904, Commented Aug 16, 2021 at 11:08

Mayank Narula · Accepted Answer · 2021-08-16 17:14:54Z

1

Change your file to below

_app.js code

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;

answered Aug 16, 2021 at 17:14

Mayank Narula

4094 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

deadcoder0904 Over a year ago

Thank you that works. Is there any reason the first time I click on zoom, it is reasonably slow? Only on my app, the Stackblitz works fine :)

Mayank Narula Over a year ago

No idea regarding that as I haven't tried the library myself. But you could check chrome dev tools and do a profiling which could give you insights on improving that part.

deadcoder0904 Over a year ago

Never did profiling so let me know if you have any recommended resources to get started :)

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related