bug: npm run build error
mortscode opened this issue · comments
Describe the Bug
I installed the adapter, added it to my svelte.config.js and initialized firebase with firebase init.
When I run npm run build I get the following error:
> Error: Required "hosting[].rewrites" field not found for matched hosting configuration. Specify your Cloud Function with rewrite rule matching "source":"**"
TypeError: Error: Required "hosting[].rewrites" field not found for matched hosting configuration. Specify your Cloud Function with rewrite rule matching "source":"**"
at parseFirebaseConfiguration (file:///[project-path]/node_modules/svelte-adapter-firebase/src/utils.js:124:9)
at adapt (file:///[project-path]/node_modules/svelte-adapter-firebase/src/index.js:26:35)
at adapt (file:///[project-path]/alohi/node_modules/@sveltejs/kit/dist/chunks/index4.js:377:8)
at file:///[project-path]/alohi/node_modules/@sveltejs/kit/dist/cli.js:878:11
Steps to Reproduce
- Install sveltekit
- Install adapter
- Create github project
- Initialize firebase
- run
npm run build
Expected Behaviour
I expect the site to build.
svelte-adapter-firebase version
0.13.0
sveltejs/kit version
1.0.0-next.178
This is expected behaviour. You need to setup your Firebase project config for an SSR app. The output states this:
Specify your Cloud Function with rewrite rule matching "source":"**"
You do not have a Cloud Function rewrite rule in your Firebase Hosting config. See the docs for examples: https://github.com/jthegedus/svelte-adapter-firebase#firebasejson-configurations
It is difficult to write a guide for this that covers all cases first time for each person as some people already have Firebase apps, some are initializing them for the first time with this. I will tweak the initial setup section because firebase init is not the only step for that step. Ultimately you need a Firebase Hosting config with a Cloud Function matching the default rewrite rule for the adapter which is "**" as the log states.
I have tried to make this output explanatory enough for those who have not got a complete firebase config setup. The initial setup guide does state "Read and repeat, the output is meant as a guide"
Perhaps I should bring the example firebase.json forward into the initial guide. Let me know how you go, feedback is welcome, but this is an expected error for first time users who have not configured firebase.json with a Cloud Function rewrite rule
Perhaps I don't fully understand how the Cloud Function connects to everything. I've been using SvelteKit mostly with the static adapter, so this is my first time really leaning into the SSR side. I really want to configure everything correctly and do this in the "sveltekit way" if possible.
My firebase.json after firebase init looks like so:
{
"functions": {
"source": "functions",
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
I included firestore, functions, and hosting in the init and i have them all turned on in the firebase app dashboard.
If I update the hosting object to include rewrites, do you have an example of what that function in <functionName> should look like in functions/index.js?
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"function": "<functionName>"
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
Thanks for sharing more. Once you put the <functionName> in the firebase.json file and re-run the build it will output the code to the CLI for you to copy/paste into the functions/index.js
This adapter assumes an understand of the Firebase platform, or in the lack of it, that users will read more of the documentation. I have tried to be succinct but also explanatory. Please continuing sharing your experience in this thread.
I updated my firebase.json to this:
{
"functions": {
"source": "functions",
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"function": "<functionName>"
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
My new error is this:
> Error: Cloud Function name must use only alphanumeric characters and underscores and cannot be longer than 63 characters
Error: Error: Cloud Function name must use only alphanumeric characters and underscores and cannot be longer than 63 characters
at parseFirebaseConfiguration (file:///[project-path]/alohi/node_modules/svelte-adapter-firebase/src/utils.js:144:9)
at adapt (file:///[project-path]/alohi/node_modules/svelte-adapter-firebase/src/index.js:26:35)
at adapt (file:///[project-path]/alohi/node_modules/@sveltejs/kit/dist/chunks/index5.js:377:8)
at file:///[project-path]/alohi/node_modules/@sveltejs/kit/dist/cli.js:877:11
<functionName> is a placeholder. You must name your functions something like "myFunc" or "svelteKit" or "kitSSR", it is whatever you want as long as it matches the conditions output by the error message
I updated it to
"rewrites": [
{
"source": "**",
"function": "ssrServer"
}
],
and now I'm getting the function in the terminal
The adapter should tell you which file to put that in, and then you should be able to run firebase deploy from the directory with firebase.json and you should end up with it all deployed
getting closer! thanks for your help.
i have npm run build running successfully now.
But when i run firebase deploy, I get the following errors from my firebase functions:
/[project-path]/alohi/functions/index.js
12:95 error Parsing error: Unexpected token =>
/[project-path]/functions/ssrServer/index.js
95:7 error Parsing error: Unexpected token function
These are eslint errors I'm assuming.
By the way, I backed down to v0.12.0 and 1.0.0-next.165. It looks like you have new versions up for v0.13.0
Perhaps, I do not use the eslint configs that come when you init functions. I have not encountered these errors myself. You can remove the functions.predeploy part from your firebase.json if you want to continue, or add ignore items to the eslint.
By the way, I backed down to v0.12.0 and 1.0.0-next.165. It looks like you have new versions up for v0.13.0
I would suggest updating to the latest of both the adapter and Kit.
My test cases do not have the eslint configs from firebase init so I will look into a permanent solution to this issue you have raised. In the meantime, please stop running eslint pre-deploy as mentioned above.
that did it! thanks for your help @jthegedus !!
any good examples that you know of for interacting with authentication and firestore via sveltekit?
Great! Glad you got it working 🎉
any good examples that you know of for interacting with authentication and firestore via sveltekit?
Not off the top of my head. This area needs some more work. I have yet to tackle it myself. In the meantime, I have been using the JS Admin SDK in my Kit API endpoints and using the load function to call those APIs. Importantly this is NOT client-side Firestore or client-side auth. Sharing auth state of the requesting user from the client to server is hard given the isomorphic nature of Kit components.
An example of what I have been doing to get you started:
// src/lib/firebase/admin.js
import admin from "firebase-admin";
const app = admin.apps.length === 0 ? admin.initializeApp() : admin.apps[0];
const firestore = admin.firestore(app);
export { firestore };// src/routes/index.svelte
<script context="module">
export async function load({ fetch }) {
const result = await fetch(`/index.json`);
const json = await result.json();
return {
props: {
data: result.status === 200 && json,
},
};
}
</script>
<script>
export let data;
</script>// src/routes/index.json.js
import { firestore } from '$lib/firebase/admin';
export async function get() {
const dataSnapshot = await firestore.doc('<COLLECTON>/<DOC>').get();
if (!dataSnapshot.exists) {
// error
}
const data = dataSnapshot.data();
return {
body: {
...data
},
status: 200,
headers: {
'Cache-Control': process.env.NODE_ENV === 'production' && `max-age=${5 * 60}`, // 5 minutes
},
};
}Using the regular Firebase JS SDK as you would in a static app will have issues when you get to the authentication part as any requests made during SSR are occurring without the auth state of the requesting user.
Anyway, good luck going forward, if you have direct feedback about how this process can be more streamlined please do let me know.
Can we host on firebase without any cloud functions? I previously worked with react and hosted a project on firebase without any cloud functions, so I was wondering if we can host a static website on firebase made by sveltekit
Can we host on firebase without any cloud functions? I previously worked with react and hosted a project on firebase without any cloud functions, so I was wondering if we can host a static website on firebase made by sveltekit
You can, for that you would use the static adapter, this adapter is specifically for SSR on Firebase.
I have a similar problem, but the above instructions do not fix npm run build - it still gives an error. Here is my firebase.json:
"functions": {
"source": "functions",
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "public",
"rewrites": [{
"source": "**",
"function": "svelteSSR"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"auth": {
"port": 9099
},
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"database": {
"port": 9000
},
"hosting": {
"port": 5000
},
"pubsub": {
"port": 8085
},
"storage": {
"port": 9199
},
"ui": {
"enabled": true
}
},
"remoteconfig": {
"template": "remoteconfig.template.json"
}
}```
Then when I run `npm run build` i get:
```> Error reading Cloud Function entrypoint file: /[project path]/functions/lib/index.js. ENOENT: no such file or directory, open '/[project path]/functions/lib/index.js'
Error: Error reading Cloud Function entrypoint file: /[project path]/functions/lib/index.js. ENOENT: no such file or directory, open '/[project path]/functions/lib/index.js'
at adapt (file:///[project path]/node_modules/svelte-adapter-firebase/src/index.js:87:11)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async adapt (file:///[project path]/node_modules/@sveltejs/kit/dist/chunks/index4.js:388:2)
at async file:///[project path]/node_modules/@sveltejs/kit/dist/cli.js:891:5
However I can see that it has created a new dir and file at functions/lib/svelteSSR/index.js. I initially selected to use typescript when i set up sveltekit, I wonder if that is a problem.
How can I fix the npm run build error?
@mulllhausen Can you open a new issue as that is different to this one
@jthegedus yep sure