Theme Update - Bug Fix for Live Preview Issues

Bug Reporting
1

Hi Everyone -

On July 12th (yesterday) the npm package serve released version 14, which drops support for node 12. This update resulted in live previews running on node 12 no longer working.

We’ve updated the answers-hitchhiker-theme’s template repo to no longer have this issue, however repos that currently experience this issue will need to be manually updated.

Fix instructions:

  1. Open the ci/install_deps.sh file

  2. Change the second line, “npm install -g serve” to
    “npm install -g serve@13.0.4”

  3. Commit the change

  4. Terminate your session and reopen it

Please comment below if you are continuing to experience any issues!

If you’re still seeing issues, try this fix as well:

3 Likes
2

Hi! I am encountering the same issue with the live preview today. I followed the instructions as above but get the following error:

  • npm WARN config global --global, --local are deprecated. Use --location=global instead.
  • changed 93 packages, and audited 94 packages in 1s
  • 10 packages are looking for funding
  • run npm fund for details
  • found 0 vulnerabilities
  • npm ERR! code ERESOLVE
  • npm ERR! ERESOLVE could not resolve
  • npm ERR!
  • npm ERR! While resolving: grunt-webpack@4.0.2
  • npm ERR! Found: webpack@5.38.1
  • npm ERR! node_modules/webpack
  • npm ERR! dev webpack@“^5.37.1” from the root project
  • npm ERR! peer webpack@“>=2” from babel-loader@8.1.0
  • npm ERR! node_modules/babel-loader
  • npm ERR! dev babel-loader@“^8.1.0” from the root project
  • npm ERR! 9 more (css-loader, esbuild-loader, html-loader, …)
  • npm ERR!
3

Hi Amanda! I think you’re experiencing a separate issue. What’s the link to the Code Editor for this particular experience?

4

Hi Thomas! I’m not sure what happened but the live preview now works! I made an additional change to the “grunt-webpack” line from 4.0.0 to 4.0.3 in the package.json file and it seems like it refreshed after 10 min! Not sure if that fixed the issue but it was the only change I made since then.

5

Hi Amanda, that’s the right fix for your issue! Version 4.0.0 of grunt-webpack did not support Version 5 of Webpack, which is used in the Theme. That was the cause of the errors you saw. They created a patch Version (4.0.3) to allow grunt-webpack to work with Version 5 of Webpack.

1 Like
6

Hello! I have tried implementing all of the fixes (apply diff and the two above) and I am still not able to view my live preview. Could anyone assist? Thanks!

7

I tried to implement a fix for this but was given different directions from Engineering ticket which resulted in console errors for me. Since I had to commit the change I was wondering if there is a way to undo the commit so I can use this fix instead? I’m currently getting console errors and the live preview will not load as a result of changes to the package-lock.json file.

8

Hi @Carolyn_Gorick, it looks like your repo is experiencing this issue, could you give the fix a try? Fix Instructions for grunt-webpack 4.0.0 Live Preview Issues .

9

Hi @Sonia_Reardon

Were you able to resolve yours? If not, could you link your account here for Tom and Oliver?

Thanks!

10

Yes thanks for following up! Got this resolved with Oliver. Thanks!

11

Hi, I am getting an error after implementing this fix:

“Server application unavailable. To use live preview, please ensure you have configured a web server on port 8080 in your CI Config serve command. Please view the console logs for any errors establishing the web server.”

I checked my serve.sh config file and 8080 is set in the CI Config. Can anyone advise an alternative solution to get this Live Preview working?

1 Like
12

Reposting the solution in case others run into something similar:
the issue is with your ci/serve_setup.sh script. The script you have is:

#!/bin/sh 
npm install -g serve 
npx jambo build 
grunt webpack

You will need to remove the line npm install -g serve. I verified that this fixes the Preview issue. A specific version of serve needs to be installed for Preview to run (v13.0.4). The ci/install_deps.sh script already installs this specific version of serve. But, your ci/serve_setup.sh was overriding this behavior and re-installing serve as the latest version, instead of v13.0.4.

1 Like
13

Hi all -

Still running into this issue despite having the exact file setup Caroline mentioned above -

Any fixes / proposed solutions?

14

Hi James,

Were you able to resolve yours? If not, could you link your account here for Tom and Oliver?

Thanks,
Alyssa

15

Has this bug been patched in a minor theme release?

17

I Know this is an old topic, but I’m experiencing the same issue and this fix doesn’t seem to be working. Here is my current setup. Any help is appreciated.

install_dep.sh file:

#!/bin/bash
npm install -g serve@13.0.4
npm install

serve.sh file:

#!/bin/sh
export NODE_OPTIONS="--max-old-space-size=1024"

#This will use development mode while in the Yext code editor. Set to "false" to test the production build.
export IS_DEVELOPMENT_PREVIEW='true'

serve -l 8080 desktop/ &
grunt watch

server_setup.sh file

#!/bin/sh
export NODE_OPTIONS="--max-old-space-size=1024"
npx jambo build
grunt webpack

EDIT: Had to wait a bit and also restart the preview. It is working now.

1 Like