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

**URL:** <https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166>\
**Category:** Technical Questions\
**Created:** [May 18, 2022, 7:31pm UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166 "2022-05-18T19:31:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![soultech](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@soultech](https://forum.builder.io/u/soultech)\
**Post date:** [May 18, 2022, 7:31pm UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166/1 "2022-05-18T19:31:05Z")

</div>

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](http://Builder.io) configured to point to my localhost the image is rendered correctly.

When I configure [Builder.io](http://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.io: Drag and drop page builder and CMS](https://builder.io/content/17083f51e93348ed89c3d3ec477073a0)**
>
> Build and optimize digital experiences for any tech stack, visually.

**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](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](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](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](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](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](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](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.

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [May 23, 2022, 9:03pm UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166/2 "2022-05-23T21:03:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![soultech](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@soultech](https://forum.builder.io/u/soultech)\
**Post date:** [June 1, 2022, 4:29pm UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166/3 "2022-06-01T16:29:19Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![soultech](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@soultech](https://forum.builder.io/u/soultech)\
**Post date:** [June 1, 2022, 11:54pm UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166/4 "2022-06-01T23:54:59Z")

</div>

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](https://knack-billboard-z050owdcv-knackshops-inc.vercel.app/billboard-3)

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [June 4, 2022, 3:45am UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166/5 "2022-06-04T03:45:18Z")

</div>

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`:

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

```

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

```auto
// 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)
  }
}

```

---

<div class="post-metadata">

**Author:** ![soultech](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@soultech](https://forum.builder.io/u/soultech)\
**Post date:** [June 22, 2022, 5:23pm UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166/6 "2022-06-22T17:23:57Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [June 22, 2022, 10:45pm UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166/7 "2022-06-22T22:45:24Z")

</div>

> [@aziz](#):
>
> in `next.config.js`:
> 
> ```auto
> webpack: (config) => {
> config.externals = (config.externals || []).concat('vm2');
> return config;
> },
> 
> ```

this should fix the error you shared

> [@soultech](#):
>
> when you state that you notice Vercel is stripping out one of the dependencies - where are you observing this?

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

---

<div class="post-metadata">

**Author:** ![soultech](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@soultech](https://forum.builder.io/u/soultech)\
**Post date:** [June 23, 2022, 11:15pm UTC](https://forum.builder.io/t/shopify-cdn-image-not-loading-via-vercel-host-works-from-localhost/2166/8 "2022-06-23T23:15:42Z")

</div>

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.