0

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 :-(

Daniel Danielecki
  • 8,508
  • 6
  • 68
  • 94
  • I've followed those 2 tutorials https://medium.com/@sirofjelly/deploying-a-nuxt-ssr-server-side-rendering-app-to-google-firebase-5d90117167db & https://ben-mayer.com/blog/building-a-web-app-using-nuxtjs-and-firebase – Daniel Danielecki Mar 04 '23 at 09:25
  • can you check this stackoverflow [link](https://stackoverflow.com/questions/71321728/this-file-is-being-treated-as-an-es-module-because-it-has-a-js-file-extension) – Sathi Aiswarya Mar 04 '23 at 13:45
  • @SathiAiswarya, do you mean to make a `nuxt.config.json` out of `nuxt.config.js`? – Daniel Danielecki Mar 04 '23 at 21:07
  • @kissu, do you have any idea? I've seen your contribution to related topic: https://stackoverflow.com/q/73756329/11127383. The repo, rather quick setup just firebase project init & deploy is needed: https://github.com/Doyban/Doyban-Website. The project deployed on Firebase https://doyban-website-nuxtjs.web.app (with commented out `nuxtConfig` inside `functions/index.ts`. I just pushed the changes! – Daniel Danielecki Mar 05 '23 at 06:35

0 Answers0