Problems Solution

About this page

danger

Work in progress: For a while, this is a suggestion to deal with specificities that is appering.

In this page are the commons problems that you can face when using the SDK and how to solve them.

If your problem haven't listed here or if you need another kind of answer, we provide the following option:

• If you already are a partner, you also can contact us through the Central de Ajuda;

Specifics by Framework

Angular

If you are using angular, some settings in your project may be necessary. The lib is in javascript and not in typescript and this generates warnings and problems in use.

To solve the above issues, add the following code to your package.json file:

package.json

{
  "browser": {
    "crypto": false,
    "fs": false
  }
}

SCREENSHOTS

The following configuration is also required since angular does not support the use of libs in CommonJS or AMD. Therefore, add the following code in your angular.json file in the object hierarchy json projects > yourprojectname > architect > build > options:

angular.json

"allowedCommonJsDependencies": [
  "unico-webframe"
]

Angular 12 >=

Install the 'util' module

npm install util

Add the module path 'util' in paths in the tsconfig.json file

{
…
"compilerOptions": {
  …
  "paths": {
    "util": ["./node_modules/util"]
   }
},
…
}

Also add the 'util' module in allowedCommonJsDependencies in the build block inside angular.json file

angular.json

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "allowedCommonJsDependencies": [
      “unico-webframe”, “util”
    ]   
...
  }
...
},

Next.js

If you are using Next.js to develop your application, follow these guidelines:

Unlike other frameworks, in Next.js if you try to access an object in the scope of the browser (eg navigator) outside of lifecycle methods like componentDidMount() or useEffect() an error is generated.

To fix the error, import the SDK components as follows:

useEffect(() => {
  (async () => {
    const {
      UnicoCheckBuilder,
      UnicoThemeBuilder,
      SelfieCameraTypes,
      DocumentCameraTypes
    } = await import('unico-webframe');
  })();
}, []);

If you are using TypeScript in your project, follow the guidelines in Declaração de tipos para uso em TypeScript. Typings can be imported above your component along with other imports. Example:

import ...
import ...
import ...
import ...

import { UnicoTheme, MainView, SuccessPictureResponse } from "unico-webframe";

React com react-scripts 5

If you are using create-react-app version 5 to develop your application, the following steps are required.

Install the 'util' module

If your project uses npm:

npm install util

If your project uses yarn:

yarn add util

f you are using TypeScript in your project, follow the guidelines for declaring types for use in TypeScript, available in this guide.

Webpack v5

he react-scripts 5 use Webpack v5, so, some warnings can happen, as Webpack v5 does not understand very well the use of Node modules.