Error TS2440: The import statement clashes with a locally declared variable named 'ProtractorPlugin'

Hello there! I am currently attempting to execute a basic Protractor test (still learning Protractor) and running into an error consistently. Provided below is my package.json file:

"devDependencies": {
    "@angular-devkit/build-angular": "~0.803.8",
    "@angular/cli": "~8.3.8",
    "@angular/compiler-cli": "~8.2.9",
    "@angular/language-service": "~8.2.9",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "12.12.7",
    "codelyzer": "^5.0.0",
    "husky": "^3.0.9",
    "jasmine-core": "~3.4.0",
    "jasmine-reporters": "^2.3.2",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "karma-junit-reporter": "^2.0.1",
    "protractor": "~5.4.0",
    "puppeteer": "^2.0.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.15.0",
    "typescript": "~3.6.4"
  }

Answer №1

After digging into the problem, I discovered that the root cause was an incorrect import statement in one of my components.

Here's where I went wrong:

import { EventEmitter } from 'protractor';

Instead of the correct import statement:

import { EventEmitter } from '@angular/core';

Answer №3

If you wish to avoid downgrading, you can resolve the import in this manner for protractor version 5.4.2:

import { ElementHelper, ProtractorBrowser } from './browser';
import { ElementArrayFinder, ElementFinder } from './element';
import { ProtractorExpectedConditions } from './expectedConditions';
import { ProtractorBy } from './locators';
import { Ptor } from './ptor';
export { ActionSequence, Browser, Builder, Button, Capabilities, Capability, error, EventEmitter, FileDetector, Key, logging, promise, Session, until, WebDriver, WebElement, WebElementPromise } from 'selenium-webdriver';
export { ElementHelper, ProtractorBrowser } from './browser';
export { Config } from './config';
export { ElementArrayFinder, ElementFinder } from './element';
export { ProtractorExpectedConditions } from './expectedConditions';
export { Locator, ProtractorBy } from './locators';
export { PluginConfig, ProtractorPlugin } from './plugins';
export { Ptor } from './ptor';
export { Runner } from './runner';
export declare let utils: {
    firefox: any;
    http: any;
    remote: any;
};
export declare let Command: any;
export declare let CommandName: any;
export declare let protractor: Ptor;
export declare let browser: ProtractorBrowser;
export declare let $: (search: string) => ElementFinder;
export declare let $$: (search: string) => ElementArrayFinder;
export declare let element: ElementHelper;
export declare let By: ProtractorBy;
export declare let by: ProtractorBy;
export declare let ExpectedConditions: ProtractorExpectedConditions;

The issue here is a duplicate import that needs to be removed. Below is the patch to address it:

diff -r d5e827235972 yf/src/myapp/node_modules/protractor/built/index.d.ts
--- a/yf/src/myapp/node_modules/protractor/built/index.d.ts Sun Jan 19 20:49:39 2020 +0100
+++ b/yf/src/myapp/node_modules/protractor/built/index.d.ts Sun Jan 19 21:13:41 2020 +0100
@@ -2,7 +2,6 @@
 import { ElementArrayFinder, ElementFinder } from './element';
 import { ProtractorExpectedConditions } from './expectedConditions';
 import { ProtractorBy } from './locators';
-import { PluginConfig, ProtractorPlugin } from './plugins';
 import { Ptor } from './ptor';
 export { ActionSequence, Browser, Builder, Button, Capabilities, Capability, error, EventEmitter, FileDetector, Key, logging, promise, Session, until, WebDriver, WebElement, WebElementPromise } from 'selenium-webdriver';
 export { ElementHelper, ProtractorBrowser } from './browser';
@@ -10,10 +9,9 @@
 export { ElementArrayFinder, ElementFinder } from './element';
 export { ProtractorExpectedConditions } from './expectedConditions';
 export { Locator, ProtractorBy } from './locators';
+export { PluginConfig, ProtractorPlugin } from './plugins';
 export { Ptor } from './ptor';
 export { Runner } from './runner';
