RRule Plugin Not Working on v6 on NextJS

[bautistacarpintero]

Reduced Test Case

https://github.com/BautistaCRP/next-fullcalendar-demo

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• I understand

Which connector are you using (React/Angular/etc)?

React

Bug Description

Error:

➜  next-fullcalendar-demo git:(main) ✗ yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1005 ms (170 modules)
wait  - compiling / (client and server)...
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 567 ms (226 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
error - file:///home/bautista/Projects/next-fullcalendar-demo/node_modules/@fullcalendar/rrule/index.js:2
import { RRuleSet, RRule, rrulestr } from 'rrule';
                   ^^^^^
SyntaxError: Named export 'RRule' not found. The requested module 'rrule' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'rrule';
const { RRuleSet, RRule, rrulestr } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  page: '/'
}

index.ts

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import rrulePlugin from '@fullcalendar/rrule';

export default function Home() {
  return (
    <>
      <FullCalendar
        plugins={[
          dayGridPlugin,
          timeGridPlugin,
          listPlugin,
          interactionPlugin,
          rrulePlugin,
        ]}
        initialView='dayGridMonth'
        events={[
          { title: 'event 1', date: '2019-04-01' },
          { title: 'event 2', date: '2019-04-02' },
        ]}
      />
    </>
  );
}

package.json

{
  "name": "next-fullcalendar-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fullcalendar/core": "^6.1.5",
    "@fullcalendar/daygrid": "^6.1.5",
    "@fullcalendar/interaction": "^6.1.5",
    "@fullcalendar/list": "^6.1.5",
    "@fullcalendar/react": "^6.1.5",
    "@fullcalendar/rrule": "^6.1.5",
    "@fullcalendar/timegrid": "^6.1.5",
    "@types/node": "18.15.9",
    "@types/react": "18.0.29",
    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "rrule": "^2.7.2",
    "typescript": "5.0.2"
  }
}

[eytanProxi]

Same problem with SvelteKit ... 😢

[agrattan0820]

Getting the same issue here with my Next.js project 🥲

[agrattan0820]

I'm assuming it's related to this jkbrzt/rrule#548

[agrattan0820]

Got a temporary solution as of now in @fullcalendar/rrule/index.js that seems to work for me:

--- a/node_modules/@fullcalendar/rrule/index.js
+++ b/node_modules/@fullcalendar/rrule/index.js
@@ -1,5 +1,6 @@
 import { createPlugin } from '@fullcalendar/core/index.js';
-import { RRuleSet, RRule, rrulestr } from 'rrule';
+import * as pkg from 'rrule';
+const { RRule } = pkg;
 import { parseMarker, identity, createDuration } from '@fullcalendar/core/internal.js';
 
 const recurringType = {
@@ -43,7 +44,7 @@ function parseEventRRule(eventProps, dateEnv) {
     }
     if (typeof eventProps.rrule === 'object' && eventProps.rrule) { // non-null object
         let res = parseRRuleObject(eventProps.rrule, dateEnv);
-        rruleSet = new RRuleSet();
+        rruleSet = new pkg.RRuleSet();
         rruleSet.rrule(res.rrule);
         isTimeSpecified = res.isTimeSpecified;
         isTimeZoneSpecified = res.isTimeZoneSpecified;
@@ -87,7 +88,7 @@ function parseRRuleObject(rruleInput, dateEnv) {
     return { rrule: new RRule(rruleOptions), isTimeSpecified, isTimeZoneSpecified };
 }
 function parseRRuleString(str) {
-    let rruleSet = rrulestr(str, { forceset: true });
+    let rruleSet = pkg.rrulestr(str, { forceset: true });
     let analysis = analyzeRRuleString(str);
     return Object.assign({ rruleSet }, analysis);
 }

[arshaw]

In v6.1.6 I changed the way the rrule package is imported. Could you all please confirm things are working now?

[bautistacarpintero]

Hello @arshaw 👋

I just tested and is working perfectly fine!! Thank you for the bugfix and thanks for doing it so fast!! Great job and awesome community 😎💪