Error in React Web

[sarankup]

Hi, I have been using this for my web projects. Recently, I have started one of my web application using React web framework. As I try to use the storagedb2, I'm getting the following error.

"storagedb2__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor"

Here is the detailed error.

"TypeError: storagedb2__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor
    at Storage.returnDatabase (http://localhost:3000/static/js/main.chunk.js:321:16)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:7715:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:7764:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:7817:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/0.chunk.js:7832:29)
    at executeDispatch (http://localhost:3000/static/js/0.chunk.js:7963:7)
    at executeDispatchesInOrder (http://localhost:3000/static/js/0.chunk.js:7988:9)
    at executeDispatchesAndRelease (http://localhost:3000/static/js/0.chunk.js:8091:9)
    at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/0.chunk.js:8100:14)
    at forEachAccumulated (http://localhost:3000/static/js/0.chunk.js:8072:12)
    at runEventsInBatch (http://localhost:3000/static/js/0.chunk.js:8117:7)
    at runExtractedPluginEventsInBatch (http://localhost:3000/static/js/0.chunk.js:8259:7)
    at handleTopLevel (http://localhost:3000/static/js/0.chunk.js:13212:9)
    at batchedEventUpdates$1 (http://localhost:3000/static/js/0.chunk.js:31720:16)
    at batchedEventUpdates (http://localhost:3000/static/js/0.chunk.js:8795:16)
    at dispatchEventForPluginEventSystem (http://localhost:3000/static/js/0.chunk.js:13308:9)
    at attemptToDispatchEvent (http://localhost:3000/static/js/0.chunk.js:13425:9)
    at dispatchEvent (http://localhost:3000/static/js/0.chunk.js:13328:23)
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:42699:16)
    at runWithPriority$2 (http://localhost:3000/static/js/0.chunk.js:19587:14)
    at discreteUpdates$1 (http://localhost:3000/static/js/0.chunk.js:31737:16)
    at discreteUpdates (http://localhost:3000/static/js/0.chunk.js:8820:16)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/0.chunk.js:13295:7)"

Here is my React component

import React from "react";
import StorageDB from 'storagedb2'

class Storage extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = {
            name:'John'
        }
    this.returnDatabase = this.returnDatabase.bind(this);
    };

    returnDatabase()
    {
        const db = new StorageDB({
            storage: window.localStorage,     // storage object, default is window.localStorage. If you want to store data in memory only, you can set it null
            database: 'testdb',               // database name, default is 'db'
            primaryKey: 'id'                  // primary key of collection, default is '_id'
        });
        const Users = db.get("Users");
        Users.insert({'a':1});
    }
    render(){
        return <div>Storage <button onClick={this.returnDatabase}>Click me</button></div>
    }
}
export default Storage;

Please advise how to solve this issue.

[acathur]

Hi @sarankup, did you tried to use import * as StorageDB from 'storagedb2' to import dependency?

[sarankup]

Hi, I found a ways to solve this issue.

Instead of the below new StorageDB({ We have to use as follows new window.StorageDB({

[acathur]

Okay, thanks for your comment