Error: No loader is configured for ".node" files: node_modules/@resvg/resvg-js-linux-x64-musl/resvgjs.linux-x64-musl.node with Vite 4 and Netlify

[swyxio]

Hi, apologies if this is the wrong repo for this error but I am following https://geoffrich.net/posts/svelte-social-image/ and it works locally, but fails when I try to deploy to Netlify:

Full error message

10:10:26 PM: ✘ [ERROR] No loader is configured for ".node" files: node_modules/@resvg/resvg-js-linux-x64-musl/resvgjs.linux-x64-musl.node
10:10:26 PM:     node_modules/@resvg/resvg-js/js-binding.js:1:2980:
10:10:26 PM:       1 │ ...Binding=require("@resvg/resvg-js-linux-x64-musl")}catch(e){loadE...
10:10:26 PM:         ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10:10:26 PM: ✘ [ERROR] No loader is configured for ".node" files: node_modules/@resvg/resvg-js-linux-x64-gnu/resvgjs.linux-x64-gnu.node
10:10:26 PM:     node_modules/@resvg/resvg-js/js-binding.js:1:3212:
10:10:26 PM:       1 │ ...eBinding=require("@resvg/resvg-js-linux-x64-gnu")}catch(e){loadE...
10:10:26 PM:         ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I'm not sure where this message comes from but you can see the error in this branch https://github.com/sw-yx/swyxkit/tree/addOgimage when deployed to Netlify: https://app.netlify.com/sites/swyxkit/deploys/63954a072248cf0008f384ae

blocking swyxio/swyxkit#145 right now with this error message

[swyxio]

I discovered and tried evanw/esbuild#1051 but unfortunately it didnt change anything

[Brooooooklyn]

try esbuild YOUR_ENTRY --platform=node --loader:.node=file --outdir=dist

[yisibl]

Thanks to @Brooooooklyn for the answer.

[swyxio]

thank you - closing for now until i can try this again

[unculture]

@sw-yx I have resvg-js working on Netlify with SVG from Satori using the following in my netlify.toml

[functions]
external_node_modules = ['@resvg/resvg-js']

[bartosjiri]

For anyone having this issue with the library while using the @sveltejs/adapter-node adapter in Svelte(Kit):

• Make sure to have the @resvg/resvg-js library installed as a dependency (not devDependency); package.json:

  {
    "scripts": {
      "build": "vite build",
    },
    "devDependencies": {
      "@sveltejs/adapter-node": "^1.2.3",
      "vite": "^4.2.0"
    },
    "dependencies": {
      "@resvg/resvg-js": "^2.4.1"
    },
    "type": "module"
  }

• Specify the @resvg/resvg-js library as external dependency in the vite.config.(js|ts) file:

  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [
      sveltekit()
    ],
    build: {
      rollupOptions: {
        external: ['@resvg/resvg-js'],
      }
    }
  });

[taverasmisael]

Thanks @bartosjiri this worked perfectly. I'm using Astro, so the place to declare external dependencies is on the astro.config.mjs, very similar

export default defineConfig({
  vite: {
    ssr: { // ssr instead of rollupOptions
      external: ['@resvg/resvg-js']
    }
  }
})

[antoniods]

Thanks @bartosjiri this worked perfectly. I'm using Astro, so the place to declare external dependencies is on the astro.config.mjs, very similar

export default defineConfig({
  vite: {
    ssr: { // ssr instead of rollupOptions
      external: ['@resvg/resvg-js']
    }
  }
})

Thanks for sharing it but your snippet didn't solve the issue with Astro for me. It's still impossible using resvg-js on Netlify and i'm get an error in the building step.

[taverasmisael]

@antoniods, sad to hear that. Ultimately, I had to deploy to Vercel instead, not because of this, but because I was having issues at the build stage with the experimental.assets adding a top-level await.

I did change the config to add resvg/resvg-js as external/exclude in other places.

This is my current configuration, and it worked on Netlify, but the build step failed because of the experimental.assets.

export default defineConfig({
    ssr: { external: ["@resvg/resvg-js"] },
    optimizeDeps: { exclude: ["@resvg/resvg-js"] },
    build: { rollupOptions: { external: ["@resvg/resvg-js"] } },
  },
})

[antoniods]

...., I had to deploy to Vercel instead, not because of this, but because I was having issues at the build stage with the experimental.assets adding a top-level await.

Build stage works perfectly on vercel, no more issues with and resvg-js in my case. Thanks @taverasmisael

[laneparton]

This was helpful to landing at the following:

astro.config.mjs

  vite: {
    ssr: {
      external: ['@resvg/resvg-js']
    },
    optimizeDeps: {
      exclude: ["@resvg/resvg-js"]
    }
  }

With:

  "dependencies": {
    "astro": "^3.0.8",
  },
  "devDependencies": {
    "@resvg/resvg-js": "^2.4.1",
  }

Just leaving in case someone finds it useful!

[kylesloper]

Thanks @bartosjiri this worked perfectly. I'm using Astro, so the place to declare external dependencies is on the astro.config.mjs, very similar

export default defineConfig({
  vite: {
    ssr: { // ssr instead of rollupOptions
      external: ['@resvg/resvg-js']
    }
  }
})

Thanks for sharing it but your snippet didn't solve the issue with Astro for me. It's still impossible using resvg-js on Netlify and i'm get an error in the building step.

Hey @antoniods, Did you manage to get this working with Netlify. It's pretty unbelievable this still isn't working