mezh-hq / react-seat-toolkit Goto Github PK

Description:
I am trying to use the react-seat-toolkit package in my Next.js application, but I am encountering the following error:

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1274:20)
at Module._compile (node:internal/modules/cjs/loader:1320:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at Module.require (node:internal/modules/cjs/loader:1225:19)
at mod.require (D:\ReactApp\myproject\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:177:18)
at @mezh-hq/react-seat-toolkit (D:\ReactApp\myproject.next\server\pages[locale]\events[eventId]\seat.js:1747:18)
at webpack_require (D:\ReactApp\myproject.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./screens/screen-event-seat.tsx:13:85)
at webpack_require.a (D:\ReactApp\myproject.next\server\webpack-runtime.js:97:13)
at eval (webpack-internal:///./screens/screen-event-seat.tsx:1:21)
at ./screens/screen-event-seat.tsx (D:\ReactApp\myproject.next\server\pages[locale]\events[eventId]\seat.js:1617:1) {
page: '/en/events/EVENT-789833323/seat'
}

Steps to reproduce the behavior:

1. Install react-seat-toolkit in a Next.js project with pages router.
2. Attempt to import the SeatPicker component:
3. Run the Next.js application.

Expected Behavior:
The SeatPicker component should be imported and rendered without any issues.

Actual Behavior:
The application fails to compile and throws an error:

Code:

import SeatToolkit, { SeatStatus } from "@mezh-hq/react-seat-toolkit";
import "@mezh-hq/react-seat-toolkit/styles";
import {
  IPopulatedSeat,
  ISTKData,
  SeatSelectionMode,
} from "@mezh-hq/react-seat-toolkit/types";

  const data = {
    seats: [
      {
        id: "1",
        x: 0,
        y: 0,
        label: "A1",
        status: SeatStatus.Available,
      },
      {
        id: "2",
        x: 35,
        y: 0,
        label: "A2",
        status: SeatStatus.Available,
      },
    ],
  } satisfies ISTKData;

const ScreenEventSeat = () => {
  const onSeatClick = (seat: IPopulatedSeat) => {
    console.log(seat);
  };

  return (
    <section className="flex justify-between gap-8">
      <SeatToolkit
        mode="user"
        styles={{
          root: {
            className: "bg-gray-100 p-4 flex-1 w-full rounded-md",
          },
        }}
        data={data}
        events={{
          onSeatClick: onSeatClick,
        }}
      />
    </section>
  );
};

export default ScreenEventSeat;

Screenshots

Environment:

• Next.js version: 14.0.4 (Pages Router)
• react-seat-toolkit version: 1.3.1
• Node.js version: 18.19.1
• OS: Windows 11 Home(64-bit) - Version: 23H2 - OSBuild: 22631.3737
• Browser: Brave Browser Version 1.67.123 Chromium: 126.0.6478.126 (Official Build) (64-bit)

Additional Context:
While Installing package:
If i try to add using
npm i -g @mezh-hq/react-seat-toolkit
it fails saying it cant find the module 'patch-package'. So i first add patch-package and then seat-toolkit it successfully added the package.

After encountering the error:
I tried clearing yarn, and npm cache and nodemodules, but nothing seems to work!