Oops! There seems to be an issue in the babel__traverse module at line 68, column 50. It's expecting a ']' but something else is there. Let's fix

My current task involves upgrading from angular 5 to version 6V.

I diligently followed all the steps outlined in the guide - https://update.angular.io/?v=5.2-6.0

ng version
Angular CLI: 6.2.9
Node: 14.15.5
OS: linux x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.8.9
@angular/cdk                      5.2.5
@angular/cli                      6.2.9
@angular/material                 5.2.5
@angular/platform-server          5.2.10
@ngtools/webpack                  6.0.8
@schematics/angular               0.8.9
@schematics/update                0.8.9
rxjs                              6.0.0
typescript                        2.9.2
webpack                           4.8.3

However, upon running ng serve , I encounter a significant error message related to my @types.

For example:

ERROR in node_modules/@types/babel__traverse/index.d.ts(68,50): error TS1005: ']' expected.
node_modules/@types/babel__traverse/index.d.ts(68,53): error TS1005: ';' expected.
node_modules/@types/babel__traverse/index.d.ts(68,58): error TS1005: ';' expected.
node_modules/@types/babel__traverse/index.d.ts(68,70): error TS1011: An element access expression should take an argument.
node_modules/@types/babel__traverse/index.d.ts(68,83): error TS1005: ';' expected.
node_modules/@types/babel__traverse/index.d.ts(68,84): error TS1128: Declaration or st

In my investigation, it was suggested that I update Typescript to a newer version. However, attempting to upgrade to the latest version prompted an error specifying that I must use typescript@">>=2.7.2 <2.10" (I am currently using "typescript": "^2.9.2"). Despite running the necessary command, the error persists. Any suggestions?

angulartypescriptnpm

Answer №1

"For my project, the combination of "ts-node" version ^10.8.1 and "typescript" version ^4.6.3 finally did the trick!"

Answer №2

A more gentle approach is to update the dependencies in your package.json file with Babel:

"typescript": "3.8.3",
"@types/babel__core": "7.1.18",
"@types/babel__traverse": "7.14.2",

Once this is done, run npm install

You can ensure that your Babel version matches TypeScript by referring to the 'Tag' column in their respective package repositories.

https://www.npmjs.com/package/@types/babel__traverse?activeTab=versions

https://www.npmjs.com/package/@types/babel__core?activeTab=versions

In my situation, the Babel version was automatically updated due to the installation of another package that relies on it.

Author of the solution:

Answer №3

Use npm i to install the package [email protected]

This successfully resolved the problem

Answer №4

Updating the TypeScript version to a more recent one might solve the issue. That's how I fixed it.

"typescript" - "^3.4.2"

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

When attempting to utilize an array in Angular 2 and Ionic 2, the objects are successfully pushed into the array. However, upon trying to access

In my Ionic2 application, I am working on importing questions from a JSON file and displaying them in a test. I have successfully imported all the questions into an array of 'uniqueChoiceQuestion' objects. However, I am facing an issue where the ...

arraysangulartypescriptionic2

Various Designs for Various Pages in Angular 2

My website has a login page with just 2 input fields and no header, footer, or sidebar. After a user logs in, they should be directed to a page that includes a header, footer, and right navigation bar. The only thing that differs on the inner page is the ...

angular

Angular2: TypeScript files do not automatically recompile when using npm start

I recently set up a new Angular 2 project using ng new test. After running npm start or ng serve, I noticed that when I make changes to an HTML file, the browser page refreshes as expected. However, if I make changes to a TypeScript file, nothing seems to ...

angularnpm

Error: Promise was not caught: Unable to find any routes

I recently delved into learning Angular2 and started working on a sample project where I needed to navigate between three different pages. In order to set up the routing, I configured a RouterModule within the app.module.ts file as shown below: @NgModule ...

javascriptangulartypescriptangular-routing

Guide on displaying partial views with multiple outlets in Angular2

As a newcomer to Angular2, I am interested in creating a basic CRUD operation while incorporating routing concepts into my project. Fortunately, I am using Visual Studio 2015 which provides all the necessary configurations for me. My goal is to display one ...

angularangular2-routingangular2-templateangular2-directives

Problem with npm cache causing failure to rebuild the project