-export declare type PluginConfig = PluginConfig;
-export declare type ProtractorPlugin = ProtractorPlugin;
 export declare let utils: {
     firefox: any;
     http: any;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to establish a connection between Firebase Storage and HTML using TypeScript without Angular or React in IntelliJ?

My project goal is to create a functional login and register page using TypeScript. Currently, my code operates without a database, but I aim to implement Firebase for registering user credentials for easy login. I have only come across tutorials using F ...

The lack of change detection triggering in Angular 8's UI observables could be due to the default setting of ChangeDetection

I am facing a situation where I have a container component with a service injected into it. The service holds an observable, and I am binding this observable to a child component's input property in the container component's template using an asy ...

Storage in Ionic and variable management

Hello, I'm struggling to assign the returned value from a promise to an external variable. Despite several attempts, I have not been successful. export class TestPage { test:any; constructor(private storage: Storage) { storage.get('t ...

Steps to resolve the error "The value for '--target' option should be one of the following: 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es201', 'esnext'."

I recently cloned an Angular application and encountered an error related to the "target" property in the tsconfig.json file within Visual Studio 2019. My Angular version is v16.1.4, with Typescript v5.1.6. I've attempted to resolve this issue by upda ...

Error encountered in Angular 6 due to an undefined global variable in browser-crypto.js

Currently, I am working on implementing socketjs and have run into an error. https://i.sstatic.net/VRbDT.png The packages I am using for socket and stomp are listed below: import * as SockJS from 'sockjs-client'; import * as Stomp from 's ...

Tips for correctly implementing an authorize function in TypeScript with NextAuth.js

Trying to implement the Credentials Provider in NextJs ("next": "^12.0.7") and NextAuth ("next-auth": "^4.1.2") using TypeScript has been a challenge. I am encountering difficulties in getting the function to work co ...

Guide on setting up an AWS code pipeline for Elastic Beanstalk deployment on ASP.NET Core 5.0 with Angular

I am facing a challenge with deploying my ASP.NET Core 5.0 application with Angular to the EBS Windows environment using AWS CodePipeline (CI / CD). Despite searching various internet resources for solutions, I have not been able to find much help. My att ...

Angular 8 allows for dynamic updates as users provide input and make selections with check marks

When using Angular 8, if a user inputs "$10" and then clicks on it (using the OnClick event), the box below should be updated with the user input and the entire box should be selected like the example shown in the picture. I would greatly appreciate any t ...

One method for identifying which observable has been altered in Observable.merge is by examining the output of

Here is a simplified and clear version of my code: connect(): Observable<Customer[]> { const displayDataChanges = [ this._customerDatabase.dataChange, this._filterChange, this._sort.mdSortChange, this._paginator.page ]; ...

The subscription for the second Observable in RxJS concatMap is triggered individually

I am currently developing an Angular 6 application. I want the app to display a loading animation whenever there is a change in the route or if there are any pending HTTP requests. To achieve this, I have set up two Observables as follows: For httpPendingR ...

Combining conditions and CSS classes within the ngClass directive in Angular

Is it possible to combine a condition and a class within the same "ngClass" in Angular? [ngClass]="{cssclass1 : object.cssclass1status , object.cssclass2}" The condition (bold) and CSS class (italic) can be used together. Previously, I have implemented t ...

Is implementing client components in Server Side pages an effective strategy for optimizing SSR performance?

In order to overcome the challenge of using client-side components in server-side pages, I made the decision to create a client-side wrapper to encapsulate these components within server-side pages. This way, I can manage all API calls and data fetching on ...

AngularJS: Utilizing services to make API requests and retrieve JSON data

I am struggling to pass a value from an input field on the view using a service. The service is supposed to call my WebAPI2 and then receive a valid JSON as a response. Unfortunately, I keep getting a promise object that I cannot resolve (even with ".then ...

Exploring the idea of nesting Angular components with dynamic data

I am attempting to create a nested structure using multiple components in the following way. My objective is to pass user data into the user-item component without directly including the item component inside the list component. Main-App <app-user-li ...

Angular 2 Introductory Guide - where to find the necessary files

I recently began diving into Angular 2 and I am in the learning process. However, I encountered an issue after running the command: npm install -g angular-cli. The problem is that I cannot locate the following folder on my hard drive: src/app / ./src/app/a ...

Error 404: Webpack Dev Server Proxy Not Found

Recently, I joined a new team where I am tasked with getting familiar with the project code as a freshman. The project is built using Angular2 and Spring Boot, along with Webpack for bundling assets and proxy settings through Webpack Dev Server to connect ...

What is the process for including the 'Access-Control-Allow-Origin' header in all responses?

Exploring the world of web development, I have started learning play framework for my backend using play 2.8.x framework and for frontend development, I am utilizing angular 8. However, I have encountered an issue while trying to retrieve a response from t ...

Leveraging WebStorm's TypeScript support in conjunction with node_modules

Attempting to set up a TypeScript project in WebStorm to import a Node.js module has been a struggle. I made sure to download the necessary TypeScript definition in settings and specified --module commonjs in the compiler settings. However, I keep running ...

Troubleshooting issue with loading local json files in Ionic 3 on Android device

Recently, I've been exploring the process of loading a local JSON data file in my project. I have stored my .json files in the /src/assets/data directory and here is the provider code snippet that I am utilizing: import { Injectable } from '@ang ...

Encounter the error message "Unable to resolve all parameters" after including the Interceptor

Currently, I am in the process of implementing HttpInterceptor functionality. However, upon adding it to @NgModule, I encountered the following error message in Chrome: Uncaught Error: Can't resolve all parameters for JwtInterceptor: (?, ?). at s ...