search

PeculiarVentures / fortify

Fortify enables web applications to use smart cards, local certificate stores and do certificate enrollment. This is the desktop application repository.
https://fortifyapp.com
Other
114 stars 32 forks source link

How to migrate to `fortify-webcomponents` 2.3.2 #503

Closed KINFOO closed 2 years ago

KINFOO commented 2 years ago

Hi

Context

I am using @peculiar/fortify-webcomponents-react I can render PeculiarFortifyCertificates using version 0.2.38

Versions

$ npm list react  
client@0.1.0 /client
├─┬ @fortawesome/react-fontawesome@0.1.17
│ └── react@17.0.2 deduped
├─┬ @material-ui/core@4.12.3
│ ├─┬ @material-ui/styles@4.11.4
│ │ └── react@17.0.2 deduped invalid: "^16.13.1" from node_modules/@peculiar/fortify-webcomponents-react

Problem

I am unable to render PeculiarFortifyCertificates using version 2.3.1 ( I read documentation )

What am I doing wrong ?

Details

Code for 0.2.38

import { PeculiarFortifyCertificates } from '@peculiar/fortify-webcomponents-react';

const OperationsAuthorizeContainer = () => {
  const handleContinue = () => {
    // Happy
  };

  return (
    <PeculiarFortifyCertificates
      hide-footer
      language="en"
      filters={{ onlySmartcards: true, onlyWithPrivateKey: true, keyUsage: ['digitalSignature'] }}
      onContinue={handleContinue}
      onCancel={() => alert('Very well, but cancel what?')}
    />
  );
};

export default OperationsAuthorizeContainer;

✨ It renders ✨

Code for 2.3.1

import { PeculiarFortifyCertificates } from '@peculiar/fortify-webcomponents-react';

const OperationsAuthorizeContainer = () => {
  const handleSelectionSuccess = () => {
    // Not Happy
  };

  return (
    <PeculiarFortifyCertificates
      hide-footer
      filters={{ onlySmartcards: true, onlyWithPrivateKey: true, keyUsage: ['digitalSignature'] }}
      onSelectionSuccess={handleSelectionSuccess}
      onSelectionCancel={() => alert('Very well, but cancel what?')}
    />
  );
};

export default OperationsAuthorizeContainer;

😒 It does not render 😒

Stack trace

In the console I have

TypeError: calling a builtin Map constructor without new is forbidden
    CryptoProvider fortify_api-8516610a.js:1935
    node_modules vendors-node_modules_peculiar_fortify-webcomponents_dist_esm-es5_fortify_api-8516610a_js.chunk.js:2561
    Webpack 60
        __webpack_require__
        fn
        node_modules
        __webpack_require__
        fn
        node_modules
        promise callback*webpackAsyncContext
        loadModule
        node_modules
        step
        node_modules
        node_modules
        node_modules
        initializeComponent
        node_modules
        promise callback*nextTick
        connectedCallback
        node_modules
        jmp
        node_modules
        appendChild
        insertOrAppendPlacementNode
        insertOrAppendPlacementNode
        insertOrAppendPlacementNode
        insertOrAppendPlacementNode
        commitPlacement
        commitMutationEffects
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        commitRootImpl
        unstable_runWithPriority
        runWithPriority$1
        commitRoot
        performSyncWorkOnRoot
        flushSyncCallbackQueueImpl
        unstable_runWithPriority
        runWithPriority$1
        flushSyncCallbackQueueImpl
        workLoop
        flushWork
        performWorkUntilDeadline
        js
        js
        __webpack_require__
        fn
        js
        __webpack_require__
        fn
        js
        js
        __webpack_require__
        fn
        js
        __webpack_require__
        fn
        tsx
        __webpack_require__
        <anonymous>
        <anonymous>
index-7910a682.js:1751

and also

