Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import

[randomnessdev]

Version

@nuxtjs/firebase: 7.5.0 --> firebase: ex: 8.10.0 nuxt: 2.15.8

macOS Big Sur

Reproduction Link

Cannot share publicly but can give access in private

Steps to reproduce

npm run generate

What is Expected?

Having an "npm run generate" working

What is actually happening?

x Nuxt Fatal Error                                                          
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import'/Users/phil/Documents/GitHub/project/node_modules/firebase/app' 
is not supported resolving ES modules imported from /Users/phil/Documents/GitHub/project/node_modules/@nuxtjs/firebase/lib/module.js
Did you mean to import 
/Users/phil/Documents/GitHub/project/node_modules/firebase/app/dist/index.cjs.js?  

I found this solution but i have no idea how to apply it to a Nuxt project

I tried many different versions of @nuxtjs/firebase & firebase, but issue always remain,

Can anyone help?

[randomnessdev]

Found solution:

• First, added this to nuxt.config.js
• then switched "terminateDatabasesAfterGenerate: true" to false,
• then, to deploy it to Netlify, i removed the .nuxt folder from the gitignore

[mandalornl]

@randomnessdev @lupas changing the import to firebase/compat/app, instead of the absolute path seems to work. You can use the patch below, if you'd like.

diff --git a/node_modules/@nuxtjs/firebase/lib/module.js b/node_modules/@nuxtjs/firebase/lib/module.js
index d3aa31f..9f5eb34 100644
--- a/node_modules/@nuxtjs/firebase/lib/module.js
+++ b/node_modules/@nuxtjs/firebase/lib/module.js
@@ -326,9 +326,10 @@ function validateConfigKeys(options, currentEnv) {
  * See https://github.com/nuxt-community/firebase-module/issues/93
  */
 function terminateDatabasesInGenerateHooks(ctx) {
-  const firebaseDir = ctx.nuxt.options.srcDir + '/node_modules/firebase/'
   ctx.nuxt.hook('generate:before', async (generator) => {
-    const { default: firebase } = await import(firebaseDir + 'app')
+    const { default: firebase } = await import('firebase/compat/app')
+    await import('firebase/compat/database')
+    await import('firebase/compat/firestore')

     if (!firebase.apps.length) {
       firebase.initializeApp(generator.options.firebase.config)

[mandalornl]

@randomnessdev @lupas I've updated the patch in my comment above. I had to also import firebase/compat/database and firebase/compat/firestore for it to actually work.

[lupas]

Thanks guys, fixed it with v8.1.0.

Unfortunately, the terminateDatabasesInGenerateHooks() function doesn't seem to do its job anymore since v8. The warning "The command 'nuxt generate' finished but did not exit after 5s" this function was supposed to fix appears again. :/

But that's not a biggie, for Nuxt v3 I'll have to re-write the module anyway.. :)

Thanks a lot!

[Strift]

Hello,

I know this is closed, but I think I've found a workaround for v7.x.

• Set terminateDatabasesAfterGenerate to false
• Implement the fix to terminate database in generate:done hook
• Update your nuxt.config.js file as following

// nuxt.config.js

{
  build: {
      extend (config) {
        config.resolve.alias['firebase/app'] = 'firebase/app/dist/index.cjs.js'
      }
  }
}

I hope this can help.