Bundler replacement with Vite

This is a basic documentation page to help developers use an updated version of the HOF framework which implements the replacement of the Browserify bundler previously used in hof. From Hof v23.0.1 Vite will replace Browserify.

• vite compiles client-side js. Requires node version ^20.19.0 || >=22.12.0.
• Vite outputs JavaScript sourcemaps as a .js.map file to the same directory as the js bundle.

Debugging example (in hof.settings or your build config)

  "build": {
    "sass": {
      "sourceMaps": true
    },
    "js": {
      "sourceMaps": true
    }
  }

Package.json updates

• Specify package to use hof@~23.0.1
• Update node engine requirements to use at least version >=20.19.0
• Run yarn install

Breaking changes

Problem: Cannot Find Module '@rollup/rollup-linux-x64-musl'

You may see an error like the following during the build_image step or in CI:

Error: Cannot find module '@rollup/rollup-linux-x64-musl'. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.

This happens because the --ignore-optional flag is used in Dockerfiles or CI to skip installing optional dependencies. However, Rollup’s platform-specific binaries (such as @rollup/rollup-linux-x64-musl) are marked as optional, but are actually required for your platform. Skipping them causes the build to fail with a "Cannot find module" error. This issue may not appear locally (where all optionals are installed), but will break in CI or Docker builds where optionals are skipped.

Solution:

If it exists, remove the --ignore-optional flag from your yarn install command in Dockerfiles and/or CI/CD steps. This ensures that all required platform-specific binaries for Rollup are installed, preventing this error. Always make sure your build environments install all necessary dependencies for your platform.

Problem: Node.js Version Incompatibility with Vite

You may encounter an error during build or CI steps (such as build_image, setup_branch, or snyk_scan) indicating that the Node.js version is incompatible with the required version for Vite. For example:

error vite@7.2.2: The engine "node" is incompatible with this module. Expected version "^20.19.0 || >=22.12.0". Got "20.18.0"
error Found incompatible module.

Solution:

Update your Node.js version to match the required version for Vite (at least 20.19.0 or >=22.12.0). If you are using Docker, set the Node image in your Dockerfile to match the required version (e.g., version 20.19.0). Ensure that all relevant CI/CD steps (such as in Drone pipelines) are also updated to use the compatible Node image where necessary, so your builds and deployments do not fail due to version mismatches.