Uncaught (in promise) TypeError: can't access property "isProxied", Cstr is undefined
    node_modules vendors-node_modules_peculiar_fortify-webcomponents-react_dist_esm_index_js.chunk.js:2312
    step index-7910a682.js:45
    node_modules vendors-node_modules_peculiar_fortify-webcomponents-react_dist_esm_index_js.chunk.js:457
    fulfilled index-7910a682.js:17
    promise callback*step index-7910a682.js:19
    node_modules vendors-node_modules_peculiar_fortify-webcomponents-react_dist_esm_index_js.chunk.js:429
    node_modules vendors-node_modules_peculiar_fortify-webcomponents-react_dist_esm_index_js.chunk.js:408
    initializeComponent index-7910a682.js:1437
    node_modules vendors-node_modules_peculiar_fortify-webcomponents-react_dist_esm_index_js.chunk.js:2482
    promise callback*nextTick index-7910a682.js:1844
    connectedCallback index-7910a682.js:1573
    node_modules vendors-node_modules_peculiar_fortify-webcomponents-react_dist_esm_index_js.chunk.js:2635
    jmp index-7910a682.js:73
    node_modules vendors-node_modules_peculiar_fortify-webcomponents-react_dist_esm_index_js.chunk.js:2634
    React 11
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 2
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:645
    Webpack 16
        __webpack_require__
        fn
        js
        __webpack_require__
        fn
        js
        js
        __webpack_require__
        fn
        js
        __webpack_require__
        fn
        tsx
        __webpack_require__
        <anonymous>
        <anonymous>
index-7910a682.js:1457
donskov commented 2 years ago

@KINFOO Thanks. I will investigate.

donskov commented 2 years ago

Thanks @microshine for quick changes. @KINFOO Please try the 2.3.2 version.

KINFOO commented 2 years ago

Hi,

Upgrading to 2.3.2 using 

$ rm -fr node_modules
$ yarn add @peculiar/fortify-webcomponents-react@2.3.2
$ yarn

Running application, unfortunately I get:

Failed to compile.

SyntaxError: /client/node_modules/@peculiar/fortify-webcomponents/dist/esm-es5/fortify_api-c262da91.js: Identifier '__awaiter' has already been declared. (1390:9)
  1388 | PERFORMANCE OF THIS SOFTWARE.
  1389 | ***************************************************************************** */
