Nuxt•3mo ago

[NuxtHub + CF Workers] Nuxt 4 - 500 errors

After migrating my website to Nuxt 4, I could not deploy it neither on my server manually (pnpm build and copy the .output folder) nor on Cloudflare Workers. After running the build successfully, the resulting output does not work. I get the following error whenever I try to open the project:

No such module \"home/runner/work/portfolio/portfolio/node_modules/.pnpm/vue@3.5.21/node_modules/vue/index.mjs\".

No such module \"home/runner/work/portfolio/portfolio/node_modules/.pnpm/vue@3.5.21/node_modules/vue/index.mjs\".

Bear in mind, the dev server works fine locally. Also, I can build locally and preview just fine as well, which is why it's confusing me. I don't have anything out of the ordinary in terms of external packages, just TailwindCSS, octokit, and vueuse. My repo is here

9 Replies

kapa.ai•3mo ago

Hi @AerodynamicPotato. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information in the knowledge sources, your issue—receiving a 500 error and a message like:

No such module "home/runner/work/portfolio/portfolio/node_modules/.pnpm/vue@3.5.21/node_modules/vue/index.mjs".

No such module "home/runner/work/portfolio/portfolio/node_modules/.pnpm/vue@3.5.21/node_modules/vue/index.mjs".

after migrating to Nuxt 4 and deploying to Cloudflare Workers (or copying the .output folder to your server), is likely related to how dependencies are bundled and resolved in the output for serverless/edge environments. Key Points from the Knowledge Sources 1. Cloudflare Workers Deployment Requires Special Preset
When deploying to Cloudflare Workers, you must use the cloudflare_module Nitro preset and set a compatible compatibilityDate in your nuxt.config.ts. This ensures that dependencies are bundled correctly for the Workers environment, which does not have access to a traditional node_modules directory at runtime. If you simply run pnpm build without this configuration, the output may reference modules that are not present in the deployed environment, leading to errors like the one you see. Example configuration:

   export default defineNuxtConfig({
     compatibilityDate: "2025-05-15",
     nitro: {
       preset: 'cloudflare_module',
       cloudflare: {
         deployConfig: true,
         // ...other config
       },
     }
   })

   export default defineNuxtConfig({
     compatibilityDate: "2025-05-15",
     nitro: {
       preset: 'cloudflare_module',
       cloudflare: {
         deployConfig: true,
         // ...other config
       },
     }
   })

After building, deploy using npx wrangler deploy rather than copying the .output folder manually.
Deploy to Cloudflare Workers 2. Local Preview vs. Production Differences
The fact that your dev server and local preview work fine, but production deployment fails, is a common symptom when the build output is not properly bundled for the target environment. Local preview uses your local node_modules, but Cloudflare Workers does not have access to them, so all dependencies must be bundled. 3. Common Pitfalls
- Not using the correct Nitro preset for the deployment target. - Copying the .output folder directly without using the appropriate deployment tool (like wrangler for Cloudflare Workers). - Missing or misconfigured dependencies in nuxt.config.ts. What You Should Do - Update your nuxt.config.ts to use the cloudflare_module preset and set a recent compatibilityDate. - Build your project with nuxi build. - Deploy using wrangler:

  npx wrangler deploy

  npx wrangler deploy

This ensures all dependencies are bundled and the output is compatible with Cloudflare Workers. For more details and a sample config, see the official Nuxt Content documentation for Cloudflare Workers deployment. --- If you have already set the correct preset and are still experiencing issues, double-check that all dependencies are listed in your dependencies (not devDependencies) in package.json, as some environments only install production dependencies. If the problem persists after following these steps, the knowledge sources do not provide further troubleshooting specific to your case, and you may need to seek help with a minimal reproduction or consult the Nuxt Discord for more targeted support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@336887743366037504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AerodynamicPotatoOP•3mo ago

@kapa.ai I use NuxtHub to deploy my project to Cloudflare Workers

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To deploy your Nuxt project to Cloudflare Workers using NuxtHub, you should follow these steps: 1. Install the NuxtHub module
Use the following command to add the NuxtHub integration:

   npx nuxi module add hub

   npx nuxi module add hub

This will install the @nuxthub/core module and register it in your nuxt.config.ts automatically. 2. Deploy with NuxtHub
Once the module is installed, you can deploy your content to NuxtHub (which supports Cloudflare Workers) using:

   npx nuxthub deploy

   npx nuxthub deploy

The Nuxt Content module will automatically enable the NuxtHub database and update the configuration to use Cloudflare D1 with the DB binding name by default. You can override this in your nuxt.config.ts if needed. 3. Database Configuration
If you need to customize the database connection (for example, to use a different binding name or database), you can do so in your nuxt.config.ts file. For more details, see the NuxtHub deployment documentation. Note:
The knowledge sources do not provide step-by-step troubleshooting for issues specific to deploying with NuxtHub on Cloudflare Workers, but the process above is the officially documented approach. If you encounter errors, ensure your configuration matches the documented requirements and that your Cloudflare D1 database is properly set up and bound to your project as described in the docs. If you need to deploy directly to Cloudflare Workers without NuxtHub, you should use the cloudflare_module preset and follow the Cloudflare Workers deployment guide. Deploy your Content app to NuxtHub ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@336887743366037504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AerodynamicPotatoOP•3mo ago

@kapa.ai I'm not using NuxtContent

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that you are not using Nuxt Content. Based on the knowledge sources provided, there is no explicit documentation or guidance about deploying a standard Nuxt 4 application (without Nuxt Content) to Cloudflare Workers using NuxtHub. The available documentation for NuxtHub and Cloudflare Workers is specifically focused on projects that use the Nuxt Content module and its database integration requirements, such as Cloudflare D1 bindings and related configuration options. There is no mention of NuxtHub as a general deployment solution for non-Content Nuxt projects in the sources above. If you are deploying a regular Nuxt 4 app to Cloudflare Workers, the recommended approach is to use the appropriate Nitro preset (cloudflare_module) in your nuxt.config.ts and deploy using the Cloudflare Wrangler CLI, as described in the official documentation. This ensures your dependencies are bundled correctly for the Workers environment and avoids issues like missing modules at runtime. Here is an example configuration:

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_module',
    // ...other config as needed
  }
})

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare_module',
    // ...other config as needed
  }
})

Then build and deploy with:

nuxi build
npx wrangler deploy

nuxi build
npx wrangler deploy

Deploy your Content app to Cloudflare Workers I'm sorry, but the knowledge sources do not contain information about deploying a standard Nuxt 4 app to Cloudflare Workers using NuxtHub if you are not using Nuxt Content. If you need further assistance, you may want to consult the Nuxt or NuxtHub community for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@336887743366037504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AerodynamicPotatoOP•3mo ago

adding this in .npmrc fixed it

shamefully-hoist=true

shamefully-hoist=true

Gaming

Programming

[NuxtHub + CF Workers] Nuxt 4 - 500 errors

Did you find this page helpful?