Error message: Duplicate identifier found in Typescript

Encountering an error while trying to run my angular-meteor client (ionic serve), specifically:

[00:29:20]  typescript: node_modules/meteor-typings/1.3/main.d.ts, line: 657 
            Duplicate identifier 'Status'. 

     L657:    type Status = 'connected' | 'connecting' | 'failed' | 'waiting' | 'offline';

[00:29:20]  typescript: node_modules/meteor-typings/1.3/main.d.ts, line: 695 
            Duplicate identifier 'Status'. 

     L695:      type Status = 'connected' | 'connecting' | 'failed' | 'waiting' | 'offline';

[00:29:20]  transpile failed

The error message within the source code file reads: 

TS2300:Duplicate identifier 'Status'
.

This project was constructed following the steps outlined in this tutorial: Most of the files used can be found here: https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp

Ionic Framework: 2.1.0
Ionic Native: 2.4.1
Ionic App Scripts: 1.1.3
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.3.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

You can review all relevant files in the codebase here.

Seeking advice on what might be causing this issue and where to investigate further. Despite reverting to previous code versions and reinstalling project requirements by removing node_modules, the same error persists without any obvious changes.

Appreciative of any suggestions or insights that could be offered.

meteortypescriptangular-meteor

Answer №1

My tsconfig file originally included the following:

"types": [
  "meteor-typings",
  "@types/underscore"
]

After removing 'meteor-typings', everything started functioning properly!

"types": [
  "@types/underscore"
]

In the package.json file, I had the following dependencies listed:

  "devDependencies": {
    "@ionic/app-scripts": "1.1.3",
    "@types/meteor": "^1.3.32",
    "@types/underscore": "^1.7.36",
    "meteor-typings": "^1.3.1",
    "tmp": "0.0.31",
    "typescript": "2.0.9",
    "typescript-extends": "^1.0.1"
  },

I believe that 'meteor-typings' was already being transpiled, causing duplication when specified in the tsconfig file. (This is just my speculation as to why) :)

Answer №2

Just wanted to share that I encountered this issue after upgrading Ionic from version 2.0.0 to 2.2.0.

The solution that worked for me was removing "meteor-typings" from the tsconfig.json file following the tutorial:

"types": [
  "@types/underscore",
  "@types/meteor-accounts-phone",
  "@types/meteor-collection-hooks"
]

Strangely enough, removing just that one type fixed the problem. It's a bit strange but it did the trick for me.

This potentially indicates that the tutorial may need an update, especially for those who are using the latest version of Ionic. I plan on raising this as an issue in their github repository soon.

Answer №3

To clarify further: In the api/tsconfig.json file, make sure to keep the "meteor-typings" in types[] as it is. However, in the root folder, remove any extra "meteor-typings" from types[], and then the program should run smoothly without any errors. Also, don't forget to create a softlink to node_modules inside the api folder.

For Windows users, you can do this by using the following command:

mklink /d \node_modules ..\node_modules

It's important to note that there should not be a package.json file inside the api folder, as explained in the tutorial.

Thank you for providing the solution!

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

Having trouble choosing the component-button using Protractor

I'm having trouble selecting the "Add New" button using any locator component. Check out the audience.po.ts file and the method "ClickAddNewBtn()": clickAddNewBtn() { console.log("Clicking on the Add New button."); return element(by.cs ...

javascriptangulartypescriptprotractor

The term 'App' is being referenced as a value when it is intended to be a type. Perhaps you meant 'typeof App'?

I am eager to master Typescript with React through hands-on experience, so I recently made the manual transition from JavaScript to TypeScript in my create-react-app. However, when working with my default testing file App.test.ts: import { render, screen ...

reactjstypescript

Struggling to implement a singleton service in Angular as per the documentation provided

I have implemented a service in Angular that I want to be a singleton. Following the guidelines provided in the official documentation, I have set the providedIn property to "root" as shown below: @Injectable({ providedIn: "root" }) export class SecuritySe ...

angulartypescriptdependency-injectionsingletonangular8

Unable to implement multiple draggable inner objects using Angular 5 and dragula library

After struggling for the past few days, I can't seem to get it to work... Here is a brief explanation of my issue: In this example, I have an array of objects structured like this: public containers: Array<object> = [ { "name": "contain ...

javascriptangulartypescriptdragulang2-dragula

Angular Http Promise is not returning the expected value

Struggling to update my component property with an HTTP result, but encountering issues. Thank you for your assistance! (currently using a static mock object) Class - Object export class Gallery { name: string; } Service import { Injectable } from ...

angularhttptypescriptundefined

The property slider in the d3 slider package is not found in the type 'types of d3'

I attempted to integrate a d3 slider into my d3 chart in Angular 2. I installed the d3slider package using the command: npm install --save @types/d3.slider. However, when trying to access the method "d3.slider()", an error occurred stating that "property ...

typescriptd3.jsnpmnpm-installc3.js

Troubleshooting Angular 5: Interceptor Fails to Intercept Requests

I have a valid JWT token stored in local storage and an interceptor that I borrowed from a tutorial. However, the interceptor is not intercepting requests and adding headers as expected. Here's where I am making a request: https://github.com/Marred/ ...

javascriptangulartypescriptangular-http-interceptors

Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material. Here is my shared component pfa-share-error: <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)"> Required </mat-err ...