> 1390 | function __awaiter(thisArg, _arguments, P, generator) {
       |          ^
  1391 |     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  1392 |     return new (P || (P = Promise))(function (resolve, reject) {
  1393 |         function fulfilled(value) { try {
assets by path static/js/*.js 9.03 MiB
  assets by chunk 5.24 MiB (id hint: vendors)
    asset static/js/vendors-node_modules_date-io_moment_build_index_esm_js-node_modules_fortawesome_free-solid-sv-a5267b.chunk.js 3.72 MiB [emitted] (id hint: vendors) 1 related asset
    asset static/js/vendors-node_modules_peculiar_fortify-webcomponents_dist_esm-es5_certification_request-1ab6cf4c_js.chunk.js 305 KiB [emitted] (id hint: vendors) 1 related asset
    + 23 assets
  + 100 assets
assets by path static/media/*.svg 121 KiB
  assets by info 62.8 KiB [immutable] 58 assets
  assets by chunk 25.9 KiB (auxiliary name: main)
    asset static/media/sw-wave.222b0b8418baf5caa3999f704b892611.svg 5.61 KiB [emitted] (auxiliary name: main)
    + 17 assets
  + 38 assets
asset asset-manifest.json 38.3 KiB [emitted]
asset index.html 1.82 KiB [emitted]
orphan modules 3.78 MiB [orphan] 6044 modules
runtime modules 30.6 KiB 16 modules
built modules 7.29 MiB (javascript) 62.8 KiB (asset) [built]
  modules by path ./node_modules/ 6.8 MiB 969 modules
  modules by path ./src/ 506 KiB (javascript) 62.8 KiB (asset)
    javascript modules 491 KiB
      cacheable modules 491 KiB 168 modules
      ./src/Img/ lazy ^\.\/.*$ namespace object 160 bytes [built] [code generated]
      ./src/Img/Components/ lazy ^\.\/.*$ namespace object 160 bytes [built] [code generated]
    asset modules 14.8 KiB (javascript) 62.8 KiB (asset)
      modules by path ./src/Img/*.svg 2.38 KiB (javascript) 62.8 KiB (asset) 58 modules
      modules by path ./src/Img/*.png 12.4 KiB
        ./src/Img/warning_generic.png 10.4 KiB [built] [code generated]
        ./src/Img/userAvatar.png 2.08 KiB [optional] [built] [code generated]
  ./util.inspect (ignored) 15 bytes [built] [code generated]

WARNING in src/Utils/routes.tsx
  Line 84:1:  Assign array to a variable before exporting as module default  import/no-anonymous-default-export

ERROR in ./node_modules/@peculiar/fortify-webcomponents/dist/esm-es5/fortify_api-c262da91.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /client/node_modules/@peculiar/fortify-webcomponents/dist/esm-es5/fortify_api-c262da91.js: Identifier '__awaiter' has already been declared. (1390:9)

  1388 | PERFORMANCE OF THIS SOFTWARE.
  1389 | ***************************************************************************** */
> 1390 | function __awaiter(thisArg, _arguments, P, generator) {
       |          ^
  1391 |     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  1392 |     return new (P || (P = Promise))(function (resolve, reject) {
  1393 |         function fulfilled(value) { try {
    at Parser._raise (/client/node_modules/@babel/parser/lib/index.js:476:17)
    at Parser.raiseWithData (/client/node_modules/@babel/parser/lib/index.js:469:17)
    at Parser.raise (/client/node_modules/@babel/parser/lib/index.js:430:17)
    at ScopeHandler.checkRedeclarationInScope (/client/node_modules/@babel/parser/lib/index.js:1720:12)
    at ScopeHandler.declareName (/client/node_modules/@babel/parser/lib/index.js:1686:12)
    at Parser.registerFunctionStatementId (/client/node_modules/@babel/parser/lib/index.js:14910:16)
    at Parser.parseFunction (/client/node_modules/@babel/parser/lib/index.js:14890:12)
    at Parser.parseFunctionStatement (/client/node_modules/@babel/parser/lib/index.js:14495:17)
    at Parser.parseStatementContent (/client/node_modules/@babel/parser/lib/index.js:14157:21)
    at Parser.parseStatement (/client/node_modules/@babel/parser/lib/index.js:14113:17)
 @ ./node_modules/@peculiar/fortify-webcomponents/dist/esm-es5/peculiar-fortify-enrollment.entry.js 145:0-130 155:27-43 158:12-30 161:12-34 164:12-25 168:12-24 171:12-23 182:24-51 187:24-46 342:25-29 346:39-55 346:62-78 348:35-51 417:47-57
 @ ./node_modules/@peculiar/fortify-webcomponents/dist/esm-es5/ lazy ^\.\/.*\.entry\.js$ include: \.entry\.js$ exclude: \.system\.entry\.js$ namespace object ./peculiar-fortify-enrollment.entry.js
 @ ./node_modules/@peculiar/fortify-webcomponents/dist/esm-es5/index-7910a682.js 2365:9-2371:37
 @ ./node_modules/@peculiar/fortify-webcomponents/dist/esm-es5/loader.mjs 1:0-57 7:11-24
 @ ./node_modules/@peculiar/fortify-webcomponents/loader/index.mjs 16:0-43 16:0-43
 @ ./node_modules/@peculiar/fortify-webcomponents-react/dist/esm/index.js 8:0-94 12:2-16 12:30-50
 @ ./src/Components/authorize/operationsAuthorizeContainer.tsx 2:0-84 9:30-57
 @ ./src/App.tsx 22:51-110
 @ ./src/index.tsx 4:0-24 9:33-36

Many thanks for addressing this so fast

donskov commented 2 years ago

@KINFOO I use the codesanbox and CRA template to test the component. All works as expected.

Could you share more context about it?

KINFOO commented 2 years ago

Hi @donskov

I haven't been able to reproduce using codesanbox

But with this code, provided with package.json & yarn.lock: I am able to reproduce. ( It also fail using npm )

Tell me if you manage to reproduce

donskov commented 2 years ago

@KINFOO Could you please create a repo to test your case?

KINFOO commented 2 years ago

Yes and you're now collaborator at https://github.com/KINFOO/fortify_2.3.2

donskov commented 2 years ago

@KINFOO Looks like it was the problem in our builder. Try to use the 3.0.0 version. I needed to upgrade to a major version as the output files have changed a bit.

KINFOO commented 2 years ago

My good sir,

It works like a charm

donskov commented 2 years ago

@KINFOO Thank you for the report. Although it's weird. We also use these components at home, but apparently, everything depends on the bundler.