I'm trying to deploy Nuxt.js (2) SSR app to Firebase Hosting/Functions. I'm able to do that, as long as I won't include nuxt.config.ts in functions/src/index.ts. However, I do have some setup there, such as meta tags, I'd like to push.
That's my nuxt.config.js file (basically default Firebase starter for .ts + nuxt imports):
const { Nuxt } = require('nuxt-start')
const functions = require('firebase-functions')
const nuxtConfig = require('./../nuxt.config.ts')
const config = {
...nuxtConfig,
dev: false,
debug: false,
}
const nuxt = new Nuxt(config)
exports.ssrapp = functions.https.onRequest(async (req: any, res: any) => {
await nuxt.ready()
nuxt.render(req, res)
})
Using both module.exports = { ... } and export default { ... } inside nuxt.config.ts returns:
Error: Failed to load function definition from source: Failed to generate manifest from function source: SyntaxError: Cannot use import statement outside a module
then I add "type": "module" to functions/package.json (changing package.json in root won't help) and that's what I can see:
Error: Failed to load function definition from source: Failed to generate manifest from function source: ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'path/to/my/project/functions/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
I try to change from export default to module.exports = { ... } inside nuxt.config.ts and it gives me the same error Error: Failed to load function definition from source: Failed to generate manifest from function source:...
I've tried to change to import * as nuxtConfig from './../nuxt.config' while keeping module.exports = { ... } inside nuxt.config.ts, but success either, code is generated the same, and it creates src folder inside functions/lib complicating further the structure of Firebase project.
Changing back to export default { ... } inside nuxt.config.ts and keeping import * as nuxtConfig from './../nuxt.config' returns again:
Error: Failed to load function definition from source: Failed to generate manifest from function source: ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'path/to/my/project/Doyban-Website/functions/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
Lastly, I've tried to use all import's inside functions/index.ts
import * as functions from 'firebase-functions'
// @ts-ignore
import Nuxt from 'nuxt-start'
import * as nuxtConfig from './../nuxt.config'
const config = {
...nuxtConfig,
dev: false,
debug: false,
}
const nuxt = new Nuxt(config)
exports.ssrapp = functions.https.onRequest(async (req: any, res: any) => {
await nuxt.ready()
nuxt.render(req, res)
})
the result:
Error: Failed to load function definition from source: Failed to generate manifest from function source: ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'path/to/my/project/Doyban-Website/functions/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
I have no idea :-(