PESDK/Web

Angular - ReferenceError x is not defined

The ReferenceError: x is not defined error message will appear if you use the optimization option in the angular.json. The additional uglification of the Angular build system will break the namespace imports inside the photoeditorsdk package which causes the error.

These are the possible solutions to fix this issue:

Lower the target in the tsconfig.json to es5.#

We found that decreasing the Typescript target is the easiest and least intrusive way to fix this issue.

tsconfig.json


{
  "compilerOptions": {
    "target": "es5"
  }
}

Disable the optimization in the angular.json.#

Disabling the optimization during the build process is another way of preventing this issue.

angular.json


{
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "optimization": false
        }
      }
    }
  }
}

Copy the dependencies#

Copy the PE.SDK and the required dependencies to the build output.

angular.json


{
  "architect": {
    "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/assets",
          {
            "glob": "**/*",
            "input": "node_modules/photoeditorsdk/umd/",
            "output": "photoeditorsdk"
          },
          {
            "glob": "**/*",
            "input": "node_modules/react/umd/",
            "output": "react"
          },
          {
            "glob": "**/*",
            "input": "node_modules/react-dom/umd/",
            "output": "react-dom"
          },
          {
            "glob": "**/*",
            "input": "node_modules/react-dom/umd/",
            "output": "react-dom"
          },
          {
            "glob": "**/*",
            "input": "node_modules/styled-components/dist/",
            "output": "./styled-components"
          }
        ]
      }
    }
  }
}

Import the dependencies in the index.html like you would do for a Vanilla JS project

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angular</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+   <script src="./react/react.production.min.js"></script>
+   <script src="./react-dom/react-dom.production.min.js"></script>
+   <script src="./react-dom/react-dom-server.browser.production.min.js"></script>
+   <script src="./styled-components/styled-components.min.js"></script>
+   <script src="./photoeditorsdk/no-polyfills.js"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Declare the global PhotoEditorSDK and use it in the integration

photo-editor.component.ts

import {
  Component,
  AfterViewInit,
  ViewChild,
  Input,
  ElementRef,
} from '@angular/core';

+ declare const PhotoEditorSDK: any;
const license = '';

@Component({
  selector: 'app-photo-editor',
  templateUrl: './photo-editor.component.html',
})
export class PhotoEditorComponent implements AfterViewInit {
  @Input()
  public src: string = '';
  @ViewChild('psdkContainer', { static: false })
  private container: ElementRef<HTMLDivElement> | null = null;
  public editor: any | null = null;
  ngAfterViewInit() {
    this.initEditor();
  }
  async initEditor() {
    try {
      if (this.editor) {
        this.editor.dispose();
      }
-      this.editor = await PhotoEditorSDKUI.init({
+      this.editor = await PhotoEditorSDK.PhotoEditorSDKUI.init({
        license,
        container: this.container ? this.container.nativeElement : '',
        image: this.src,
        assetBaseUrl: '/assets/photoeditorsdk',
      });
    } catch (error) {
      console.log(error);
    }
  }
}

Use the photoeditorsdk package through a CDN instead of npm.#

You can include the following snippet to your index.html and check out our Vanilla JS guide on how to use the UMD version of the editor.

index.html

HTML


<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-is@17.0.2/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom-server.min.js"></script>
<script src="https://unpkg.com/styled-components@5.2.3/dist/styled-components.js"></script>
<script src="https://cdn.img.ly/packages/imgly/photoeditorsdk/latest/umd/index.js"></script>