No loader is configured for ".node" files?

[the-artifabrian]

I'm trying to use resvg-js in a Remix project with a Node runtime but I don't seem to be able to get around this error:

No loader is configured for ".node" files: node_modules/@resvg/resvg-js-darwin-arm64/resvgjs.darwin-arm64.node

Any tips to get past this would be greatly appreciated. I'm running macOS Ventura with an M1 CPU.

Thanks!

[yisibl]

Can you find this .node file in your node_modules directory? It would be nice to provide a minimized example project to replicate this.

[the-artifabrian]

Can you find this .node file in your node_modules directory? It would be nice to provide a minimized example project to replicate this.

I created a sample repo here: https://codesandbox.io/p/github/alexo382/test-resvg The error output when running the dev server is misleading because when you try to build the app it fails because of the error I posted above.

Is it because the Remix compiler that uses esbuild doesn't support .node files? It's strange because I spoke with a Remix user in discord that had resvg-js working fine in their projects.

Thanks again 🙏

[yisibl]

Please see: https://github.com/yisibl/resvg-js/issues/175#issuecomment-1346452466

[unculture]

Perhaps you need to mark @resvg/resvg-js as external for esuild? I was getting this issue with Netlify (which uses esbuild) until I marked it as external in the Netlify config.

[Mxs2019]

Has anyone figured this out?

[tresabhi]

This is your solution; works 10 / 10 🥳

esbuild <input> --outfile=<output> --loader:.node=copy

@Mxs2019

[julianprester]

I have the same issue in a NextJS project. Could there be a webpack configuration that works? I found the node-loader?

I've also tried the proposed esbuild solution but couldn't get it to work.

[yisibl]

Here's a reference case used in netlify: https://github.com/creatures-dev/creatures.dev/pull/2

[crisu83]

I have the same issue in a NextJS project. Could there be a webpack configuration that works? I found the node-loader?

I've also tried the proposed esbuild solution but couldn't get it to work.

@julianprester Hey Julian, I faced the same issue in a Next.js project (version 13.5.3) and I was able to solve it by adding the library (in my case @resvg/resvg-js) to serverComponentsExternalPackages under experimental in my config file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["@resvg/resvg-js"],
  },
  ...

I hope this helps.

Reference: https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages

[btakita]

Same issue using bun & astrojs.

[jacobpretorius]

If you're using Astro you can add this to your astro.config.mjs

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

[Kayoshi-dev]

Hi!

I have the same issue with SvelteKit when I try to deploy on Vercel!

I added the following lines in my vite.config.js, without success :

    build: {
        rollupOptions: {
            external: ['@resvg/resvg-js']
        }
    },
    optimizeDeps: {
        exclude: ['@resvg/resvg-js']
    }

Does anyone have an example or an idea on how to fix the problem?

[Kayoshi-dev]

Note that I also tried with this config in svelte.config.js :

const config = { preprocess: vitePreprocess(),

kit: {
    adapter: adapter({
        external: ['@resvg/resvg-js']
    })
}

};

Without success :/

[antmelnyk]

This is still an issue. With latest Webpack or Vite, attempting to use:

import { Resvg } from "@resvg/resvg-js";

Is not working because underneath it imports .node files for each target platform for some reason. Excluding from optimizeDeps makes sense but it's still confusing what is the correct usage. I remember year ago my code was working like that.

Anyhow, for now I managed it to work on front-end with WASM using:

import { initWasm, Resvg } from "@resvg/resvg-wasm";