'require is not defined'

[张梓径]

Recreation

Environment

OS

elementary OS 5.0 Juno

Angular

Angular CLI: 8.3.12
Node: 12.12.0
OS: linux x64
Angular: 8.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.3.12
@angular/cdk                      8.1.1
@angular/cli                      8.3.12
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.1.1
@ngtools/webpack                  8.0.3
@schematics/angular               8.3.12
@schematics/update                0.803.12
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

ts-md5

"ts-md5": "1.2.6",

Browser

Chrome
Version 77.0.3865.120 (Official Build) (64-bit)

html template

  <form enctype="multipart/form-data" method="post">
    <div>
      <label for="picked">ARFF dataset</label>
      <div>
        <input
          type="file"
          id="picked"
          #picked
          (click)="message = ''"
          (change)="onPicked(picked)"
        />
      </div>
    </div>
  </form>

controller ts

import { Component } from "@angular/core";
import { UploaderService } from "./uploader.service";
import { global } from "../global";
import { ParallelHasher } from "ts-md5/dist/parallel_hasher";
@Component({
  selector: "app-uploader",
  templateUrl: "./uploader.component.html",
  providers: [UploaderService]
})
export class UploaderComponent {
  message: string = "Please upload an .arff file!";
  constructor(private uploaderService: UploaderService) {}
  userID: string = null;
  onPicked(input: HTMLInputElement) {
    const file = input.files[0];
    let hasher = new ParallelHasher("../assets/ts-md5/dist/md5_worker.js");
    hasher.hash(file).then(function(result) {
      console.log("md5 of file is", result);
    });
    if (file) {
      let fileExtension = file.name.split(".").pop();
      // console.log(fileExtension);
      if (fileExtension != "arff" && fileExtension != "ARFF") {
        this.message = "File error! Please provide a valid arff file!";
        console.error("File extension error!");
      } else {
        this.uploaderService.upload(file).subscribe(msg => {
          input.value = null;
          this.message = msg;
          this.userID = global.userID;
        });
      }
    }
  }
}

Error output

parallel_hasher.js:13 Hash worker failure ErrorEvent {isTrusted: true, message: "Uncaught ReferenceError: require is not defined", filename: "http://localhost:4200/assets/ts-md5/dist/md5_worker.js", lineno: 401, colno: 13, …}
ParallelHasher.self._hashWorker.onerror @ parallel_hasher.js:13
wrapFn @ zone-evergreen.js:1191
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:30885
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
error (async)
customScheduleGlobal @ zone-evergreen.js:1742
scheduleTask @ zone-evergreen.js:378
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleEventTask @ zone-evergreen.js:237
(anonymous) @ zone-evergreen.js:1911
desc.set @ zone-evergreen.js:1252
ParallelHasher @ parallel_hasher.js:11
onPicked @ uploader.component.ts:16
eval @ UploaderComponent.html:17
handleEvent @ core.js:34789
callWithDebugContext @ core.js:36407
debugHandleEvent @ core.js:36043
dispatchEvent @ core.js:22533
(anonymous) @ core.js:33721
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:30885
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
md5_file_hasher.ts:6 Uncaught ReferenceError: require is not defined
    at md5_file_hasher.ts:6

[Stephen von Takach]

fixed by #22

[张梓径]

"ts-md5": "^1.2.7"

Output

parallel_hasher.js:9 GET http://localhost:4200/assets/ts-md5/dist/md5_worker.js 404 (Not Found)
parallel_hasher.js:13 Hash worker failure 
Event {isTrusted: true, type: "error", target: Worker, currentTarget: Worker, eventPhase: 2, …}
bubbles: false
cancelBubble: false
cancelable: true
composed: false
currentTarget: Worker {__zone_symbol__messagefalse: Array(1), __zone_symbol__errorfalse: Array(1), __zone_symbol__ON_PROPERTYmessage: ƒ, __zone_symbol__ON_PROPERTYerror: ƒ}
defaultPrevented: false
eventPhase: 0
isTrusted: true
path: []
returnValue: true
srcElement: Worker {__zone_symbol__messagefalse: Array(1), __zone_symbol__errorfalse: Array(1), __zone_symbol__ON_PROPERTYmessage: ƒ, __zone_symbol__ON_PROPERTYerror: ƒ}
target: Worker {__zone_symbol__messagefalse: Array(1), __zone_symbol__errorfalse: Array(1), __zone_symbol__ON_PROPERTYmessage: ƒ, __zone_symbol__ON_PROPERTYerror: ƒ}
timeStamp: 7505.349999999453
type: "error"
__proto__: Event

[Stephen von Takach]

Looks like your dev server is unable to find http://localhost:4200/assets/ts-md5/dist/md5_worker.js

Might need to move that file where it can be found