Shopify CDN image not loading via Vercel host, works from Localhost

Technical Questions
1

Summary:

I have a builder content page that contains an Image block configured to load an image from our public Shopify CDN using data binding.

This is a Next.js site, and when I run it locally with Builder.io configured to point to my localhost the image is rendered correctly.

When I configure Builder.io to aim at my Vercel hosting path and I push my code to bitbucket, Vercel runs a build and deployment. The subsequent rendered page does not render the image.

Builder content link

Builder public api key
a47041ecd8824aa2b0ead02a0b338b76

What are you trying to accomplish
I have an image block that should render an image via data binding, the image resides on our Shopify CDN.
When I have builder configured for my localhost:3000 and run locally it works fine.
When I push my updates to Vercel and reconfigure builder to point at vercel, the image doesn’t load

Screenshots or video link
Builder content page with image block & data binding: https://private-event-bucket-dev.s3.amazonaws.com/builder-images/builder+image+data+binding.mov

Builder configured for localhost: https://private-event-bucket-dev.s3.amazonaws.com/builder-images/builder+acct+cfg+localhost.png

It works on localhost: https://private-event-bucket-dev.s3.amazonaws.com/builder-images/localhost+works.png

Locahost HTML DOM Img tag: https://private-event-bucket-dev.s3.amazonaws.com/builder-images/localhost+img+html.png

Builder configured for Vercel: https://private-event-bucket-dev.s3.amazonaws.com/builder-images/builder+acct+cfg+vercel.png

Vercel doesn’t work: https://private-event-bucket-dev.s3.amazonaws.com/builder-images/vercel+doesnt+work.png

Vercel HTML DOM Img tag: https://private-event-bucket-dev.s3.amazonaws.com/builder-images/vercel+img+html.png

Code stack you are integrating Builder with
Next.js, React, hosted at Vercel, referencing an image on our public CDN

More Info
In the Chrome Browser Debug Console, the Vercel page load shows no console errors, nor does it show non-200 results for assets in the Network tab - the image is never requested when the site loads via Vercel.

2

Hey Scott!

I’ve spent some time trying to reproduce this issue on my end but haven’t had any luck. I’ve seen a similar issue with data bindings (not specifically with Vercel) where the logic would run before the element was on the page, so once the element was loaded the binding (like style.color or component.options.image) already ran, so it wouldn’t get run again.

In the past this has been resolved by adding an additional binding of showIf Builder.isBrowser (or adding it directly to the image binding). Could you try this out and let me know if it makes a difference on the Vercel path? If not, we can continue to try and reproduce and dig in further.

3

Hi Maddy, this issue has mysteriously self resolved. The image loads now when I go to the page.

It seemed like a bug in the lazy loading of images in the builder javascript handlers, but it was too deep / obfuscated for me to debug fully.

Thanks for taking a look!

2 Likes
4

Maddy - this is hit or miss actually. It worked this am, as I loaded the page it rendered the CDN image as requested.

However, when I asked Michel to confirm, he does not see the CDN hosted image render in either Chrome or Edge.

I returned to the site to check again for myself, and the image is now not rendered.

When it’s not rendered, you can see on the Chrome Console / Network sources tab that the request is never even made to load the image…

Can you please pass this on to your dev team? Here’s an active Vercel URL where I’ve managed to sometimes see the image and other times not see it.
https://knack-billboard-z050owdcv-knackshops-inc.vercel.app/billboard-3

5

Hi @soultech , is this page statically generated?

I did notice Vercel stripping out one of the dependencies that allow Builder’s sdk to run bindings on the server, ( only in SSG, but not on first render, only on revalidation, which is probably why you see it working sometimes after a fresh build, or on localhost) , if that’s the case, I’d import the dependency manually:

in next.config.js:

  webpack: (config) => {
    config.externals = (config.externals || []).concat('vm2');
    return config;
  },

Then in your page code ( could be pages/[[...page]].jsx):

// outside any function/component body
import { Builder } from '@builder.io/sdk'
if (Builder.isServer) {
  try {
    // tricking whatever stripping vm2 to include it on server
    require('vm2');
  } catch(e) {
    console.error(e)
  }
}
6

Thanks for putting your eyes on this problem @aziz!

The second section of code breaks my builds due to webpack errors. When I include it I get this build error:

knack-billboard git:(main) ✗ npm run build

> knack-billboard@0.1.0 build
> next build

info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build
Failed to compile.

./node_modules/vm2/lib/nodevm.js
Module not found: Can't resolve 'fs' in '/Users/soultech67/projects/knack-billboard/node_modules/vm2/lib'

Import trace for requested module:
./node_modules/vm2/lib/main.js
./node_modules/vm2/index.js
./pages/[[...page]].tsx

./node_modules/vm2/lib/resolver-compat.js
Module not found: Can't resolve 'fs' in '/Users/soultech67/projects/knack-billboard/node_modules/vm2/lib'

Import trace for requested module:
./node_modules/vm2/lib/nodevm.js
./node_modules/vm2/lib/main.js
./node_modules/vm2/index.js
./pages/[[...page]].tsx

./node_modules/vm2/lib/resolver-compat.js
Module not found: Can't resolve 'module' in '/Users/soultech67/projects/knack-billboard/node_modules/vm2/lib'

Import trace for requested module:
./node_modules/vm2/lib/nodevm.js
./node_modules/vm2/lib/main.js
./node_modules/vm2/index.js
./pages/[[...page]].tsx

./node_modules/vm2/lib/resolver-compat.js
Module not found: Can't resolve 'async_hooks' in '/Users/soultech67/projects/knack-billboard/node_modules/vm2/lib'

Import trace for requested module:
./node_modules/vm2/lib/nodevm.js
./node_modules/vm2/lib/main.js
./node_modules/vm2/index.js
./pages/[[...page]].tsx

./node_modules/vm2/lib/resolver.js
Module not found: Can't resolve 'fs' in '/Users/soultech67/projects/knack-billboard/node_modules/vm2/lib'

Import trace for requested module:
./node_modules/vm2/lib/resolver-compat.js
./node_modules/vm2/lib/nodevm.js
./node_modules/vm2/lib/main.js
./node_modules/vm2/index.js
./pages/[[...page]].tsx


> Build failed because of webpack errors

I’m curious, when you state that you notice Vercel is stripping out one of the dependencies - where are you observing this? I ran on localhost and inspected the debug console using the Chrome Debugging Tools. Looking at the Sources tab and Network tab I don’t see vm2 listed.

7

this should fix the error you shared

I noticed it sporadically in vercel generated function log, won’t happen on localhost or any other nextjs build

8

Thanks Aziz. I have that code as well from your prior post, my apologies that I didn’t share that in my previous post.

Keeping that code doesn’t seem to hurt anything. However, as I mentioned above, the other code results in a failed webpack during the build.