search

geovistory / design-system

MIT License
2 stars 1 forks source link

broken SSR #50

Closed flicksolutions closed 1 year ago

flicksolutions commented 1 year ago

In the SSR-Tutorial we get to use the renderToString-Function of the web/hydrate-Package. This function broke between versions 1.4.3 and latest (1.10.0). As it is now, the function produces a Hydrate Error. It tells us the following:

ReferenceError: DOMParser is not defined

I tried to take a look at the code in question, but couldn't find it in the repo. So this is all I can contribute to debugging this.

joschne commented 1 year ago

I found the issue to be related to the way plotly.js is added to the design-system.

plotly.js was added in version 1.9.0.

Steps to reproduce:

git clone https://github.com/geovistory/stencil-next-hydrate-example

In package.json change:

    "@geovistory/design-system-web": "^1.4.3" -> "1.9.0"

Install

npm install

Run 

npm run dev

Debugging results

node_modules/@geovistory/design-system-web/hydrate/index.js line 48069 catches an error during hydration:

ReferenceError: DOMParser is not defined
    at Object.7676 (/Users/admin/Gorg/stencil-next-hydrate-example/node_modules/@geovistory/design-system-web/hydrate/index.js:20108:183699)
...

the referenced line index.js:20108 is plotly.js, the following snipped shows lines 20101-20108: 

/**
* plotly.js (basic - minified) v2.18.1
* Copyright 2012-2023, Plotly, Inc.
* All rights reserved.
* Licensed under the MIT license
*/
/*! For license information please see plotly-basic.min.js.LICENSE.txt */
!function …