Issue with rendering <script> returned in page html

🙋Get Help
1

We checked for updates and updated our packages after a few months of not doing it and it caused a string of errors. I have fixed all issues related to external packages but at this point I have hit a wall, as there seems to be an error with some core frontity components.

Errors from browser console:

12:15:35.224 Uncaught TypeError: setting getter-only property "children"
    Script script.tsx:90
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    EventHandlerNonNull* scheduler.development.js:180
    <anonymous> scheduler.development.js:13
    js koenighaus-webshop.module.js:6372
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    <anonymous> index.js:6
    js koenighaus-webshop.module.js:6384
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    React 2
    js koenighaus-webshop.module.js:6061
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    <anonymous> React
    js koenighaus-webshop.module.js:6073
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    <anonymous> index.tsx:8
    node_modules koenighaus-webshop.module.js:1367
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    <anonymous> client.ts:1
    ts koenighaus-webshop.module.js:984
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    0 koenighaus-webshop.module.js:7698
    __webpack_require__ koenighaus-webshop.module.js:833
    <anonymous> koenighaus-webshop.module.js:971
    <anonymous> koenighaus-webshop.module.js:974
script.tsx:90:10

12:15:35.235 The above error occurred in the <Script> component:

Script@webpack-internal:///./node_modules/@frontity/components/script.tsx:14:41
ReactiveComp@webpack-internal:///./node_modules/@frontity/connect/src/connect.js:40:72
div
Container@webpack-internal:///./packages/koenighaus-theme/src/components/Layout/shared/Grid.js:6:997
ReactiveComp@webpack-internal:///./node_modules/@frontity/connect/src/connect.js:40:72
InnerLoadable@webpack-internal:///./node_modules/@loadable/component/dist/loadable.esm.js:32:117
LoadableWithChunkExtractor
Loadable
ReactiveComp@webpack-internal:///./node_modules/@frontity/connect/src/connect.js:40:72
div
withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:31:67
ReactiveComp@webpack-internal:///./node_modules/@frontity/connect/src/connect.js:40:72
r@webpack-internal:///./node_modules/react-helmet-async/lib/index.module.js:26:5441
App@webpack-internal:///./node_modules/@frontity/core/src/app/index.tsx:19:14
FrontityApp

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react-dom.development.js:20085:14
12:15:35.239 Uncaught TypeError: setting getter-only property "children"
    Script script.tsx:90
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    EventHandlerNonNull* scheduler.development.js:180
    <anonymous> scheduler.development.js:13
    js koenighaus-webshop.module.js:6372
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    <anonymous> index.js:6
    js koenighaus-webshop.module.js:6384
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    React 2
    js koenighaus-webshop.module.js:6061
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    <anonymous> React
    js koenighaus-webshop.module.js:6073
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    <anonymous> index.tsx:8
    node_modules koenighaus-webshop.module.js:1367
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    <anonymous> client.ts:1
    ts koenighaus-webshop.module.js:984
    __webpack_require__ koenighaus-webshop.module.js:833
    fn koenighaus-webshop.module.js:130
    0 koenighaus-webshop.module.js:7698
    __webpack_require__ koenighaus-webshop.module.js:833
    <anonymous> koenighaus-webshop.module.js:971
    <anonymous> koenighaus-webshop.module.js:974
script.tsx:90:10

In the error there are mentioned just 2 components, which are some general page structure components I have, namely Container and Grid. Here is how they look like:

export const Container = ({ children, size, style }) => {
  // Size can be either 'full' or 'fluid'. Refer to XYGrid documentation
  let styles = {
    ...style,
    width: "100%",
  }

  return (
    <div
      className={`grid-container ${size ? size : ''}`}
      style={styles}
    >
      {children}
    </div>
  );
};


export const Grid = ({ 
  children, 
  direction = 'x', 
  align,
  spacing,
  css,
  style
}) => {
  return (
    <div 
      className={`grid-${direction} ${align ? align : ''} ${spacing && `grid-${spacing}-${direction}`} ${direction === 'y' && 'grid-frame'}`}
      css={css ? css : ''}
      style={style}
    >
      {children}
    </div>
  )
}

