diff --git a/config-overrides.js b/config-overrides.js
index 691fcb0..dc1edcd 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -3,6 +3,7 @@ const {
   useBabelRc,
   override
 } = require('customize-cra');
+const worderLoader = require("worker-loader");
 
 const path = require('path');
 
@@ -36,12 +37,25 @@ module.exports = override(
 
     config.resolve.extensions.push('.wasm');
 
+
+    config.module.rules.push({
+      test: /qrCodeWorker_Comlink2.js/,
+      include: path.resolve(__dirname, 'src', 'workers'),
+      use: [{ loader: './modules/worker-loader/dist/index.js', options: {} }]
+    });
+
+    // config.module.rules.push({
+    //   test: /qrCodeWorker_Workerize.js$/,
+    //   include: path.resolve(__dirname, 'src', 'workers'),
+    //   use: [{ loader: require.resolve('workerize-loader'), options: {} }]
+    // });
+
     config.module.rules.push({
       test: wasmExtensionRegExp,
       include: path.resolve(__dirname, 'src'),
       use: [{ loader: require.resolve('wasm-loader'), options: {} }]
     });
-    
+
     return config;
   },
   useBabelRc(),
diff --git a/modules/worker-loader/CHANGELOG.md b/modules/worker-loader/CHANGELOG.md
new file mode 100644
index 0000000..16de7d4
--- /dev/null
+++ b/modules/worker-loader/CHANGELOG.md
@@ -0,0 +1,38 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+<a name="1.1.1"></a>
+## [1.1.1](https://github.com/webpack-contrib/worker-loader/compare/v1.1.0...v1.1.1) (2018-02-25)
+
+
+### Bug Fixes
+
+* **index:** add `webpack >= v4.0.0` support ([#128](https://github.com/webpack-contrib/worker-loader/issues/128)) ([d1a7a94](https://github.com/webpack-contrib/worker-loader/commit/d1a7a94))
+
+
+
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/webpack-contrib/worker-loader/compare/v1.0.0...v1.1.0) (2017-10-24)
+
+
+### Features
+
+* add `publicPath` support (`options.publicPath`) ([#31](https://github.com/webpack-contrib/worker-loader/issues/31)) ([96c6144](https://github.com/webpack-contrib/worker-loader/commit/96c6144))
+
+
+
+<a name="1.0.0"></a>
+## [1.0.0](https://github.com/webpack-contrib/worker-loader/compare/v0.8.0...v1.0.0) (2017-09-25)
+
+
+### Features
+
+* add `options` validation (`schema-utils`) ([#78](https://github.com/webpack-contrib/worker-loader/issues/78)) ([5e2f5e6](https://github.com/webpack-contrib/worker-loader/commit/5e2f5e6))
+* support loading node core modules ([#76](https://github.com/webpack-contrib/worker-loader/issues/76)) ([edcda35](https://github.com/webpack-contrib/worker-loader/commit/edcda35))
+
+
+### BREAKING CHANGES
+
+* loader-utils upgrade to > 1.0 is not backwards
+compatible with previous versions
diff --git a/modules/worker-loader/LICENSE b/modules/worker-loader/LICENSE
new file mode 100644
index 0000000..8c11fc7
--- /dev/null
+++ b/modules/worker-loader/LICENSE
@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/modules/worker-loader/README.md b/modules/worker-loader/README.md
new file mode 100644
index 0000000..9b8b950
--- /dev/null
+++ b/modules/worker-loader/README.md
@@ -0,0 +1,300 @@
+[![npm][npm]][npm-url]
+[![node][node]][node-url]
+[![deps][deps]][deps-url]
+[![test][test]][test-url]
+[![coverage][cover]][cover-url]
+[![chat][chat]][chat-url]
+
+<div align="center">
+  <a href="https://github.com/webpack/webpack">
+    <img width="200" height="200" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
+  </a>
+  <h1>Worker Loader</h1>
+  <p>This loader registers the script as <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Worker</a><p>
+</div>
+
+
+<h2 align="center">Install</h2>
+
+```bash
+npm i -D worker-loader
+```
+
+<h2 align="center"><a href="https://webpack.js.org/concepts/loaders">Usage</a></h2>
+
+### `Inlined`
+
+**App.js**
+```js
+import Worker from 'worker-loader!./Worker.js';
+```
+
+### `Config`
+
+**webpack.config.js**
+```js
+{
+  module: {
+    rules: [
+      {
+        test: /\.worker\.js$/,
+        use: { loader: 'worker-loader' }
+      }
+    ]
+  }
+}
+```
+
+**App.js**
+```js
+import Worker from './file.worker.js';
+
+const worker = new Worker();
+
+worker.postMessage({ a: 1 });
+worker.onmessage = function (event) {};
+
+worker.addEventListener("message", function (event) {});
+```
+
+<h2 align="center">Options</h2>
+
+|Name|Type|Default|Description|
+|:--:|:--:|:-----:|:----------|
+|[**`name`**](#name)|`{String}`|`[hash].worker.js`|Set a custom name for the output script| 
+|[**`inline`**](#inline)|`{Boolean}`|`false`|Inline the worker as a BLOB|
+|[**`fallback`**](#fallback)|`{Boolean}`|`false`|Require a fallback for non-worker supporting environments|
+|[**`publicPath`**](#publicPath)|`{String}`|`null`|Override the path from which worker scripts are downloaded|
+
+### `name`
+
+To set a custom name for the output script, use the `name` parameter. The name may contain the string `[hash]`, which will be replaced with a content dependent hash for caching purposes. When using `name` alone `[hash]` is omitted.
+
+*webpack.config.js**
+```js
+{
+  loader: 'worker-loader',
+  options: { name: 'WorkerName.[hash].js' }
+}
+```
+
+### `inline`
+
+You can also inline the worker as a BLOB with the `inline` parameter
+
+**webpack.config.js**
+```js
+{
+  loader: 'worker-loader',
+  options: { inline: true }
+}
+```
+
+> ℹ️  Inline mode will also create chunks for browsers without support for inline workers, to disable this behavior just set `fallback` parameter as `false`
+
+**webpack.config.js**
+```js
+{
+  loader: 'worker-loader'
+  options: { inline: true, fallback: false }
+}
+```
+
+### `fallback`
+
+Require a fallback for non-worker supporting environments
+
+**webpack.config.js**
+```js
+{
+  loader: 'worker-loader'
+  options: { fallback: false }
+}
+```
+
+### `publicPath`
+
+Overrides the path from which worker scripts are downloaded. If not specified, the same public path used for other
+webpack assets is used
+
+**webpack.config.js**
+```js
+{
+  loader: 'worker-loader'
+  options: { publicPath: '/scripts/workers/' }
+}
+```
+
+<h2 align="center">Examples</h2>
+
+The worker file can import dependencies just like any other file
+
+**Worker.js**
+```js
+const _ = require('lodash')
+
+const obj = { foo: 'foo' }
+
+_.has(obj, 'foo')
+
+// Post data to parent thread
+self.postMessage({ foo: 'foo' })
+
+// Respond to message from parent thread
+self.addEventListener('message', (event) => console.log(event))  
+```
+
+### `Integrating with ES2015 Modules`
+
+> ℹ️  You can even use ES2015 Modules if you have the [`babel-loader`](https://github.com/babel/babel-loader) configured.
+
+**Worker.js**
+```js
+import _ from 'lodash'
+
+const obj = { foo: 'foo' }
+
+_.has(obj, 'foo')
+
+// Post data to parent thread
+self.postMessage({ foo: 'foo' })
+
+// Respond to message from parent thread
+self.addEventListener('message', (event) => console.log(event))
+```
+
+### `Integrating with TypeScript`
+
+To integrate with TypeScript, you will need to define a custom module for the exports of your worker
+
+**typings/custom.d.ts**
+```typescript
+declare module "worker-loader!*" {
+  class WebpackWorker extends Worker {
+    constructor();
+  }
+
+  export default WebpackWorker;
+}
+```
+
+**Worker.ts**
+```typescript
+const ctx: Worker = self as any;
+
+// Post data to parent thread
+ctx.postMessage({ foo: "foo" });
+
+// Respond to message from parent thread
+ctx.addEventListener("message", (event) => console.log(event));
+```
+
+**App.ts**
+```typescript
+import Worker from "worker-loader!./Worker";
+
+const worker = new Worker();
+
+worker.postMessage({ a: 1 });
+worker.onmessage = (event) => {};
+
+worker.addEventListener("message", (event) => {});
+```
+
+### `Cross-Origin Policy`
+
+[`WebWorkers`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) are restricted by a [same-origin policy](https://en.wikipedia.org/wiki/Same-origin_policy), so if your `webpack` assets are not being served from the same origin as your application, their download may be blocked by your browser. This scenario can commonly occur if you are hosting your assets under a CDN domain. Even downloads from the `webpack-dev-server` could be blocked. There are two workarounds
+
+Firstly, you can inline the worker as a blob instead of downloading it as an external script via the [`inline`](#inline) parameter
+
+**App.js**
+```js
+import Worker from './file.worker.js';
+```
+
+**webpack.config.js**
+```js
+{
+  loader: 'worker-loader'
+  options: { inline: true }
+}
+```
+
+Secondly, you may override the base download URL for your worker script via the [`publicPath`](#publicpath) option
+
+**App.js**
+```js
+// This will cause the worker to be downloaded from `/workers/file.worker.js`
+import Worker from './file.worker.js';
+```
+
+**webpack.config.js**
+```js
+{
+  loader: 'worker-loader'
+  options: { publicPath: '/workers/' }
+}
+```
+
+<h2 align="center">Maintainers</h2>
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://github.com/TrySound">
+          <img width="150" height="150" src="https://avatars3.githubusercontent.com/u/5635476?v=3&s=150">
+        </a>
+        <br />
+        <a href="https://github.com/TrySound">Bogdan Chadkin</a>
+      </td>
+      <td align="center">
+        <a href="https://github.com/bebraw">
+          <img width="150" height="150" src="https://github.com/bebraw.png?v=3&s=150">
+          </br>
+          Juho Vepsäläinen
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://github.com/d3viant0ne">
+          <img width="150" height="150" src="https://github.com/d3viant0ne.png?v=3&s=150">
+          </br>
+          Joshua Wiens
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://github.com/michael-ciniawsky">
+          <img width="150" height="150" src="https://github.com/michael-ciniawsky.png?v=3&s=150">
+          </br>
+          Michael Ciniawsky
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://github.com/evilebottnawi">
+          <img width="150" height="150" src="https://github.com/evilebottnawi.png?v=3&s=150">
+          </br>
+          Alexander Krasnoyarov
+        </a>
+      </td>
+    </tr>
+  <tbody>
+</table>
+
+
+[npm]: https://img.shields.io/npm/v/worker-loader.svg
+[npm-url]: https://npmjs.com/package/worker-loader
+
+[node]: https://img.shields.io/node/v/cache-loader.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://david-dm.org/webpack-contrib/worker-loader.svg
+[deps-url]: https://david-dm.org/webpack-contrib/worker-loader
+
+[test]: http://img.shields.io/travis/webpack-contrib/worker-loader.svg
+[test-url]: https://travis-ci.org/webpack-contrib/worker-loader
+
+[cover]: https://codecov.io/gh/webpack-contrib/cache-loader/branch/master/graph/badge.svg
+[cover-url]: https://codecov.io/gh/webpack-contrib/cache-loader
+
+[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
+[chat-url]: https://gitter.im/webpack/webpack
diff --git a/modules/worker-loader/dist/Error.js b/modules/worker-loader/dist/Error.js
new file mode 100644
index 0000000..abb55ca
--- /dev/null
+++ b/modules/worker-loader/dist/Error.js
@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+class LoaderError extends Error {
+  constructor(err) {
+    super(err);
+
+    this.name = err.name || 'Loader Error';
+    this.message = `${err.name}\n\n${err.message}\n`;
+    this.stack = false;
+  }
+}
+
+exports.default = LoaderError;
\ No newline at end of file
diff --git a/modules/worker-loader/dist/cjs.js b/modules/worker-loader/dist/cjs.js
new file mode 100644
index 0000000..6213302
--- /dev/null
+++ b/modules/worker-loader/dist/cjs.js
@@ -0,0 +1,6 @@
+'use strict';
+
+const loader = require('./index');
+
+module.exports = loader.default;
+module.exports.pitch = loader.pitch;
\ No newline at end of file
diff --git a/modules/worker-loader/dist/index.js b/modules/worker-loader/dist/index.js
new file mode 100644
index 0000000..c9f40d0
--- /dev/null
+++ b/modules/worker-loader/dist/index.js
@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = loader;
+exports.pitch = pitch;
+
+var _options = require('./options.json');
+
+var _options2 = _interopRequireDefault(_options);
+
+var _loaderUtils = require('loader-utils');
+
+var _loaderUtils2 = _interopRequireDefault(_loaderUtils);
+
+var _schemaUtils = require('schema-utils');
+
+var _schemaUtils2 = _interopRequireDefault(_schemaUtils);
+
+var _NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
+
+var _NodeTargetPlugin2 = _interopRequireDefault(_NodeTargetPlugin);
+
+var _SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
+
+var _SingleEntryPlugin2 = _interopRequireDefault(_SingleEntryPlugin);
+
+var _WebWorkerTemplatePlugin = require('webpack/lib/webworker/WebWorkerTemplatePlugin');
+
+var _WebWorkerTemplatePlugin2 = _interopRequireDefault(_WebWorkerTemplatePlugin);
+
+var _workers = require('./workers/');
+
+var _workers2 = _interopRequireDefault(_workers);
+
+var _Error = require('./Error');
+
+var _Error2 = _interopRequireDefault(_Error);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable
+  import/first,
+  import/order,
+  comma-dangle,
+  linebreak-style,
+  no-param-reassign,
+  no-underscore-dangle,
+  prefer-destructuring
+*/
+function loader() {}
+
+function pitch(request) {
+  const options = _loaderUtils2.default.getOptions(this) || {};
+
+  (0, _schemaUtils2.default)(_options2.default, options, 'Worker Loader');
+
+  if (!this.webpack) {
+    throw new _Error2.default({
+      name: 'Worker Loader',
+      message: 'This loader is only usable with webpack'
+    });
+  }
+
+  this.cacheable(false);
+
+  const cb = this.async();
+
+  const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {
+    context: options.context || this.rootContext || this.options.context,
+    regExp: options.regExp
+  });
+
+  const worker = {};
+
+  worker.options = {
+    filename,
+    chunkFilename: `[id].${filename}`,
+    namedChunkFilename: null
+  };
+
+  worker.compiler = this._compilation.createChildCompiler('worker', worker.options);
+
+  // Tapable.apply is deprecated in tapable@1.0.0-x.
+  // The plugins should now call apply themselves.
+  new _WebWorkerTemplatePlugin2.default(worker.options).apply(worker.compiler);
+
+  if (this.target !== 'webworker' && this.target !== 'web') {
+    new _NodeTargetPlugin2.default().apply(worker.compiler);
+  }
+
+  let wasmPluginPath = null;
+	try {
+		wasmPluginPath = require.resolve(
+			'webpack/lib/web/FetchCompileWasmTemplatePlugin'
+		);
+	}
+	catch (_err) {
+		// webpack <= v3, skipping
+	}
+
+	if (wasmPluginPath) {
+		// eslint-disable-next-line global-require
+		const FetchCompileWasmTemplatePlugin = require(wasmPluginPath);
+		new FetchCompileWasmTemplatePlugin({
+			mangleImports: this._compiler.options.optimization.mangleWasmImports
+		}).apply(worker.compiler);
+	}
+
+  new _SingleEntryPlugin2.default(this.context, `!!${request}`, 'main').apply(worker.compiler);
+
+  const subCache = `subcache ${__dirname} ${request}`;
+
+  worker.compilation = compilation => {
+    if (compilation.cache) {
+      if (!compilation.cache[subCache]) {
+        compilation.cache[subCache] = {};
+      }
+
+      compilation.cache = compilation.cache[subCache];
+    }
+  };
+
+  if (worker.compiler.hooks) {
+    const plugin = { name: 'WorkerLoader' };
+
+    worker.compiler.hooks.compilation.tap(plugin, worker.compilation);
+  } else {
+    worker.compiler.plugin('compilation', worker.compilation);
+  }
+
+  worker.compiler.runAsChild((err, entries, compilation) => {
+    if (err) return cb(err);
+
+    if (entries[0]) {
+      worker.file = entries[0].files[0];
+
+      worker.factory = (0, _workers2.default)(worker.file, compilation.assets[worker.file].source(), options);
+
+      if (options.fallback === false) {
+        delete this._compilation.assets[worker.file];
+      }
+
+      return cb(null, `module.exports = function() {\n  return ${worker.factory};\n};`);
+    }
+
+    return cb(null, null);
+  });
+}
\ No newline at end of file
diff --git a/modules/worker-loader/dist/options.json b/modules/worker-loader/dist/options.json
new file mode 100644
index 0000000..27e5ea4
--- /dev/null
+++ b/modules/worker-loader/dist/options.json
@@ -0,0 +1,18 @@
+{
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string"
+    },
+    "inline": {
+      "type": "boolean"
+    },
+    "fallback": {
+      "type": "boolean"
+    },
+    "publicPath": {
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}
diff --git a/modules/worker-loader/dist/workers/InlineWorker.js b/modules/worker-loader/dist/workers/InlineWorker.js
new file mode 100644
index 0000000..b1e2185
--- /dev/null
+++ b/modules/worker-loader/dist/workers/InlineWorker.js
@@ -0,0 +1,37 @@
+'use strict';
+
+// http://stackoverflow.com/questions/10343913/how-to-create-a-web-worker-from-a-string
+
+var URL = window.URL || window.webkitURL;
+
+module.exports = function (content, url) {
+  try {
+    try {
+      var blob;
+
+      try {
+        // BlobBuilder = Deprecated, but widely implemented
+        var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
+
+        blob = new BlobBuilder();
+
+        blob.append(content);
+
+        blob = blob.getBlob();
+      } catch (e) {
+        // The proposed API
+        blob = new Blob([content]);
+      }
+
+      return new Worker(URL.createObjectURL(blob));
+    } catch (e) {
+      return new Worker('data:application/javascript,' + encodeURIComponent(content));
+    }
+  } catch (e) {
+    if (!url) {
+      throw Error('Inline worker is not supported');
+    }
+
+    return new Worker(url);
+  }
+};
\ No newline at end of file
diff --git a/modules/worker-loader/dist/workers/index.js b/modules/worker-loader/dist/workers/index.js
new file mode 100644
index 0000000..93c7301
--- /dev/null
+++ b/modules/worker-loader/dist/workers/index.js
@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const getWorker = (file, content, options) => {
+  const publicPath = options.publicPath ? JSON.stringify(options.publicPath) : '__webpack_public_path__';
+
+  const publicWorkerPath = `${publicPath} + ${JSON.stringify(file)}`;
+
+  if (options.inline) {
+    const InlineWorkerPath = JSON.stringify(`!!${_path2.default.join(__dirname, 'InlineWorker.js')}`);
+
+    const fallbackWorkerPath = options.fallback === false ? 'null' : publicWorkerPath;
+
+    return `require(${InlineWorkerPath})(${JSON.stringify(content)}, ${fallbackWorkerPath})`;
+  }
+
+  return `new Worker(${publicWorkerPath})`;
+}; /* eslint-disable multiline-ternary */
+exports.default = getWorker;
\ No newline at end of file
diff --git a/modules/worker-loader/node_modules/schema-utils/CHANGELOG.md b/modules/worker-loader/node_modules/schema-utils/CHANGELOG.md
new file mode 100644
index 0000000..9c0bfd4
--- /dev/null
+++ b/modules/worker-loader/node_modules/schema-utils/CHANGELOG.md
@@ -0,0 +1,124 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+<a name="0.4.7"></a>
+## [0.4.7](https://github.com/webpack-contrib/schema-utils/compare/v0.4.6...v0.4.7) (2018-08-07)
+
+
+### Bug Fixes
+
+* **src:** `node >= v4.0.0` support ([#32](https://github.com/webpack-contrib/schema-utils/issues/32)) ([cb13dd4](https://github.com/webpack-contrib/schema-utils/commit/cb13dd4))
+
+
+
+<a name="0.4.6"></a>
+## [0.4.6](https://github.com/webpack-contrib/schema-utils/compare/v0.4.5...v0.4.6) (2018-08-06)
+
+
+### Bug Fixes
+
+* **package:** remove lockfile ([#28](https://github.com/webpack-contrib/schema-utils/issues/28)) ([69f1a81](https://github.com/webpack-contrib/schema-utils/commit/69f1a81))
+* **package:** remove unnecessary `webpack` dependency ([#26](https://github.com/webpack-contrib/schema-utils/issues/26)) ([532eaa5](https://github.com/webpack-contrib/schema-utils/commit/532eaa5))
+
+
+
+<a name="0.4.5"></a>
+## [0.4.5](https://github.com/webpack-contrib/schema-utils/compare/v0.4.4...v0.4.5) (2018-02-13)
+
+
+### Bug Fixes
+
+* **CHANGELOG:** update broken links ([4483b9f](https://github.com/webpack-contrib/schema-utils/commit/4483b9f))
+* **package:** update broken links ([f2494ba](https://github.com/webpack-contrib/schema-utils/commit/f2494ba))
+
+
+
+<a name="0.4.4"></a>
+## [0.4.4](https://github.com/webpack-contrib/schema-utils/compare/v0.4.3...v0.4.4) (2018-02-13)
+
+
+### Bug Fixes
+
+* **package:** update `dependencies` ([#22](https://github.com/webpack-contrib/schema-utils/issues/22)) ([3aecac6](https://github.com/webpack-contrib/schema-utils/commit/3aecac6))
+
+
+
+<a name="0.4.3"></a>
+## [0.4.3](https://github.com/webpack-contrib/schema-utils/compare/v0.4.2...v0.4.3) (2017-12-14)
+
+
+### Bug Fixes
+
+* **validateOptions:** throw `err` instead of `process.exit(1)` ([#17](https://github.com/webpack-contrib/schema-utils/issues/17)) ([c595eda](https://github.com/webpack-contrib/schema-utils/commit/c595eda))
+* **ValidationError:** never return `this` in the ctor ([#16](https://github.com/webpack-contrib/schema-utils/issues/16)) ([c723791](https://github.com/webpack-contrib/schema-utils/commit/c723791))
+
+
+
+<a name="0.4.2"></a>
+## [0.4.2](https://github.com/webpack-contrib/schema-utils/compare/v0.4.1...v0.4.2) (2017-11-09)
+
+
+### Bug Fixes
+
+* **validateOptions:** catch `ValidationError` and handle it internally ([#15](https://github.com/webpack-contrib/schema-utils/issues/15)) ([9c5ef5e](https://github.com/webpack-contrib/schema-utils/commit/9c5ef5e))
+
+
+
+<a name="0.4.1"></a>
+## [0.4.1](https://github.com/webpack-contrib/schema-utils/compare/v0.4.0...v0.4.1) (2017-11-03)
+
+
+### Bug Fixes
+
+* **ValidationError:** use `Error.captureStackTrace` for `err.stack` handling ([#14](https://github.com/webpack-contrib/schema-utils/issues/14)) ([a6fb974](https://github.com/webpack-contrib/schema-utils/commit/a6fb974))
+
+
+
+<a name="0.4.0"></a>
+# [0.4.0](https://github.com/webpack-contrib/schema-utils/compare/v0.3.0...v0.4.0) (2017-10-28)
+
+
+### Features
+
+* add support for `typeof`, `instanceof` (`{Function\|RegExp}`) ([#10](https://github.com/webpack-contrib/schema-utils/issues/10)) ([9f01816](https://github.com/webpack-contrib/schema-utils/commit/9f01816))
+
+
+
+<a name="0.3.0"></a>
+# [0.3.0](https://github.com/webpack-contrib/schema-utils/compare/v0.2.1...v0.3.0) (2017-04-29)
+
+
+### Features
+
+* add ValidationError ([#8](https://github.com/webpack-contrib/schema-utils/issues/8)) ([d48f0fb](https://github.com/webpack-contrib/schema-utils/commit/d48f0fb))
+
+
+
+<a name="0.2.1"></a>
+## [0.2.1](https://github.com/webpack-contrib/schema-utils/compare/v0.2.0...v0.2.1) (2017-03-13)
+
+
+### Bug Fixes
+
+* Include .babelrc to `files` ([28f0363](https://github.com/webpack-contrib/schema-utils/commit/28f0363))
+* Include source to `files` ([43b0f2f](https://github.com/webpack-contrib/schema-utils/commit/43b0f2f))
+
+
+
+<a name="0.2.0"></a>
+# [0.2.0](https://github.com/webpack-contrib/schema-utils/compare/v0.1.0...v0.2.0) (2017-03-12)
+
+<a name="0.1.0"></a>
+# 0.1.0 (2017-03-07)
+
+
+### Features
+
+* **validations:** add validateOptions module ([ae9b47b](https://github.com/webpack-contrib/schema-utils/commit/ae9b47b))
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
diff --git a/modules/worker-loader/node_modules/schema-utils/LICENSE b/modules/worker-loader/node_modules/schema-utils/LICENSE
new file mode 100644
index 0000000..8c11fc7
--- /dev/null
+++ b/modules/worker-loader/node_modules/schema-utils/LICENSE
@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/modules/worker-loader/node_modules/schema-utils/README.md b/modules/worker-loader/node_modules/schema-utils/README.md
new file mode 100644
index 0000000..2c4d996
--- /dev/null
+++ b/modules/worker-loader/node_modules/schema-utils/README.md
@@ -0,0 +1,130 @@
+[![npm][npm]][npm-url]
+[![node][node]][node-url]
+[![deps][deps]][deps-url]
+[![test][test]][test-url]
+[![coverage][cover]][cover-url]
+[![chat][chat]][chat-url]
+
+<div align="center">
+  <a href="http://json-schema.org">
+    <img width="160" height="160"
+      src="https://raw.githubusercontent.com/webpack-contrib/schema-utils/master/docs/logo.png">
+  </a>
+  <a href="https://github.com/webpack/webpack">
+    <img width="200" height="200"
+      src="https://webpack.js.org/assets/icon-square-big.svg">
+  </a>
+  <h1>Schema Utils</h1>
+</div>
+
+<h2 align="center">Install</h2>
+
+```bash
+npm i schema-utils
+```
+
+<h2 align="center">Usage</h2>
+
+### `validateOptions`
+
+**schema.json**
+```js
+{
+  "type": "object",
+  "properties": {
+    // Options...
+  },
+  "additionalProperties": false
+}
+```
+
+```js
+import schema from 'path/to/schema.json'
+import validateOptions from 'schema-utils'
+
+validateOptions(schema, options, 'Loader/Plugin Name')
+```
+
+<h2 align="center">Examples</h2>
+
+**schema.json**
+```json
+{
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string"
+    },
+    "test": {
+      "anyOf": [
+        { "type": "array" },
+        { "type": "string" },
+        { "instanceof": "RegExp" }
+      ]
+    },
+    "transform": {
+      "instanceof": "Function"
+    },
+    "sourceMap": {
+      "type": "boolean"
+    }
+  },
+  "additionalProperties": false
+}
+```
+
+### `Loader`
+
+```js
+import { getOptions } from 'loader-utils'
+import validateOptions from 'schema-utils'
+
+import schema from 'path/to/schema.json'
+
+function loader (src, map) {
+  const options = getOptions(this) || {}
+
+  validateOptions(schema, options, 'Loader Name')
+
+  // Code...
+}
+```
+
+### `Plugin`
+
+```js
+import validateOptions from 'schema-utils'
+
+import schema from 'path/to/schema.json'
+
+class Plugin {
+  constructor (options) {
+    validateOptions(schema, options, 'Plugin Name')
+
+    this.options = options
+  }
+
+  apply (compiler) {
+    // Code...
+  }
+}
+```
+
+
+[npm]: https://img.shields.io/npm/v/schema-utils.svg
+[npm-url]: https://npmjs.com/package/schema-utils
+
+[node]: https://img.shields.io/node/v/schema-utils.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://david-dm.org/webpack-contrib/schema-utils.svg
+[deps-url]: https://david-dm.org/webpack-contrib/schema-utils
+
+[test]: http://img.shields.io/travis/webpack-contrib/schema-utils.svg
+[test-url]: https://travis-ci.org/webpack-contrib/schema-utils
+
+[cover]: https://codecov.io/gh/webpack-contrib/schema-utils/branch/master/graph/badge.svg
+[cover-url]: https://codecov.io/gh/webpack-contrib/schema-utils
+
+[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
+[chat-url]: https://gitter.im/webpack/webpack
diff --git a/modules/worker-loader/node_modules/schema-utils/package.json b/modules/worker-loader/node_modules/schema-utils/package.json
new file mode 100644
index 0000000..c470e2d
--- /dev/null
+++ b/modules/worker-loader/node_modules/schema-utils/package.json
@@ -0,0 +1,73 @@
+{
+  "_from": "schema-utils@^0.4.0",
+  "_id": "schema-utils@0.4.7",
+  "_inBundle": false,
+  "_integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
+  "_location": "/worker-loader/schema-utils",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "schema-utils@^0.4.0",
+    "name": "schema-utils",
+    "escapedName": "schema-utils",
+    "rawSpec": "^0.4.0",
+    "saveSpec": null,
+    "fetchSpec": "^0.4.0"
+  },
+  "_requiredBy": [
+    "/worker-loader"
+  ],
+  "_resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
+  "_shasum": "ba74f597d2be2ea880131746ee17d0a093c68187",
+  "_spec": "schema-utils@^0.4.0",
+  "_where": "/Users/nick.feng/srv/github-source/react-typescript-webassembly-starter/node_modules/worker-loader",
+  "author": {
+    "name": "webpack Contrib",
+    "url": "https://github.com/webpack-contrib"
+  },
+  "bugs": {
+    "url": "https://github.com/webpack-contrib/schema-utils/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {
+    "ajv": "^6.1.0",
+    "ajv-keywords": "^3.1.0"
+  },
+  "deprecated": false,
+  "description": "webpack Validation Utils",
+  "devDependencies": {
+    "@commitlint/cli": "^7.0.0",
+    "@commitlint/config-conventional": "^7.0.0",
+    "@webpack-contrib/eslint-config-webpack": "^2.0.0",
+    "del-cli": "^1.0.0",
+    "eslint": "^5.0.0",
+    "eslint-plugin-import": "^2.0.0",
+    "eslint-plugin-prettier": "^2.0.0",
+    "jest": "^21.0.0",
+    "prettier": "^1.0.0",
+    "standard-version": "^4.0.0"
+  },
+  "engines": {
+    "node": ">= 4"
+  },
+  "files": [
+    "src"
+  ],
+  "homepage": "https://github.com/webpack-contrib/schema-utils",
+  "license": "MIT",
+  "main": "src/index.js",
+  "name": "schema-utils",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webpack-contrib/schema-utils.git"
+  },
+  "scripts": {
+    "clean": "del-cli coverage",
+    "commits": "commitlint --from $(git rev-list --tags --max-count=1)",
+    "lint": "eslint --cache src test",
+    "release": "npm run commits && standard-version",
+    "test": "jest --env node --verbose --coverage"
+  },
+  "version": "0.4.7"
+}
diff --git a/modules/worker-loader/node_modules/schema-utils/src/ValidationError.js b/modules/worker-loader/node_modules/schema-utils/src/ValidationError.js
new file mode 100644
index 0000000..21264b5
--- /dev/null
+++ b/modules/worker-loader/node_modules/schema-utils/src/ValidationError.js
@@ -0,0 +1,25 @@
+/* eslint-disable
+  strict
+*/
+
+'use strict';
+
+class ValidationError extends Error {
+  constructor(errors, name) {
+    super();
+
+    this.name = 'ValidationError';
+
+    this.message = `${name || ''} Invalid Options\n\n`;
+
+    errors.forEach((err) => {
+      this.message += `options${err.dataPath} ${err.message}\n`;
+    });
+
+    this.errors = errors;
+
+    Error.captureStackTrace(this, this.constructor);
+  }
+}
+
+module.exports = ValidationError;
diff --git a/modules/worker-loader/node_modules/schema-utils/src/index.js b/modules/worker-loader/node_modules/schema-utils/src/index.js
new file mode 100644
index 0000000..13108c2
--- /dev/null
+++ b/modules/worker-loader/node_modules/schema-utils/src/index.js
@@ -0,0 +1,9 @@
+/* eslint-disable
+  strict
+*/
+
+'use strict';
+
+const validateOptions = require('./validateOptions');
+
+module.exports = validateOptions;
diff --git a/modules/worker-loader/node_modules/schema-utils/src/validateOptions.js b/modules/worker-loader/node_modules/schema-utils/src/validateOptions.js
new file mode 100644
index 0000000..f6d9f22
--- /dev/null
+++ b/modules/worker-loader/node_modules/schema-utils/src/validateOptions.js
@@ -0,0 +1,37 @@
+/* eslint-disable
+  strict,
+  no-param-reassign
+*/
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const Ajv = require('ajv');
+const ajvKeywords = require('ajv-keywords');
+
+const ValidationError = require('./ValidationError');
+
+const ajv = new Ajv({
+  allErrors: true,
+  useDefaults: true,
+  errorDataPath: 'property',
+});
+
+ajvKeywords(ajv, ['instanceof', 'typeof']);
+
+const validateOptions = (schema, options, name) => {
+  if (typeof schema === 'string') {
+    schema = fs.readFileSync(path.resolve(schema), 'utf8');
+    schema = JSON.parse(schema);
+  }
+
+  if (!ajv.validate(schema, options)) {
+    throw new ValidationError(ajv.errors, name);
+  }
+
+  return true;
+};
+
+module.exports = validateOptions;
diff --git a/modules/worker-loader/package.json b/modules/worker-loader/package.json
new file mode 100644
index 0000000..6b379b2
--- /dev/null
+++ b/modules/worker-loader/package.json
@@ -0,0 +1,104 @@
+{
+  "_from": "worker-loader@^2.0.0",
+  "_id": "worker-loader@2.0.0",
+  "_inBundle": false,
+  "_integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
+  "_location": "/worker-loader",
+  "_phantomChildren": {
+    "ajv": "6.12.2",
+    "ajv-keywords": "3.4.1"
+  },
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "worker-loader@^2.0.0",
+    "name": "worker-loader",
+    "escapedName": "worker-loader",
+    "rawSpec": "^2.0.0",
+    "saveSpec": null,
+    "fetchSpec": "^2.0.0"
+  },
+  "_requiredBy": [
+    "#DEV:/"
+  ],
+  "_resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
+  "_shasum": "45fda3ef76aca815771a89107399ee4119b430ac",
+  "_spec": "worker-loader@^2.0.0",
+  "_where": "/Users/nick.feng/srv/github-source/react-typescript-webassembly-starter",
+  "author": {
+    "name": "Tobias Koppers @sokra"
+  },
+  "bugs": {
+    "url": "https://github.com/webpack-contrib/worker-loader/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {
+    "loader-utils": "^1.0.0",
+    "schema-utils": "^0.4.0"
+  },
+  "deprecated": false,
+  "description": "worker loader module for webpack",
+  "devDependencies": {
+    "babel-cli": "^6.0.0",
+    "babel-jest": "^21.0.0",
+    "babel-plugin-transform-object-rest-spread": "^6.0.0",
+    "babel-polyfill": "^6.0.0",
+    "babel-preset-env": "^1.0.0",
+    "cross-env": "^5.0.0",
+    "del": "^3.0.0",
+    "del-cli": "^1.0.0",
+    "eslint": "^4.0.0",
+    "eslint-config-webpack": "^1.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "jest": "^21.0.0",
+    "lint-staged": "^4.0.0",
+    "nsp": "^2.6.0",
+    "pre-commit": "^1.0.0",
+    "standard-version": "^4.0.0",
+    "webpack": "^3.0.0",
+    "webpack-defaults": "^1.6.0"
+  },
+  "engines": {
+    "node": ">= 6.9.0 || >= 8.9.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/webpack-contrib/worker-loader",
+  "license": "MIT",
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "main": "dist/cjs.js",
+  "name": "worker-loader",
+  "peerDependencies": {
+    "webpack": "^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0"
+  },
+  "pre-commit": "lint-staged",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webpack-contrib/worker-loader.git"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production babel src -d dist --ignore 'src/**/*.test.js' --copy-files",
+    "ci:coverage": "npm run test:coverage -- --runInBand",
+    "ci:lint": "npm run lint && npm run security",
+    "ci:test": "npm run test -- --runInBand",
+    "clean": "del-cli dist",
+    "defaults": "webpack-defaults",
+    "lint": "eslint --cache src test",
+    "lint-staged": "lint-staged",
+    "prebuild": "npm run clean",
+    "prepare": "npm run build",
+    "release": "standard-version",
+    "security": "nsp check",
+    "start": "npm run build -- -w",
+    "test": "jest",
+    "test:coverage": "jest --collectCoverageFrom='src/**/*.js' --coverage",
+    "test:watch": "jest --watch"
+  },
+  "version": "2.0.0"
+}
diff --git a/package.json b/package.json
index 7df1e92..d30784f 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "typescript": "^3.7.5",
     "wasm-loader": "^1.3.0",
     "worker-loader": "^2.0.0",
-    "workerize-loader": "^1.2.0"
+    "workerize-loader": "^1.2.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
diff --git a/src/index.tsx b/src/index.tsx
index 87d1be5..21e8b17 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,4 +9,4 @@ ReactDOM.render(<App />, document.getElementById('root'));
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// serviceWorker.unregister();
diff --git a/src/layouts/Login/Login.tsx b/src/layouts/Login/Login.tsx
index 2a02ba1..b41d07f 100644
--- a/src/layouts/Login/Login.tsx
+++ b/src/layouts/Login/Login.tsx
@@ -1,22 +1,20 @@
 import React, {
-  FunctionComponent,
-  SyntheticEvent,
-  useEffect,
-  useState
-} from 'react';
+    FunctionComponent,
+    SyntheticEvent,
+    useEffect,
+    useState,
+} from "react";
+import { useHistory } from "react-router-dom";
 import {
-  useHistory
-} from 'react-router-dom';
-import {
-  Avatar,
-  Button,
-  TextField,
-  Paper,
-  Grid,
-  CircularProgress,
-  Typography,
-  Snackbar
-} from '@material-ui/core';
+    Avatar,
+    Button,
+    TextField,
+    Paper,
+    Grid,
+    CircularProgress,
+    Typography,
+    Snackbar,
+} from "@material-ui/core";
 
 /* I tried to work with worker-loader + comlink,
 but the worker-loader doesn't seem to work with wasm-loader
@@ -25,10 +23,11 @@ I also tried to load the WASM module into the main thread
 and then passing it to the Web Worker,
 but it breaks the browser. */
 
-// import { wrap } from 'comlink';
+import { wrap } from "comlink";
 // eslint-disable-next-line import/no-webpack-loader-syntax
 // import qrCodeWorker_Comlink from 'worker-loader!workers/qrCodeWorker_Comlink';
-// import qrCodeWorker_Comlink2 from 'worker-loader!workers/qrCodeWorker_Comlink2';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import * as qrCodeWorker_Comlink from "workers/qrCodeWorker_Comlink2";
 
 /* I've tried workerize-loader + wasm-loader,
 and it works pretty well in the dev mode but once it is compiled,
@@ -36,227 +35,238 @@ the prototype will not be added to the worker
 (suspecting it's a bug in workerize-loader
 because all workerized modules behave the same). */
 // eslint-disable-next-line import/no-webpack-loader-syntax
-import qrCodeWorker_Workerize from 'workerize-loader!workers/qrCodeWorker_Workerize';
+import qrCodeWorker_Workerize from "workers/qrCodeWorker_Workerize";
 
-import useMountedState from 'hooks/useMountedState';
-import CustomSnackbar from 'components/CustomSnackbar/CustomSnackbar';
-import css from './Login.module.css';
-import logo from 'assets/svg/logo.svg';
-import { qrString } from 'config';
+import useMountedState from "hooks/useMountedState";
+import CustomSnackbar from "components/CustomSnackbar/CustomSnackbar";
+import css from "./Login.module.css";
+import logo from "assets/svg/logo.svg";
+import { qrString } from "config";
 
 interface LoginDefaultState {
-  open: boolean;
-  status: string;
-  message: string;
-  loading: boolean;
+    open: boolean;
+    status: string;
+    message: string;
+    loading: boolean;
 }
 
-const Login:FunctionComponent = () => {
-  const defaultState: LoginDefaultState = {
-    open: false,
-    status: 'info',
-    message: '',
-    loading: false
-  };
-  const { state, setState } = useMountedState(defaultState);
-  const [ qrcode, setQRCode ] = useState({
-    __html: ''
-  });
-  const loadQRCode = async () => {
-    /* Comlink method (failed)*/
-    // const instance = new qrCodeWorker_Comlink();
-    // const { generate } = await wrap(instance);
-    // const { qrcode: generateQRCode } = await import('uranus-qrcode');
-    // console.log({
-    //   generateQRCode,
-    //   instance
-    // });
-    // const {
-    //   href,
-    //   qr
-    // } = await generate({
-    //   href: qrString,
-    //   width: 150,
-    //   height: 150,
-    //   qrcode: generateQRCode
-    // });
-    /* Workerize Method (failed after compiling)*/
-    const instance = new qrCodeWorker_Workerize();
-    console.log({
-      instance
-    });
-    const {
-      href,
-      qr
-    } = await instance.getQRCode({
-      href: qrString,
-      width: 150,
-      height: 150
-    })
-    console.log({
-      href,
-      qr
+console.log(qrCodeWorker_Comlink);
+
+// const qrCodeWorker_Workerize_Instance = qrCodeWorker_Workerize();
+const qrCodeWorker_Comlink_Instance = new (qrCodeWorker_Comlink as any)();
+
+const Login: FunctionComponent = () => {
+    const defaultState: LoginDefaultState = {
+        open: false,
+        status: "info",
+        message: "",
+        loading: false,
+    };
+    const { state, setState } = useMountedState(defaultState);
+    const [qrcode, setQRCode] = useState({
+        __html: "",
     });
-    /* Mainthread Method */
-    // const { qrcode } = await import('uranus-qrcode');
-    // const qr = qrcode(qrString, 150, 150);
-    // const href = qrString;
-    /* Set QRcode if href matches qrString
+    const loadQRCode = async () => {
+        /* Comlink method (failed)*/
+        const { generate } = await wrap(qrCodeWorker_Comlink_Instance);
+        // const { qrcode: generateQRCode } = await import('uranus-qrcode');
+        console.log({
+            // generateQRCode,
+            generate,
+        });
+
+        const { href, qr } = await generate({
+            href: qrString,
+            width: 150,
+            height: 150,
+            // qrcode: generateQRCode
+        });
+        /* Workerize Method (failed after compiling)*/
+        // const {
+        //   href,
+        //   qr
+        // } = await qrCodeWorker_Workerize_Instance.getQRCode({
+        //   href: qrString,
+        //   width: 150,
+        //   height: 150
+        // })
+        // console.log({
+        //   href,
+        //   qr
+        // });
+        /* Mainthread Method */
+        // const { qrcode } = await import('uranus-qrcode');
+        // const qr = qrcode(qrString, 150, 150);
+        // const href = qrString;
+        /* Set QRcode if href matches qrString
     (in this case it is always the same
     but not in a real world example) */
-    if (href === qrString) {
-      setQRCode({
-        __html: qr
-      });
-    }
-  };
-  useEffect(() => {
-    loadQRCode();
-  }, []);
-  let submitting: boolean = false;
-  const history = useHistory();
-  const login = async (e: SyntheticEvent): Promise<void> => {
-    e.preventDefault();
-    if (submitting) {
-      setState({
-        open: true,
-        status: 'info',
-        message: 'Logging in...'
-      });
-      return;
-    }
-    submitting = true;
-    setState({
-      loading: true
-    });
-    try {
-      const result: any = await fetch(window.location.href);
-      console.log({ result });
-      setState({
-        open: true,
-        status: 'success',
-        message: 'You\'ve logged in in theory.',
-        loading: false
-      });
-      history.replace(window.location.pathname);
-    } catch(e) {
-      submitting = false;
-      let message: string = e.message || 'Uknown Error';
-      if (e instanceof ProgressEvent)
-        message = 'NetWork Error';
-      setState({
-        open: true,
-        status: 'error',
-        message,
-        loading: false
-      });
-    }
-  };
+        if (href === qrString) {
+            setQRCode({
+                __html: qr,
+            });
+        }
+    };
+    useEffect(() => {
+        loadQRCode();
+    }, []);
+    let submitting: boolean = false;
+    const history = useHistory();
+    const login = async (e: SyntheticEvent): Promise<void> => {
+        e.preventDefault();
+        if (submitting) {
+            setState({
+                open: true,
+                status: "info",
+                message: "Logging in...",
+            });
+            return;
+        }
+        submitting = true;
+        setState({
+            loading: true,
+        });
+        try {
+            const result: any = await fetch(window.location.href);
+            console.log({ result });
+            setState({
+                open: true,
+                status: "success",
+                message: "You've logged in in theory.",
+                loading: false,
+            });
+            history.replace(window.location.pathname);
+        } catch (e) {
+            submitting = false;
+            let message: string = e.message || "Uknown Error";
+            if (e instanceof ProgressEvent) message = "NetWork Error";
+            setState({
+                open: true,
+                status: "error",
+                message,
+                loading: false,
+            });
+        }
+    };
 
-  const handleClose = ():void => {
-    setState({
-      open: false
-    })
-  };
+    const handleClose = (): void => {
+        setState({
+            open: false,
+        });
+    };
 
-  const {
-    innerWidth,
-    innerHeight
-  } = window;
-  const {
-    open,
-    status,
-    message,
-    loading
-  } = state;
+    const { innerWidth, innerHeight } = window;
+    const { open, status, message, loading } = state;
 
-  console.log('Login rendering...', {
-    open,
-    status,
-    message,
-    loading
-  });
+    console.log("Login rendering...", {
+        open,
+        status,
+        message,
+        loading,
+    });
 
-  return (
-    <>
-      <Grid container component="main" className={css.root} style={{
-        backgroundImage: `url(https://cn.bing.com/ImageResolution.aspx?w=${innerWidth}&h=${innerHeight})`
-      }}>
-        <Grid item xs={false} sm={2} md={4} lg={5}/>
-        <Grid item xs={12} sm={8} md={4} lg={2} component={Paper} elevation={6} square style={{
-          opacity: '0.9'
-        }}>
-          <div className={css.paper}>
-            {
-              qrcode.__html
-                ? (
-                  <>
-                    <div dangerouslySetInnerHTML={qrcode} />
-                    <Typography component="h1" variant="h5" className={css.center}>
-                      The QRcode above is generated via WebAssembly
-                    </Typography>
-                  </>
-                )
-                : (
-                  <>
-                    <Avatar className={css.avatar} src={logo} />
-                  </>
-                )
-            }
-            <form className={css.form} onSubmit={login}>
-              <TextField
-                variant="outlined"
-                margin="normal"
-                required
-                fullWidth
-                id="username"
-                label="username"
-                name="username"
-                autoFocus
-              />
-              <TextField
-                variant="outlined"
-                margin="normal"
-                required
-                fullWidth
-                name="password"
-                label="password"
-                type="password"
-                id="password"
-                autoComplete="current-password"
-              />
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                color="primary"
-                className={css.submit}
-                disabled={loading}
-              >
-                {loading && <CircularProgress size={24} className={css.buttonProgress} />}Login
-              </Button>
-            </form>
-          </div>
-        </Grid>
-        <Grid item xs={false} sm={2} md={4} lg={5}/>
-      </Grid>
-      <Snackbar
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        open={open}
-        autoHideDuration={6000}
-        onClose={handleClose}
-      >
-        <CustomSnackbar
-          onClose={handleClose}
-          variant={status}
-          message={message}
-        />
-      </Snackbar>
-    </>
-  );
+    return (
+        <>
+            <Grid
+                container
+                component="main"
+                className={css.root}
+                style={{
+                    backgroundImage: `url(https://cn.bing.com/ImageResolution.aspx?w=${innerWidth}&h=${innerHeight})`,
+                }}
+            >
+                <Grid item xs={false} sm={2} md={4} lg={5} />
+                <Grid
+                    item
+                    xs={12}
+                    sm={8}
+                    md={4}
+                    lg={2}
+                    component={Paper}
+                    elevation={6}
+                    square
+                    style={{
+                        opacity: "0.9",
+                    }}
+                >
+                    <div className={css.paper}>
+                        {qrcode.__html ? (
+                            <>
+                                <div dangerouslySetInnerHTML={qrcode} />
+                                <Typography
+                                    component="h1"
+                                    variant="h5"
+                                    className={css.center}
+                                >
+                                    The QRcode above is generated via
+                                    WebAssembly
+                                </Typography>
+                            </>
+                        ) : (
+                            <>
+                                <Avatar className={css.avatar} src={logo} />
+                            </>
+                        )}
+                        <form className={css.form} onSubmit={login}>
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                id="username"
+                                label="username"
+                                name="username"
+                                autoFocus
+                            />
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="password"
+                                label="password"
+                                type="password"
+                                id="password"
+                                autoComplete="current-password"
+                            />
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                color="primary"
+                                className={css.submit}
+                                disabled={loading}
+                            >
+                                {loading && (
+                                    <CircularProgress
+                                        size={24}
+                                        className={css.buttonProgress}
+                                    />
+                                )}
+                                Login
+                            </Button>
+                        </form>
+                    </div>
+                </Grid>
+                <Grid item xs={false} sm={2} md={4} lg={5} />
+            </Grid>
+            <Snackbar
+                anchorOrigin={{
+                    vertical: "bottom",
+                    horizontal: "right",
+                }}
+                open={open}
+                autoHideDuration={6000}
+                onClose={handleClose}
+            >
+                <CustomSnackbar
+                    onClose={handleClose}
+                    variant={status}
+                    message={message}
+                />
+            </Snackbar>
+        </>
+    );
 };
 
 export default Login;
diff --git a/src/workers/qrCodeWorker_Comlink2.ts b/src/workers/qrCodeWorker_Comlink2.js
similarity index 92%
rename from src/workers/qrCodeWorker_Comlink2.ts
rename to src/workers/qrCodeWorker_Comlink2.js
index 8925f44..2ad8bab 100644
--- a/src/workers/qrCodeWorker_Comlink2.ts
+++ b/src/workers/qrCodeWorker_Comlink2.js
@@ -5,11 +5,12 @@ expose({
     href,
     width,
     height
-  }: any) => {
+  }) => {
     const { qrcode } = await import('uranus-qrcode');
+
     return {
       href,
       qr: qrcode(href, width, height)
     };
   }
-});
\ No newline at end of file
+});
diff --git a/src/workers/qrCodeWorker_Workerize.js b/src/workers/qrCodeWorker_Workerize.js
index 99701a9..81111c4 100644
--- a/src/workers/qrCodeWorker_Workerize.js
+++ b/src/workers/qrCodeWorker_Workerize.js
@@ -8,4 +8,6 @@ export const getQRCode = async ({
     href,
     qr: qrcode(href, width, height)
   };
-};
\ No newline at end of file
+};
+
+export default function () { }
\ No newline at end of file