Angular - lesson 8 - deploy to firebase [error no default ex

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});
    }   
}); }

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

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

Add comment

ram mahesh free answered 5 years ago

0 0 Best answer

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?

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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

Add comment

abadilah free answered 5 years ago

0 0 Best answer

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?

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

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

Add comment

soccerdon1981 free answered 5 years ago

1 0 Best answer

Thanks for responding Damian!

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

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

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

<hr>

<ul>
<li>=== Deploying to 'ltcwizardalpha001'...</li>
<li>i deploying hosting i hosting[ltcwizardalpha001]: beginning deploy...</li>
<li>i hosting[ltcwizardalpha001]: found 1 files in public</li>
<li>hosting[ltcwizardalpha001]: file upload complete </li>
<li>i hosting[ltcwizardalpha001]: finalizing version...</li>
<li>hosting[ltcwizardalpha001]: version finalized </li>
<li>i hosting[ltcwizardalpha001]: releasing new version...</li>
<li>hosting[ltcwizardalpha001]: release complete</li>
<li>Deploy complete!</li>
<li>Project Console: <a href="https://console.firebase.google.com/project/ltcwizardalpha001/overview" target="_blank" rel="nofollow">https://console.firebase.google.com/project/ltcwizardalpha001/overview</a></li>
<li>Hosting URL: <a href="https://ltcwizardalpha001.firebaseapp.com" target="_blank" rel="nofollow">https://ltcwizardalpha001.firebaseapp.com</a></li>
</ul>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

soccerdon1981

17Support score
1Questions 1Answers 0Snippets