opentripplanner / otp-ui

React component library, which can be used to build trip planner webapps.
http://www.opentripplanner.org/otp-ui/?path=/story/transitvehicleoverlay--real-time-rectangles
MIT License
54 stars 34 forks source link

webpack build failure - otp-ui should be SSR compliant (i.e., rid the code of 'window' and 'document') #489

Open fpurcell opened 1 year ago

fpurcell commented 1 year ago

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");

fpurcell commented 1 year ago

FYI: this fixes things -- https://github.com/opentripplanner/otp-ui/compare/master...trip-form-SSR_issue-489#diff-f08612d470b1b661180df4aeeeba3fe9a77394c8960fb7a8a689feb7fdd1a922