"document is not defined" error in NextJS project

[jde]

Thank you so much for providing this library! I'm looking to incorporate it into my project, which is built with Nextjs.

I've imported and used the Scheduler component in one of my components:

`
import React, { useState } from 'react'
import { Scheduler } from "@aldabil/react-scheduler";

    const TripScheduler = ({ tripId, guestId, isOrganizer }) => {
    
        return (
            <>
                <Scheduler
                    view="week"
                    events={[]}
                    selectedDate={new Date(2021, 4, 5)}
                />        
            </>
        )
    }
    
    export default TripScheduler

`

When I hit the page, I see the following errors in the console:
error - ReferenceError: document is not defined at s (/Users/jde/dev/github/jde/platform/node_modules/@aldabil/react-scheduler/dist/Scheduler.js:1:4194)

I haven't been able to figure out why the document object isn't available in my project while it is available in the Create React App based example. Could it be a difference in the way Nextjs exposes the document element?

Looking into the source code, I'm seeing that the scheduler compiles down to use the basic document functions createElement, createTextNode, etc... Is is possible that this source code could be compiled differently to use other element creation functions?

A last thought I had was whether or not it makes sense to import the dist/SchedulerComponent.js directly, as that is the react/jsx code which may be able to be compiled into the project along with all my classes.

Thanks again for maintaining the project. Any thoughts on how to integrate into my stack would be much appreciated!

[jde]

I'm seeing that his error is coming from next's proclivity to render on the server side. Generally, when doing dom level things like adding script tags, the best practice is to either

1. perform the action in an effect so it only happens on render, or
2. check that (typeof document !== 'undefined') before using the tag so it is only included when the document object is available.

In this case, simply importing the component throws the error and all imports must happen at the top level, so these approaches don't work.

Could there be a way to package the library differently?

[aldabil21]

Hi @jde

You are right. The issue here is that if I don't compile with webpack, Next.js will also throw an error complaining since it won't allow importing css modules within the package folder in node_modules. So the issue is in the webpack compile configuration which to be honest I'm not great at webpack configs.

So until I refactor the css modules approach to use the styled from MUI v5 (which i just upgraded yesterday) and see how can I solve this issue with Nextjs. The way I currently workaround it is to just dynamically import it.

Here is an example of how I currently use it with Next

/* some imports */
import {
  Scheduler as SchedulerProps,
} from "@aldabil/react-scheduler/dist/types";
const Scheduler = dynamic<SchedulerProps>(
  import("@aldabil/react-scheduler").then((mod) => mod.Scheduler),
  {
    ssr: false,
  }
);

const SomeComponent = () => {
  
  return (
    <Scheduler
        view="week"
        events={[]}
        // ... configs
    />
  );
};

Hope this helps.