Nextjs module not found: Can't resolve 'the-supersonic-plugin-for-scroll-based-animation'

[aboutjquery]

Hello, this plugin is great, but I have a problem and can't import the plugin I'm using nextjs, below is the code

import {
 TheSupersonicPlugin,
} from 'the-supersonic-plugin-for-scroll-based-animation';

 new TheSupersonicPlugin([
 {
 start: '.start',
 end: '.end',
 elements: ['.animatable-element'],
 },
 ]);

What is the reason? I have installed the plug-in correctly.

Thanks.

[the-illarionov]

@aboutjquery Can you give a screenshot or error code?

[aboutjquery]

@aboutjquery Can you give a screenshot or error code?

Build Error
Failed to compile

Module not found: Can't resolve 'the-supersonic-plugin-for-scroll-based-animation'
  1 | import { useTranslations } from 'next-intl';
  2 | import Container from 'react-bootstrap/Container';
> 3 | import { TheSupersonicPlugin } from 'the-supersonic-plugin-for-scroll-based-animation';
    | ^
  4 |
5 | const plugin = new TheSupersonicPlugin([
  6 |   {

Hi, that is the error code, thanks.

[the-illarionov]

@aboutjquery it looks like you haven't installed the plugin via npm install the-supersonic-plugin-for-scroll-based-animation --save-dev

[aboutjquery]

@aboutjquery it looks like you haven't installed the plugin via npm install the-supersonic-plugin-for-scroll-based-animation --save-dev

I have already installed

"the-supersonic-plugin-for-scroll-based-animation": "^2.1.0"

I have no idea why its happen.

[the-illarionov]

@aboutjquery i'm not super familiar with nextjs, but if you can locate the-supersonic-plugin-for-scroll-based-animation in your node_modules folder, a possible reason maybe is that nextjs tries to execute plugin in SSR mode and it fails, because plugin relies on browser API, which is not available in SSR mode. I would try to import plugin dynamically like here.

Please return with an answer if it helps.

[aboutjquery]

@aboutjquery i'm not super familiar with nextjs, but if you can locate the-supersonic-plugin-for-scroll-based-animation in your node_modules folder, a possible reason maybe is that nextjs tries to execute plugin in SSR mode and it fails, because plugin relies on browser API, which is not available in SSR mode. I would try to import plugin dynamically like here.

Please return with an answer if it helps.

Thanks and sorry for my late reply, I am using SSG now, and I tried:

const TheSupersonicPlugin = dynamic(
  () =>
    import('the-supersonic-plugin-for-scroll-based-animation').then(
      (mod) => mod.TheSupersonicPlugin,
    ),
  { ssr: false },
);

Error report

Module not found: Can't resolve 'the-supersonic-plugin-for-scroll-based-animation'
  14 | const TheSupersonicPlugin = dynamic(
  15 |   () =>
> 16 |     import('the-supersonic-plugin-for-scroll-based-animation').then(
     |     ^

I am no idea why its happen.