I modified my Astro web app to use an SSR (the web app is a blog, so I want dynamic routes for all the posts inside the blog).
Seems that the app is working fine on my local PC, but when I'm trying to deploy it to Heroku it fails with this error
10:09:58 PM [content] No content directory found. Skipping type generation.
10:09:58 PM [build] output target: server
10:09:58 PM [build] deploy adapter: @astrojs/node
10:09:58 PM [build] Collecting build info...
10:09:58 PM [build] Completed in 495ms.
10:09:58 PM [build] Building server entrypoints...
[vite:load-fallback] Could not load @astro-page:astro/assets/endpoint/node (imported by @astrojs-ssr-virtual-entry): The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '\x00@astro-page:astro/assets/endpoint/node'
error Could not load @astro-page:astro/assets/endpoint/node (imported by @astrojs-ssr-virtual-entry): The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '\x00@astro-page:astro/assets/endpoint/node'
TypeError [PLUGIN_ERROR]: Could not load @astro-page:astro/assets/endpoint/node (imported by @astrojs-ssr-virtual-entry): The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '\x00@astro-page:astro/assets/endpoint/node'
at open (node:internal/fs/promises:586:10)
at Object.readFile (node:internal/fs/promises:1044:20)
at Object.load (file:///tmp/build_73de6bf3/node_modules/vite/dist/node/chunks/dep-df561101.js:47019:28)
at async PluginDriver.hookFirstAndGetPlugin (file:///tmp/build_73de6bf3/node_modules/rollup/dist/es/shared/node-entry.js:25439:28)
at async file:///tmp/build_73de6bf3/node_modules/rollup/dist/es/shared/node-entry.js:24606:75
at async Queue.work (file:///tmp/build_73de6bf3/node_modules/rollup/dist/es/shared/node-entry.js:25649:32)
-----> Build failed
I have installed the adapter as instructed like this
npm install @astrojs/node
And in the astro.config.mjs this is my configuration:
import { defineConfig } from 'astro/config';
import vue from "@astrojs/vue";
import node from "@astrojs/node";
// https://astro.build/config
export default defineConfig({
integrations: [vue()],
server: {
host: '0.0.0.0',
port: parseInt(process.env.PORT, 10) || 3000
},
output: 'server',
adapter: node({
mode: "middleware"
})
});
This is my package.json file:
{
"name": "astrowebsite",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/node": "^6.0.4",
"@astrojs/tailwind": "^5.0.0",
"@astrojs/vue": "^3.0.0",
"@caisy/rich-text-astro-renderer": "^1.0.2",
"@popperjs/core": "^2.11.8",
"@types/bootstrap": "^5.2.7",
"@vueuse/core": "^10.4.1",
"astro": "^3.1.3",
"astro-bootstrap": "^0.6.1",
"axios": "^1.5.1",
"bootstrap": "^5.3.2",
"mdb-vue-ui-kit": "^4.1.0",
"portal-vue": "^3.0.0-beta.0",
"vue": "^3.3.4",
"vue-easy-lightbox": "^1.16.0",
"vue-gallery": "^2.0.5",
"vue-markdown": "^2.2.4"
}
}
This is how I do the dynamic routing in my app:
const response = await fetch(
"<My heroku url that I do the fetch from>"
);
const { data } = await response.json();
const { slug } = Astro.params;
const page = data.find((project) => project.attributes.title === slug);
if (!page) {
return Astro.redirect("/404");
}
const { id, attributes } = page;
The Heroku server framework is Node.js, and I don't understand how to tackle this problem...
I can't seem to find enough documentation on it or understand from the error what I'm supposed to do.
I had similar problem. In my custom .astro component I used client:load attribute, I didn’t figure it out enough, but when I removed this the error was resolved