tannerdolby / eleventy-plugin-sharp-respimg

Eleventy plugin which performs build-time image transformations and generates responsive image markup.
https://www.npmjs.com/package/eleventy-plugin-sharp-respimg
MIT License
8 stars 3 forks source link

dyld: Symbol not found: _g_once_impl #1

Closed PHironaka closed 3 years ago

PHironaka commented 3 years ago

I've tried installing this plugin a few times but I keep getting the same error: dyld: Symbol not found: _g_once_impl

I have the Sharp installed in my dependencies "sharp": "^0.26.3"

I'm on BigSur MacOS and Node v14.15.3

I can't tell if this is an issues with Sharp or perhaps Homebrew? Any help would be appreciated.

tannerdolby commented 3 years ago

Hello @PHironaka !

Thank you for raising the issue. I've not encountered that error code dyld: Symbol not found: _g_once_impl yet. Let me do some tests today and see if I can pinpoint the cause.

tannerdolby commented 3 years ago

Ok here are a few "fixes" I will leave you with until I get back home later today and can test them myself.

  1. Make sure you have the latest version of node installed (I use nvm install node) to make sure the latest version is installed and used. You can make sure the latest version is being used in your $PATH but its a little more work.
  2. Make sure you have the latest version of Command Line Tools installed.
  3. Reboot your IDE and attempt to npm install again.
  4. If you want to use Homebrew to update node, use brew update and brew upgrade node then attempt steps 2 and 3.

Let me know if any of the above provides a fix. If not, I will troubleshoot when I'm home later.

PHironaka commented 3 years ago

Thank you @tannerdolby , I just followed your steps and the plugin was able to load properly.

One follow up question - I'm trying to source my images from Shopify and haven't been able to get it to load properly.

Here is my code:

   {% for edge in product.images.edges %}
              {% respimg 
        edge.node.originalSrc, 
        product.title, 
        "(min-width: 450px) 33.3vw, 100vw",
        product.id,
        "1024",
        "768"
       %}{% endrespimg %}
    {% endfor %}

And here is the output:

<picture>
                <source type="image/webp" srcset="min-width: 450px) 33.3vw, 100vwhttps://cdn.shopify.com/s/files/1/0264/9233/8236/products/product_lifestyle-2_47ab1045-a452-44fd-878d-0861f1d1e076.jpg?v=158567-large.webp undefinedw,
                        min-width: 450px) 33.3vw, 100vwhttps://cdn.shopify.com/s/files/1/0264/9233/8236/products/product_lifestyle-2_47ab1045-a452-44fd-878d-0861f1d1e076.jpg?v=158567-med.webp undefinedw,
                        min-width: 450px) 33.3vw, 100vwhttps://cdn.shopify.com/s/files/1/0264/9233/8236/products/product_lifestyle-2_47ab1045-a452-44fd-878d-0861f1d1e076.jpg?v=158567-small.webp function small() { [native code] }w" sizes="1024">
                <img srcset="min-width: 450px) 33.3vw, 100vwhttps://cdn.shopify.com/s/files/1/0264/9233/8236/products/product_lifestyle-2_47ab1045-a452-44fd-878d-0861f1d1e076.jpg?v=158567-large.jpg undefinedw,
                    min-width: 450px) 33.3vw, 100vwhttps://cdn.shopify.com/s/files/1/0264/9233/8236/products/product_lifestyle-2_47ab1045-a452-44fd-878d-0861f1d1e076.jpg?v=158567-med.jpg undefinedw,
                    min-width: 450px) 33.3vw, 100vwhttps://cdn.shopify.com/s/files/1/0264/9233/8236/products/product_lifestyle-2_47ab1045-a452-44fd-878d-0861f1d1e076.jpg?v=158567-small.jpg function small() { [native code] }w" sizes="1024" src="min-width: 450px) 33.3vw, 100vwhttps://cdn.shopify.com/s/files/1/0264/9233/8236/products/product_lifestyle-2_47ab1045-a452-44fd-878d-0861f1d1e076.jpg?v=158567-small.jpg" alt="Duckworth Woolfill Jacket" loading="lazy" class="768" width="undefined" height="undefined">
            </picture>
tannerdolby commented 3 years ago

Your welcome @PHironaka ! I'm glad you were able to successfully install and load the plugin.

In regards to loading images from Shopify, it should support them fine. One thing I'm noticing right away is that your not passing in the expected parameters to the respimg paired shortcode. It seems like your missing the { small: 320, med: 640, large: 1024 } width values and thats why small.webp function small() { [native code] }w and large.webp undefinedw are appearing in the output.

Try adding width values in an object like shown below (currently only can generate 320, 640, 1024) and everything should work smoothly.

Let me know if you run into any more issues and I'm happy to have a look. If you need different widths, ping me and I can update the plugin to accommodate for more widths.

Usage for a single image (Example usage)

{% respimg 
    "car.jpg", 
    "Photo of a car", 
    "./images/",
    { small: 320, med: 640, large: 1024 },
    "(min-width: 450px) 33.3vw, 100vw",
    "my-image",
    "1024",
    "768"
%}{% endrespimg %}
PHironaka commented 3 years ago

Got this to work @tannerdolby , thank you very much for your help.

Here's the code snippet that worked:

   {% respimg 
        edge.node.originalSrc, 
        product.title, 
       "",
        { small: 320, med: 640, large: 1024 },
        "(min-width: 450px) 33.3vw, 100vw",
        edge.node.originalSrc,
        "1024",
        "768"
    %}{% endrespimg %}
tannerdolby commented 3 years ago

@PHironaka Your welcome! Ok great. I'm glad you got things working.