microsoft / VoTT

Visual Object Tagging Tool: An electron app for building end to end Object Detection Models from Images and Videos.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ReferenceError: require is not defined

rayguang opened this issue · comments

commented

Describe the bug
I am adding a new cloud storage support by using min.io (https://docs.min.io/docs/javascript-client-api-reference.html). After running npm start, no particular error. When I go to http://localhost, received the following error:

`ReferenceError: require is not defined
Module../node_modules/minio/node_modules/async/dist/async.mjs
http://localhost/static/js/0.chunk.js:215453:30
webpack_require
src/app/webpack/bootstrap:782
779 | };
780 |
781 | // Execute the module function

782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 783 |
784 | // Flag the module as loaded
785 | module.l = true;
View compiled
fn
src/app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
150 | return webpack_require(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
▶ 2 stack frames were collapsed.
webpack_require
src/app/webpack/bootstrap:782
779 | };
780 |
781 | // Execute the module function
782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 783 |
784 | // Flag the module as loaded
785 | module.l = true;
View compiled
fn
src/app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
150 | return webpack_require(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
▶ 2 stack frames were collapsed.
webpack_require
src/app/webpack/bootstrap:782
779 | };
780 |
781 | // Execute the module function
782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 783 |
784 | // Flag the module as loaded
785 | module.l = true;`

To Reproduce
I have created several files and made most changes in minioStorage.ts by replacing the functions similar to azureStorage.ts with minio API

Expected behavior
A clear and concise description of what you expected to happen. A sample of the code listed below:

`import { IStorageProvider } from "./storageProviderFactory";
import { IAsset, AssetType, StorageType } from "../../models/applicationState";
import { AssetService } from "../../services/assetService";
import * as minio from "minio";
import { Bounce } from "react-toastify";

//var minio = require("minio");

const minioClient = new minio.Client({
endPoint: "localhost",
port: 9000,
useSSL: false,
accessKey: "xxxx",
secretKey: "xxxxxxx"
});

/**

  • Options for Minio Cloud Storage
    */
    export interface IMinioStorageOptions {
    folderName: string;
    createFolder: boolean;
    key?: string;
    secrect?: string;
    }

export class MinioStorage implements IStorageProvider {
/**
* Storage type
* @returns - StorageType.Cloud
*/
public storageType: StorageType = StorageType.Cloud;

constructor(private options?: IMinioStorageOptions) {}

/**
 * Initialize connection to Minio Storage account & container
 * If `createBucket` was specified in options, this function
 * creates the container. Otherwise, validates that container
 * is contained in list of containers
 * @throws - Error if folder does not exist or not able to
 * connect to Minio Storage
 */
public async initialize(): Promise<void> {
    const bucketName = this.options.folderName;
    if (this.options.createFolder) {
        await this.createContainer(bucketName);
    } else {
        const containers = await this.listFiles(bucketName);
        if (containers.length === 0) {
            throw new Error(`Container "${bucketName}" does not exist`);
        }
    }
}

/**
 * Reads text from specified blob
 * @param blobName - Name of blob in bucket
 */
public async readText(blobName: string): Promise<string> {
    const url = await minioClient.presignedGetObject("raw", blobName);
    return await this.getText(url);
}`

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: docker
  • Browser chrome
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

commented

The above link is authored by me :-)

I finally got it working by using the browserify. I am not a Javascript programmer but did some research to figure this out. I will publish what I have done once all code are finalized.

Ok, fine. I am interested!