[🐞] Cannot use node.js module inside Endpoint because of rollup compilation error

[jappyjan]

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

When i import the Resvg module into my Endpoint,
I get the error

vite v5.1.4 building SSR bundle for production...
✓ 24 modules transformed.
x Build failed in 1.55s
error during build:
RollupError: [commonjs--resolver] Cannot bundle Node.js built-in "fs" imported from "src/routes/api/open-graph/generate-og-image.ts". Consider disabling ssr.noExternal or remove the built-in dependency.
    at getRollupEror (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
    at error (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
    at Object.error (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:19394:20)
    at Object.resolveId (file:///Users/jappy/code/fpv-drone.info/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:47584:34)
    at Object.handler (file:///Users/jappy/code/fpv-drone.info/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:67142:19)
    at file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:19579:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:19479:28)
    at async resolveId (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:18149:26)
    at async ModuleLoader.resolveId (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:18563:15)
    at async Object.resolveId (file:///Users/jappy/code/fpv-drone.info/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:8171:10)

undefined

therefore i added all necessary native node modules like fs, path, etc. to the ssr.external options of rollup
which fixed these errors, but now i get this error:

vite v5.1.4 building SSR bundle for production...
✓ 56 modules transformed.
x Build failed in 1.85s
error during build:
RollupError: Unexpected character '�'
    at getRollupEror (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
    at ParseError.initialise (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:11155:28)
    at convertNode (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:12895:10)
    at convertProgram (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:12215:12)
    at Module.setSource (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:14039:24)
    at async ModuleLoader.addModuleSource (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:18697:13)

undefined

this is my vite.config.ts

import { UserConfig, defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import { builderDevTools } from "@builder.io/dev-tools/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { qwikReact } from '@builder.io/qwik-react/vite';

export default defineConfig(() => {
  return {
    plugins: [builderDevTools(), qwikCity(), qwikVite(), tsconfigPaths(), qwikReact()],
    optimizeDeps: {
      exclude: ['@uav.painkillers/pid-analyzer-wasm']
    },
// this part is what i added to make rollup compile with the resvg module (unsuccessfully)
    ssr: {
      external: ['fs', 'path', 'child_process'],
    },
  } as UserConfig;
});

and this is the minimal endpoint definition that triggers the error:

import { type RequestHandler } from "@builder.io/qwik-city";
import { Resvg } from "@resvg/resvg-js";

export const onGet: RequestHandler = async (requestEvent) => {
   console.log('resvg', Resvg);
};

Reproduction

.

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 1.56 GB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Brave Browser: 122.1.63.174
    Chrome: 123.0.6312.58
    Safari: 17.2.1
  npmPackages:
    @builder.io/dev-tools: ^0.2.19 => 0.2.19 
    @builder.io/qwik: ^1.4.5 => 1.4.5 
    @builder.io/qwik-city: ^1.4.5 => 1.4.5 
    @builder.io/qwik-react: ^0.5.4 => 0.5.4 
    @builder.io/qwik-worker: ^0.0.1 => 0.0.1 
    @builder.io/sdk-qwik: ^0.14.4 => 0.14.4 
    undici: * => 6.6.2 
    vite: ^5.1.4 => 5.1.4

Additional Information

No response

[wmertens]

Looks like fpvdrone is a binary module and you'll need to add it to your externals as well.

BTW there's rollup-plugin-node-externals to handle the node imports automatically

[jappyjan]

@wmertens i dont know where you see this / get the idea that "fpvdrone" is even a package?
shure, the word fpv-drone-info is in the file path, but only because thats the name of the project / root project folder...
there is no package with fpvdrone in its name

[jappyjan]

@wmertens anyway, i tried the plugin you mentioned and now i get another error :D

error during build:
TypeError [PLUGIN_ERROR]: Unknown file extension ".css" for /Users/jappy/code/fpv-drone.info/node_modules/@fontsource-variable/montserrat/wght.css
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:141:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)

when i configure the plugin to not exclude node_modules, i am back to the original error

vite v5.2.4 building SSR bundle for production...
✓ 51 modules transformed.
x Build failed in 1.90s
error during build:
RollupError: Unexpected character '�'
    at getRollupError (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/parseAst.js:376:41)
    at ParseError.initialise (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:11158:28)
    at convertNode (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:12898:10)
    at convertProgram (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:12218:12)
    at Module.setSource (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:14042:24)
    at async ModuleLoader.addModuleSource (file:///Users/jappy/code/fpv-drone.info/node_modules/rollup/dist/es/shared/node-entry.js:18681:13)

undefined

this is the config i used:

import { UserConfig, defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import { builderDevTools } from "@builder.io/dev-tools/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { qwikReact } from '@builder.io/qwik-react/vite';
import nodeExternals from 'rollup-plugin-node-externals'

export default defineConfig(() => {
  return {
    plugins: [builderDevTools(), qwikCity(), qwikVite(), tsconfigPaths(), qwikReact()],
    optimizeDeps: {
      exclude: ['@uav.painkillers/pid-analyzer-wasm']
    },
    build: {
      rollupOptions: {
        plugins: [nodeExternals({
          deps: false,
          devDeps: false,
          peerDeps: false,
          optDeps: false,
        })]
      }
    }
  } as UserConfig;
});

i am using @fontsource packages for font managing, seems like the plugin does not like that...

[wmertens]

@wmertens i dont know where you see this / get the idea that "fpvdrone" is even a package?

I shouldn't answer from my phone before coffee ;-)

I saw it complain about the unknown character and I just assumed it was a binary dep but that wouldn't make sense.

You can just put nodeExternals() together with the rest of the plugins.

To figure out which file is problematic, try some console logging debugging like rollup/rollup#1215 (comment)

[gioboa]

@jappyjan Did you solve this error?

[fabian-hiller]

I recommend replacing @resvg/resvg-js with @resvg/resvg-wasm. My package og-img uses @resvg/resvg-wasm under the hood. This guide may be related: https://qwik.dev/docs/integrations/og-img/