How I got this to work with Parcel bundler

[berttejeda]

node version = v18.11.0
npm version = 8.19.2
parcel version = 2.9.3
react version = 18.2.0
react-dom = 18.2.0
spectacle = 10.1.4

Notice: I am by no means an expert developer at React/Node. I am simply putting this here in case someone finds my instructions/experience useful.

Below are the steps I took to get this to work with a project I'm working on that utilizes Parcel bundler:

1. Cloned the repo to an arbitrary location (e.g. ~/git)
2. Changed working directory, cd ~/git/spectacle

3. Introduced my changes: git diff src/hooks/use-location-sync.ts

   index b167e43..215d101 100644
   --- a/packages/spectacle/src/hooks/use-location-sync.ts
   +++ b/packages/spectacle/src/hooks/use-location-sync.ts
   @@ -1,9 +1,10 @@
    import { useState, useEffect, useCallback } from 'react';
   -import { createBrowserHistory, Location } from 'history';
   +import { Location } from 'history';
    import QS from 'query-string';
    import isEqual from 'react-fast-compare';
    import { mergeAndCompare, merge } from 'merge-anything';
    import { DeckView } from './use-deck-state';
   +import { useNavigate } from 'react-router-dom';
    import {
      mapLocationToState,
      mapStateToLocation,
   @@ -42,7 +43,6 @@ type LocationStateOptions = {
      mapStateToLocation: typeof mapStateToLocation;
      mapLocationToState: typeof mapLocationToState;
      mergeLocation?: typeof defaultMergeLocation;
   -  historyFactory?: typeof createBrowserHistory;
      disableInteractivity?: boolean;
    };
   
   @@ -53,8 +53,8 @@ export default function useLocationSync({
      mapLocationToState,
      disableInteractivity = false,
      mergeLocation = defaultMergeLocation,
   -  historyFactory = createBrowserHistory
    }: LocationStateOptions) {
   +  historyFactory = useNavigate();
      const [history] = useState(() => {
        return typeof document !== 'undefined' ? historyFactory() : null;
      });

4. Built the new spectacle package

   yarn install
   npm install -g pnpm
   npm install -g wireit
   npm install -g nps
   npm install -g tsup
   npx pnpm install
   npx pnpm run build

5. Changed working directory, cd ~/git/myproject
6. Installed the modified spectacle package yarn add ~/git/spectacle/packages/spectacle