Description
When trying to use the latest version(s) of trip-form component ("@opentripplanner/trip-form": "^3.0.1"), I'm getting the error below when I try to yarn build a static file version of the TORA app. In the past, we've been able to exclude other parts of otp-ui that use 'document' or 'window' (e.g., variables that are not available when doing a build or SSR).
failed Building static HTML for pages - 26.436s
ERROR #95312
"document" is not available during server side rendering.
See our docs page for more info on this error: https://gatsby.dev/debug-html
29 | */
30 | function isInputTypeSupported(type) {
> 31 | var input = document.createElement("input");
| ^
32 | input.setAttribute("type", type);
33 | return input.type === type;
34 | }
WebpackError: ReferenceError: document is not defined
- index.js:31 isInputTypeSupported
node_modules/@opentripplanner/trip-form/esm/DateTimeSelector/index.js:31:1
- index.js:36 Module../node_modules/@opentripplanner/trip-form/esm/DateTimeSelector/index.js
node_modules/@opentripplanner/trip-form/esm/DateTimeSelector/index.js:36:1
- index.js:1 Module../node_modules/@opentripplanner/trip-form/esm/index.js
node_modules/@opentripplanner/trip-form/esm/index.js:1:1
- styled.js:1 Module../src/trip-planner/components/ModeSelector/styled.js
src/trip-planner/components/ModeSelector/styled.js:1:1
FWIW, here are all the uses of these variable OTP-UI:
$ find ../src/packages -type f | xargs grep 'window.|document.'
../otp-ui-src/packages/core-utils/src/itinerary.ts: ((getTextWidth as GetTextWidth).canvas = document.createElement("canvas"));
../otp-ui-src/packages/core-utils/src/query.js: return qs.parse(window.location.href.split("?")[1]);
../otp-ui-src/packages/core-utils/src/storage.ts: window.localStorage.setItem(
../otp-ui-src/packages/core-utils/src/storage.ts: itemAsString = window.localStorage.getItem(${STORAGE_PREFIX}.${key});
../otp-ui-src/packages/core-utils/src/storage.ts: window.localStorage.removeItem(${STORAGE_PREFIX}.${key});
../otp-ui-src/packages/core-utils/src/ui.ts: const overlay = document.querySelector(selector);
../otp-ui-src/packages/itinerary-body/src/AccessLegBody/mapillary-button.tsx: window.open(
../otp-ui-src/packages/location-field/src/index.tsx: e.relatedTarget !== null ? e.relatedTarget : document.activeElement;
../otp-ui-src/packages/route-viewer-overlay/src/index.tsx: padding: window.innerWidth > 500 ? 200 : undefined
../otp-ui-src/packages/transitive-overlay/src/index.tsx: padding: window.innerWidth > 500 ? 200 : undefined
../otp-ui-src/packages/trip-form/src/DateTimeSelector/index.tsx: const input = document.createElement("input");