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