hectorm/otpauth

Webpack Compilation Error

ChrisCates opened this issue · 5 comments

ChrisCates commented

Issue

Trying to use the otpauth library in any capacity in Angular 8.2.0 will cause a webpack compilation error.

I haven't investigated too thoroughly, but, based on how Webpack interprets the distribution of OTPAuth. It doesn't register $jscomp.global.Object.defineProperties properly on line 821 of the dist file.

Steps to reproduce

Try to incorporate the code in any capacity. In the example provided. I just put the OTP functions in a service.

import { Injectable } from '@angular/core';
import { TOTP, Secret } from 'otpauth';
import { encode } from 'hi-base32';

@Injectable({ providedIn: 'root' })
export class OtpService {
  constructor() { }

  public createSecret(length: number = 36): string {
    const randomString = Math.random().toString(36);
    return encode(randomString, true).slice(0, length);
  }

  public createAuth() {
    const secretb32 = this.createSecret();
    const secret = Secret.fromRaw(secretb32);
    return secret;
  }
}

Stack Trace

otpauth.js:821 Uncaught TypeError: Cannot read property 'defineProperties' of undefined
    at Module.<anonymous> (otpauth.js:821)
    at __webpack_require__ (otpauth.js:101)
    at otpauth.js:147
    at otpauth.js:148
    at otpauth.js:93
    at Object.<anonymous> (otpauth.js:94)
    at Object../node_modules/otpauth/dist/otpauth.js (otpauth.js:1009)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/service/otp.service.ts (app.module.ts:25)
    at __webpack_require__ (bootstrap:79)
(anonymous) @ otpauth.js:821
__webpack_require__ @ otpauth.js:101
(anonymous) @ otpauth.js:147
(anonymous) @ otpauth.js:148
(anonymous) @ otpauth.js:93
(anonymous) @ otpauth.js:94
./node_modules/otpauth/dist/otpauth.js @ otpauth.js:1009
__webpack_require__ @ bootstrap:79
./src/app/service/otp.service.ts @ app.module.ts:25
__webpack_require__ @ bootstrap:79
./src/app/app.module.ts @ app.component.ts:10
__webpack_require__ @ bootstrap:79
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
hectorm commented

I'm sorry, I couldn't reproduce the error. Could you share a sample project?

I leave attached a quick example created with the Angular CLI.
otpauth-angular-test.zip

ChrisCates commented

I ended up just using declare const. And including the script in index.html.
I'm assuming you were using a linux or unix based system.

I was running Webpack on Windows 10 DOS without WSL.
I used your project here though: https://github.com/ChrisCates/OTPLocker

Thanks for the good work!~

hectorm commented

I fixed the error in v4.1.0. You should be able to use the library the traditional way.

ChrisCates commented
hectorm commented

I don't think the operating system had any relation in this case. Google Closure Compiler was generating a code that incorrectly obtained the global object, I replaced it with Babel.