1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Angular - lesson 8 - deploy to firebase [error no default export]

soccerdon1981 free asked 5 years ago

First of all, this walkthrough / lesson guide is amazing! I've learned so much already. Secondly, here's the issue I'm having. lol

I received this error:

idb.services.ts ERROR: idb/lib/idb has no default export

While trying to complete this step:

After initializing the application we have nothing else left to do but to send it to the Firebase servers. But first we have to build a production version of our application! To do this, run the command below in the terminal of your application.

npm run pwa

This is the section of the Angular Lesson that I'm having an issue with:

Angular - lesson 8 - deploy to firebase...

Here's the code that I'm receiving an error on as well as the file location:

C:\xampp\htdocs\Angular Alpha 001\mdb-angular-small-bundle-7.4.1\ng-uikit-pro-standard-7.4.1\ng-uikit-pro-standard-7.4.1\src\app\services\idb.services.ts

import {Injectable} from '@angular/core'; 
import idb from 'idb';
import {Observable, Subject} from 'rxjs'; 
import {Schedule} from '../app.component';

@Injectable({   
    providedIn: 'root' 
}) 
export class IdbService {
private _dataChange: Subject<Schedule> = new Subject<Schedule>();
private _dbPromise;

constructor() { 
}

connectToIDB() {   
    this._dbPromise = idb.open('pwa-database', 1,
UpgradeDB => {
    if (!UpgradeDB.objectStoreNames.contains('Items')) {
      UpgradeDB.createObjectStore('Items', {keyPath: 'id', autoIncrement: true});
    }
    if (!UpgradeDB.objectStoreNames.contains('Sync-Items')) {
      UpgradeDB.createObjectStore('Sync-Items', {keyPath: 'id', autoIncrement: true});
    }   
}); }

Damian Gemza staff answered 5 years ago

Dear soccerdon1981,

I have tried to reproduce your problem - but without success. I have downloaded the repo from GitHub Step 7 (https://github.com/mdbootstrap/MDB-Angular-PWA/tree/7-working-with-databases), and then executed the npm install command.

After npm install I have followed the steps from my tutorial - npm install -g firebase-tools, firebase login, and firebase init hosting.

After npm run pwa command, the application works, and there are no other problems.

Could you please provide me the reproduction steps with which I'll be able to reproduce your problem?

Or send me your application without node_modules directory to my mail: d.gemza@mdbootstrap.com

Best Regards,

Damian

ram mahesh free answered 5 years ago

Hi Damian,

I have the similar issue. I was not directly using your github project rather following your steps for index db integration and i was getting the below issue in the editor itself. node_modules/idb/build/esm/index has no default export any suggestions would be great.

Damian Gemza staff commented 5 years ago

@ram mahesh Did you tried to check, if there's @types library for idb? Maybe that's the case, that you're not having types for idb in your project.

Did you follow the every step from this guide in your project? Maybe you have missed something?

Damian Gemza staff answered 5 years ago

Dear abadilah,

Could you please show me your terminal log on which I'll be able to read more about those errors? Please provide me more informations about your problem - which version of idb you're using. Why you can't use the older version, for example, 2.1?

Best Regards,

Damian

abadilah free answered 5 years ago

I have a similar issue but mine I think it has cames from the idb version changes because I updated all of my dependencies to the newer versions, so any code customizations in the idb.service that I can use to fix my code to meet up with the latest changes in the idb?

Damian Gemza staff answered 5 years ago

Dear soccerdon,

If the application works fine, and your problem is resolved, I don't need your application to debug your problem :)

Best Regards,

Damian

soccerdon1981 free answered 5 years ago

Thanks for responding Damian!

I must apologize, I completely forget about the vulnerabilities (2 low, 3 high) that I came across after running npm install the first time. Like a fool, I diverted from the tutorial and ran npm audit and attempted to fix the vulnerabilities.

The vulnerabilities that showed up after running npm install were as follows: (1) npm install --save-dev @angular-devkit/build-angular@0.13.3 (2) npm install --save-dev @angular/compiler-cli@7.2.6 (3) npm install --save-dev karma@4.0.0

After reviewing your above steps (downloading repo from github step 7) - and without diverting from the tutorial this time - I came to the same resolution as you. It works perfectly (see proof below my signature)!!!

I am so sorry for the confusion. I should have listed every step in my original post. Let me know if you'd still like the app emailed to you. Otherwise, I will follow instructions better next time. lol

Thanks again!

Don

  • === Deploying to 'ltcwizardalpha001'...
  • i deploying hosting i hosting[ltcwizardalpha001]: beginning deploy...
  • i hosting[ltcwizardalpha001]: found 1 files in public
  • hosting[ltcwizardalpha001]: file upload complete
  • i hosting[ltcwizardalpha001]: finalizing version...
  • hosting[ltcwizardalpha001]: version finalized
  • i hosting[ltcwizardalpha001]: releasing new version...
  • hosting[ltcwizardalpha001]: release complete

  • Deploy complete!

  • Project Console: https://console.firebase.google.com/project/ltcwizardalpha001/overview

  • Hosting URL: https://ltcwizardalpha001.firebaseapp.com
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10 Home 64-bit
  • Provided sample code: Yes
  • Provided link: Yes
Tags
angular pwa import-idb
About author
soccerdon1981
17Support score
1Questions 1Answers 0Snippets