Setting up ShortPixel AI with Frontity

πŸ€— Dev Talk & Questions
#1

βœ“ Description of your issue
I want to implement ShortPixel AI with Frontity. On request, they have provided me with standalone JS that should work with Frontity but when I try to use it, gives an error. How to do it correctly?

βœ“ System info β†’ npx frontity info

## System:
 - OS: Windows 10 10.0.19042
 - CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
 - Memory: 1.65 GB / 7.81 GB
## Binaries:
 - Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
 - npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
## Browsers:
 - Chrome: Not Found
 - Edge: Spartan (44.19041.423.0), Chromium (86.0.622.69)
 - Internet Explorer: 11.0.19041.1
## npmPackages:
 - @frontity/core: ^1.9.0 => 1.9.0 
 - @frontity/head-tags: ^1.0.7 => 1.0.7 
 - @frontity/html2react: ^1.4.0 => 1.4.0 
 - @frontity/tiny-router: ^1.2.2 => 1.2.2 
 - @frontity/wp-source: ^1.9.1 => 1.9.1 
 - forgotten-developer: file:packages/forgotten-developer => 1.0.0 
 - frontity: ^1.12.0 => 1.12.0 
 - prismjs: ^1.22.0 => 1.22.0 
 - react-icons: ^3.11.0 => 3.11.0 
 - yarn: ^1.22.10 => 1.22.10 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

βœ“ Specific errors you’re getting in the terminal

  SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module
  - public-path: /static/


webpack built client 2d295c2e7b1b3aa03c3e in 7126ms
i ο½’wdmο½£: Child client:
                 Asset      Size        Chunks             Chunk Names
        code.module.js  13.9 KiB          code  [emitted]  code
  divakshcom.module.js  8.72 MiB    divakshcom  [emitted]  divakshcom
vendors~code.module.js   357 KiB  vendors~code  [emitted]  vendors~code
 + 1 hidden asset
Child server:
    Asset      Size  Chunks             Chunk Names
server.js  11.5 MiB    main  [emitted]  main
i ο½’wdmο½£: Compiled successfully.

  ReferenceError: window is not defined
  at Theme (webpack-internal:///./packages/forgotten-developer/src/components/index.js:18:170)
  at runAsReaction (webpack-internal:///./node_modules/@frontity/connect/src/reactionRunner.js:16:45)
  at reaction (webpack-internal:///./node_modules/@frontity/connect/src/observer.js:7:131)
  at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:21:16)
  at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:397:2319)
  at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:396:122)
  at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:1199)
  at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:55)
  at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:470:116)
  at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:68:243)

βœ“ A repository or codesandbox with the code of your project
- https://github.com/Divaksh/forgotten-developer/tree/dev

βœ“ A deployed version of your site
http://divaksh.com/

βœ“ The URL of your WP REST API
api.divaksh.com/wp-json

βœ“ Additional information: Setup guide for ShortPixel AI
https://shortpixel.com/ai-js

#3

Hi @Divaksh,

Can you please specify the steps to follow to get that error? Maybe a Loom video may help to provide this explanation

Also, take into account that Frontity Apps are Isomorphic React Apps, which means that the React code will be executed in the server to generate the HTML for the page requested and also it will be executed in the client for a React process called hydration, so React can take control of app from that moment (improving loading times and user experience)

In one of our latest Frontity Talks we explain how to debug a Frontity App in both the server and the client and the whole idea of Frontity Isomorphic React Apps

The error ReferenceError: window is not defined seems to be related to that the server is executing a piece of code that is using window that is an object only available on the client side

Hope this helps

1 Like