DEV Community

jgngo
jgngo

Posted on

4 2

Vue 3 / Vite on Cloudflare Pages

A build recently failed in Cloudflare Pages and showed the following error.

19:09:34.631    Executing user command: npm run build
19:09:34.980    
19:09:34.981    > webapp@0.0.0 build /opt/buildhome/repo
19:09:34.981    > vite build
19:09:34.981    
19:09:35.288    failed to load config from /opt/buildhome/repo/vite.config.js
19:09:35.289    error during build:
19:09:35.289    Error: Cannot find module 'happy-dom'
Enter fullscreen mode Exit fullscreen mode

Doing npm run build on my local machine worked fine so I went on to find out the difference between my machine and the Cloudflare Pages build environment.

It turned out that my machine was on Node 16.15.0 while Cloudflare Pages was at 12.18.0, which is quite old. So, based on the build configuration docs, all we need to do is set an environment variable in the build settings of the Cloudflare Pages project for both production and preview NODE_VERSION=16.15.0 so it matches the local build environment.

After saving the environment variable and retrying deployment, the build was successful. This tip would apply to any javascript project that uses npm or yarn for building.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay