Example Usage of Bryntum in NextJS is too complicated

[jeffreyschultz]

I was trying to get Bryntum Scheduler Pro (trial) working in NextJS but kept having issues with the examples. I ended up coming up with this as a solution that eliminates the need for both a Scheduler and SchedulerWrapper component. It might benefit someone in the future if you incorporated something like this into your docs and examples.

'use client';

import React, { forwardRef } from 'react';
import dynamic from 'next/dynamic';

import { BryntumSchedulerPro, BryntumSchedulerProProps } from '@bryntum/schedulerpro-react';

export const Scheduler = dynamic(
  () =>
    import('@bryntum/schedulerpro-react')
      .then((module) => {
        const Component = module.BryntumSchedulerPro;
        return forwardRef<BryntumSchedulerPro, BryntumSchedulerProProps>((props, ref) => (
          <Component ref={ref} {...props} />
        ));
      })
      .catch((error) => {
        console.error('Failed to load module:', error);
        return () => <p>Error loading component.</p>;
      }),
  {
    ssr: false,
    loading: () => {
      return (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100vh',
          }}
        >
          <p>Loading...</p>
        </div>
      );
    },
  }
);

[khattakdev]

Hey 👋

First issue in @bryntum, AWESOME!

kept having issues with the examples

What are the issues you were having? Can you list them all here and possibly share steps to reproduce them.

I ended up coming up with this as a solution that eliminates the need for both a Scheduler and SchedulerWrapper component.

Thanks for sharing this approach. To my knowledge, it is only eliminating the extra files and putting things in a single file. You have still used the Wrapper here.

const Component = module.BryntumSchedulerPro;

[jeffreyschultz]

I will follow up with more details on the issues that I encountered.

If you look at the example in this repo, you will see that you have to create NextJS Scheduler and SchedulerWrapper components around the Bryntum React wrapper to dynamically import the wrapper. You end up having to create two components just to use the Scheduler in a NextJS app. This approach I have provided only requires a single new component, and it can likely be made generic as a HOC to easily wrap the Bryntum wrappers for use in React without having to write this code for each Bryntum React wrapper.

If it were generic and provided as a HOC, then it would turn into something like this.

const Scheduler = dynamicForwardRef<BryntumSchedulerPro, BryntumSchedulerProProps>("@bryntum/schedulerpro-react", (module) => module.BryntumSchedulerPro);

That completely eliminates those two new files that are used in this example.

[khattakdev]

Can you also shed some light on the issues with our current demos.

[khattakdev]

@jeffreyschultz - A Friendly reminder on this, can you please share the issues with us that you have encountered

[khattakdev]

Hey @jeffreyschultz

This is a final reminder to see if you still need assistance with the issue you raised.

If you're still experiencing issues, please provide more details so we can help you resolve them and improve our example. If we don’t hear back from you within the next week, we will assume the issue has been resolved and close this issue.