title: I'm starting to create my web app with next.js, so I import firebase from "firebase". then this error occur in the terminal:
body: <p>I'm building a next.js web app and I want to use firebase for database and authentication. when I import firebase in a file this error occurs:</p>
  <pre><code>error - ./firebase.js:1:0
  Module not found: Package path . is not exported from package /home/naveen/New Folder/whatsapp-2/node_modules/firebase (see exports field in /home/naveen/New Folder/whatsapp-2/node_modules/firebase/package.json)
  Did you mean './firebase'?
  Requests that should resolve in the current directory need to start with './'.
  Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
  If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
  &gt; 1 | import firebase from &quot;firebase&quot;;
    2 | 
    3 | const firebaseConfig = {
    4 |   apiKey: &quot;AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y&quot;,
  
  Import trace for requested module:
  ./pages/_app.js
  
  https://nextjs.org/docs/messages/module-not-found
  </code></pre>
  <p>this is my firebase.js file:</p>
  <pre><code>import firebase from &quot;firebase&quot;;
  
  const firebaseConfig = {
    apiKey: &quot;AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y&quot;,
    authDomain: &quot;whatsapp-2-b5a79.firebaseapp.com&quot;,
    projectId: &quot;whatsapp-2-b5a79&quot;,
    storageBucket: &quot;whatsapp-2-b5a79.appspot.com&quot;,
    messagingSenderId: &quot;960710517268&quot;,
    appId: &quot;1:960710517268:web:42e2b65fd273553966fd01&quot;,
  };
  
  const app = !firebase.apps.length
    ? firebase.initializeApp(firebaseConfig)
    : firebase.app();
  
  const db = app.firestore();
  const auth = app.auth();
  
  const provider = new firebase.auth.GoogleAuthProvider();
  
  export { db, auth, provider };
  
  </code></pre>
  <p>this is package.json file:</p>
  <pre><code>{
    &quot;name&quot;: &quot;whatsapp-2&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;,
      &quot;lint&quot;: &quot;next lint&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;@material-ui/icons&quot;: &quot;^4.11.2&quot;,
      &quot;email-validator&quot;: &quot;^2.0.4&quot;,
      &quot;firebase&quot;: &quot;^9.0.0&quot;,
      &quot;next&quot;: &quot;11.1.0&quot;,
      &quot;react&quot;: &quot;17.0.2&quot;,
      &quot;react-dom&quot;: &quot;17.0.2&quot;,
      &quot;react-firebase-hooks&quot;: &quot;^3.0.4&quot;,
      &quot;styled-components&quot;: &quot;^5.3.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;eslint&quot;: &quot;7.32.0&quot;,
      &quot;eslint-config-next&quot;: &quot;11.1.0&quot;
    }
  }
  
  </code></pre>
  <p>here is exports field in package.json in node_modules.firebase :</p>
  <pre><code>{  &quot;exports&quot;: {
      &quot;./analytics&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./analytics/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./analytics/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./analytics/dist/index.esm.js&quot;
      },
      &quot;./app&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./app/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./app/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./app/dist/index.esm.js&quot;
      },
      &quot;./app-check&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./app-check/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./app-check/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./app-check/dist/index.esm.js&quot;
      },
      &quot;./auth&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./auth/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./auth/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./auth/dist/index.esm.js&quot;
      },
      &quot;./auth/cordova&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./auth/cordova/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./auth/cordova/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./auth/cordova/dist/index.esm.js&quot;
      },
      &quot;./auth/react-native&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./auth/react-native/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./auth/react-native/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./auth/react-native/dist/index.esm.js&quot;
      },
      &quot;./database&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./database/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./database/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./database/dist/index.esm.js&quot;
      },
      &quot;./firestore&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./firestore/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./firestore/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./firestore/dist/index.esm.js&quot;
      },
      &quot;./firestore/lite&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./firestore/lite/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./firestore/lite/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./firestore/lite/dist/index.esm.js&quot;
      },
      &quot;./functions&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./functions/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./functions/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./functions/dist/index.esm.js&quot;
      },
      &quot;./messaging&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./messaging/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./messaging/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./messaging/dist/index.esm.js&quot;
      },
      &quot;./messaging/sw&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./messaging/sw/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./messaging/sw/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./messaging/sw/dist/index.esm.js&quot;
      },
      &quot;./performance&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./performance/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./performance/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./performance/dist/index.esm.js&quot;
      },
      &quot;./remote-config&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./remote-config/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./remote-config/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./remote-config/dist/index.esm.js&quot;
      },
      &quot;./storage&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./storage/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./storage/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./storage/dist/index.esm.js&quot;
      },
      &quot;./compat/analytics&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/analytics/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/analytics/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/analytics/dist/index.esm.js&quot;
      },
      &quot;./compat/app&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/app/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/app/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/app/dist/index.esm.js&quot;
      },
      &quot;./compat/app-check&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/app-check/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/app-check/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/app-check/dist/index.esm.js&quot;
      },
      &quot;./compat/auth&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/auth/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/auth/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/auth/dist/index.esm.js&quot;
      },
      &quot;./compat/database&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/database/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/database/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/database/dist/index.esm.js&quot;
      },
      &quot;./compat/firestore&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/firestore/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/firestore/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/firestore/dist/index.esm.js&quot;
      },
      &quot;./compat/functions&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/functions/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/functions/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/functions/dist/index.esm.js&quot;
      },
      &quot;./compat/messaging&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/messaging/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/messaging/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/messaging/dist/index.esm.js&quot;
      },
      &quot;./compat/performance&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/performance/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/performance/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/performance/dist/index.esm.js&quot;
      },
      &quot;./compat/remote-config&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/remote-config/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/remote-config/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/remote-config/dist/index.esm.js&quot;
      },
      &quot;./compat/storage&quot;: {
        &quot;node&quot;: {
          &quot;require&quot;: &quot;./compat/storage/dist/index.cjs.js&quot;,
          &quot;import&quot;: &quot;./compat/storage/dist/index.mjs&quot;
        },
        &quot;default&quot;: &quot;./compat/storage/dist/index.esm.js&quot;
      }
    },
  }
  
  </code></pre>
  <p>I have done:</p>
  <pre><code>yarn add firebase
  </code></pre>
  <p>What have I done wrong?</p>