javascriptangulartypescriptangular-material

Encountering an issue while trying to load a file from an API due to difficulties in parsing it to

When trying to load an xlsx file from an API, I encountered an error because Angular automatically tries to parse the body as JSON. To resolve this issue, I found that specifying the response type directly in the request works: this.http.get(this.url + " ...

angulartypescript

Creating an Object Type from a String Union Type in TypeScript

How can I go about implementing this? type ActionNames = 'init' | 'reset'; type UnionToObj<U> = {/* SOLUTION NEEDED HERE */} type Result = UnionToObj<ActionNames>; // Expected type for Result: `{ init: any, reset: any }` ...

typescriptgenericscovarianceunion-types

Can you explain the contrast between the @HostBinding() directive and ElementRef/Renderer in Angular?

I'm currently in the process of developing a directive for a dropdown toggle feature. Through my research, I have come across two different approaches to implement this directive. Which method would be considered the most effective practice? Approach ...

angulartypescriptangular-directive

The functionality of the Ionic 4 app differs from that of an Electron app

I've encountered an issue with my Ionic 4 capacitor app. While it functions properly on Android studio, I'm having trouble getting it to work on Electron. Any ideas on how to resolve this? Here are the steps I took to convert it to Electron: np ...

angulartypescriptelectronionic4

Angular - Showing validation messages post successful execution of two functions

I have encountered an issue with my form submission process involving two functions. When both functions succeed, I want to display a successful validation message. However, currently the success message is displayed even if the second function fails. How ...

angulartypescript

Creating a structure within a stencil web component

In my current project, I am utilizing Stencil.js (typescript) and need to integrate this selectbox. Below is the code snippet: import { Component, h, JSX, Prop, Element } from '@stencil/core'; import Selectr from 'mobius1-selectr'; @ ...

javascripttypescriptimportstenciljs

Inquiring about Vue 3 with TypeScript and Enhancing Types for Compatibility with Plugins

I've been struggling to find a working example of how to implement type augmentation with Vue3 and TypeScript. I have searched for hours without success, trying to adapt the Vue2 documentation for Vue3. It appears that the Vue object in the vue-class ...

typescriptvue.jsvuejs3

How to implement an Angular Animation that is customizable with an @Input() parameter?

Have you ever wondered if it's possible to integrate custom parameters into an Angular animation by passing them through a function, and then proceed to use the resulting animation in a component? To exemplify this concept, consider this demo where t ...

javascriptangulartypescriptanimationangular-animations

Refactor the fat arrow function in Typescript to maintain the bare function signature verification

When using AOT in Angular, it is necessary to rewrite all functions and reducers to not utilize arrow functions: An error occurred: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function o ...

angulartypescriptngrxreducers

There is an issue with the typings for React.createElement that is causing errors

Is it possible to implement React.createElement with TypeScript successfully? import React from "react"; type Props = { label: string; }; const Three: React.FC<Props> = (props: Props) => { return <div>{props.label}</div&g ...

reactjstypescriptreact-typescript

JQuery-UI issue arises following NPM installation in Meteor app

I recently added the jquery-ui npm package (version 1.12.1) to my Meteor application (version 1.4.1). Along with jquery (version 3.1.0) installed via npm. A browser console error keeps popping up: Error: Cannot read property 'sortable' of und ...

jquery-uimeteornpm

Resetting the state back to its initial value - which one to use: useState or useReduce?

In order to enhance the functionality of a third-party Authentication service Auth0's useAuth0 hook, I have developed a custom hook called useAuth. This custom hook is responsible for managing local variables that store essential user information like ...

javascriptreactjstypescriptreact-hooks