Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
fpurcell opened this issue Nov 22, 2022 · 1 comment
Labels
BLOCKERS Blockers exist outside of otp-ui (e.g., backend, service, etc...) MEDIUM-HIGH

Comments

@fpurcell
Copy link
Member

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 fpurcell added MEDIUM-HIGH BLOCKERS Blockers exist outside of otp-ui (e.g., backend, service, etc...) labels Nov 22, 2022
@fpurcell
Copy link
Member Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
BLOCKERS Blockers exist outside of otp-ui (e.g., backend, service, etc...) MEDIUM-HIGH
Projects
None yet
Development

No branches or pull requests

1 participant