export const Cell = ({
  children,
  size = 'auto',
  offset,
  textAlign,
  style,
  css
}) => {
  return (
    <div className={`cell ${size} ${offset ? offset : ''} ${textAlign ? `text-${textAlign}` : ''}`} style={style} css={css}>
      {children}
    </div>
  )
}

As you can see there is nothing special in those components, they are actually quite simple.

Here is the output of frontity info:

## System:
 - OS: macOS 11.2.3
 - CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
 - Memory: 173.48 MB / 8.00 GB
 - Shell: 5.1.4 - /usr/local/bin/bash
## Binaries:
 - Node: 15.12.0 - ~/.nvm/versions/node/v15.12.0/bin/node
 - npm: 7.6.3 - ~/.nvm/versions/node/v15.12.0/bin/npm
## Browsers:
 - Chrome: 90.0.4430.212
 - Edge: 90.0.818.62
 - Firefox: 70.0.1
 - Safari: 14.0.3
## npmPackages:
 - @aamodtgroup/frontity-contact-form-7: ^0.2.3 => 0.2.3 
 - @frontity/core: ^1.14.0 => 1.14.0 
 - @frontity/head-tags: ^1.1.1 => 1.1.1 
 - @frontity/html2react: ^1.7.0 => 1.7.0 
 - @frontity/koenighaus-theme: ./packages/koenighaus-theme => 1.4.2 
 - @frontity/tiny-router: ^1.4.2 => 1.4.2 
 - @frontity/wp-source: ^1.11.4 => 1.11.4 
 - @hookform/error-message: 0.0.5 => 0.0.5 
 - axios: ^0.21.1 => 0.21.1 
 - frontity: ^1.15.0 => 1.15.0 
 - js-cookie: ^2.2.1 => 2.2.1 
 - kh-calculator: file:packages/kh-calculator => 0.0.1 
 - libphonenumber-js: ^1.9.18 => 1.9.18 
 - libphonenumber-js-core:  1.0.0 
 - libphonenumber-js-max:  1.0.0 
 - libphonenumber-js-min:  1.0.0 
 - libphonenumber-js-mobile:  1.0.0 
 - react-hook-form: ^6.15.7 => 6.15.7 
 - react-modal: ^3.13.1 => 3.13.1 
 - react-scroll: ^1.8.2 => 1.8.2 
 - react-select: ^3.2.0 => 3.2.0 
 - react-spring: ^8.0.27 => 8.0.27 
 - woocommerce-shop: file:packages/woocommerce-shop => 1.0.0 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

I cannot provide a repository at the moment as this is a private project, so I am looking for any tips, direction and suggestions on how to solve this.

Thank you in advance.

EDIT:
After looking a bit deeper into it I think i found the culprit. On my homepage I have a instagram widget that comes from the on-page content. Here is how the script looks:

<script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
<iframe src="https://cdn.lightwidget.com/widgets/somePrivateKeyWasHere.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>
2

Hey! I can confirm the issue regarding the widget. There was an update on dev in script.tsx branch 5 days ago: Merge branch 'dev' of github.com:frontity/frontity into dev · frontity/frontity@4717f94 · GitHub Could this fix be related to that problem?

3

Yes, looking at the commit, that is exactly the problematic code. Unfortunatelly I dont fully understand the error. Any suggestions how we can solve this. Mentioning @juanma as I think its an important one to look into.

4

@ni.bonev I updated my frontity core version locally to 1.14.0 (not 1.14.1 since I experienced another issue with core-js, but will have a look at that later). With 1.14.0, it is working now! I think the PR actually fixed the issue as my version was not up to date.

5

Hey @cobra and @ni.bonev you can find more info in the PR description Script component should not define the children prop by cristianbote · Pull Request #823 · frontity/frontity · GitHub. If this is not enough I can add in here more details.

1 Like
6

Thanks @cristianbote & @cobra. I can confirm after updating it all works as expected now.

1 Like