Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import

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?

[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!

[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)