While working with Laravel 5.4 and Vue.js, I encountered a syntax error between the 'created' and 'methods' sections in my code. Although I initially fixed this error, it continued to persist. Even after restarting Apache, the error re ...

javascriptnode.jsnpmvue.js

Increase the number of buttons in Angular application

One dilemma I am facing involves a form with an "add more" button. Every time the button is clicked, a new instance of a class gets added to an array. Additionally, there is a delete row function that removes items from the array. The issue arises when usi ...

angularangular2-forms

What is the best way to convert this into a distinct function using typescript?

Is there a way to create a single method in Protractor or Webdriver API that can get the browser width and height? const getWindowWidth = async () => { const size = await browser.manage().window().getSize(); return size.width; }; I need this metho ...

typescriptprotractor

When running `strapi start`, an error message saying "url is not defined" may appear while using mlab mongo DB

Every time I try to start 'strapi' using the command 'strapi start', my terminal displays this message: debug ⛔️ Server failed to launch properly. The error states "URL is not defined". I've gone as far as rec ...

node.jsreactjsnpmmlabstrapi

Enhance your Angular application with stylish PrimeNG Menubars

I am currently working on a project using primeng 4.3.0 & Angular 4, where I am designing a horizontal menu for my various pages. Unfortunately, I am unable to update the version of these components, hence I have a question: While utilizing the menubar an ...

htmlangulartypescriptsassprimeng

Why does Angular use '?' for optional properties?

While reviewing the HTML template of an Angular application, I came across this syntax that caught my attention. <label>{{header?.title}}</label> I am curious about the purpose of ?.. Can someone explain it to me, please? ...

angularangular8

Toggle the visibility of a text box based on a selected option from a dropdown menu within a dynamic form using Angular

In the form I designed, users have the ability to add one or more divs of Address when they click on the add button. If a user selects options=5 from the dropdown menu, I want to dynamically show and hide a textbox within that specific Address Div. Compo ...

javascriptangulartypescriptangular8

How to trigger a click event in React using TypeScript and material-ui library

Currently, I am facing an issue when trying to update the value of material-ui TextFields from the store. When manually typing inside the field, everything works fine as expected with the handleChange() and handleBlur() functions handling the events. Howev ...

reactjstypescriptmaterial-ui

What are the steps to creating an Observable class?

I am working with a class that includes the following properties: export class Model { public id: number; public name: string; } Is there a way to make this class observable, so that changes in its properties can be listened to? I'm hoping fo ...

angulartypescriptangular8angular-observable

Error encountered in ngtsc(2345) where an argument of type 'Event' is being used instead of an expected parameter type of 'SortEvent'

I recently started using angular and encountered an issue while trying to sort columns. The error message I received was: Argument of type 'Event' is not assignable to parameter of type 'SortEvent'. Type 'Event' is missing t ...

htmlangulartypescriptng-bootstrap

The function signature () => Promise<string> cannot be assigned to a parameter with type Promise<string>

Creating a function that necessitates an asynchronous function as its parameter: async function handle(def: Promise<string>) { // ... const data = await def; console.log(`data equals: ${data}`) } I have successfully executed this by prov ...

node.jstypescriptasynchronouspromise

The process of automatically upgrading yarn for private packages

My goal is to automate the process of updating a private npm package in my yarn project, which is hosted on Github. I attempted to create a configuration file named .yarnrc.yml with the following content: npmScopes: yarn-package-publisher: npmPublish ...

node.jsjenkinsnpmyarnpkg

The Radix UI Theme's dark mode isn't taking effect

I'm having trouble getting the dark mode to work properly in my Radix UI app. Despite setting appearance="dark", nested components like Box and Card remain light. Interestingly, other props such as accent color seem to be working fine. It&a ...

cssreactjstypescriptuser-interfaceradix-ui

A guide on updating an Observable with a value retrieved from another Observable

Struggling to find a way to update the result of one Observable with the result of another. Can anyone provide guidance on how to do this without nested subscriptions and return the resulting Observable for later use? this._http.get<JSON>(url, { pa ...

angularrxjs

"Utilizing the `useState` function within a `Pressable

Experiencing some unusual behavior that I can't quite figure out. I have a basic form with a submit button, and as I type into the input boxes, I can see the state updating correctly. However, when I click the button, it seems to come out as reset. Th ...

reactjstypescriptreact-nativeexpo