Strange Typescript Issue: Dependency Imports Not Recognized as Top-Level Module

Attempting to move a custom token from one account to another by following this detailed tutorial.

Facing an issue with four errors showing up for all imports from the @solana/spl-token package.

Tried removing the node-modules folder and reinstalling npm as suggested in this post, but no luck. Same error persists.

The strange part:

Even after uninstalling the package, I still encounter the same error! How is it possible that the compiler thinks the package is still present? What is happening?

The root cause seems to be that the previous version of the package 0.1.8 did not have those imports, whereas the latest version 0.2.0 does. I have installed 0.2.0. It's explicitly mentioned as ^0.2.0 in my package.json file

I am new to TypeScript so any guidance (including tips on better debugging) would be greatly appreciated :)

Update: (title changed to reflect progress)

Suspecting a dependency issue... noticed from package-lock.json that there are numerous other packages installing @solana/spl-token as a dependency, here's an example:

"@raydium-io/raydium-sdk": {
      "version": "1.1.0-beta.0",
      "resolved": "https://registry.npmjs.org/@raydium-io/raydium-sdk/-/raydium-sdk-1.1.0-beta.0.tgz",
      "integrity": "sha512-yN5M9sZNHazdMiUof2pHCBHs8FoGrfi2AWbLKAtKgnpJAWoyG7aLMLjeaVBc2L/xPuGsttUPP46dtqODwquJlg==",
      "requires": {
        "@colors/colors": "^1.5.0",
        "@solana/buffer-layout": "^3.0.0",
        "@solana/spl-token": "^0.1.8",
        "big.js": "^6.1.1",
        "decimal.js-light": "^2.5.1",
        "fecha": "^4.2.1",
        "lodash": "^4.17.21",
        "toformat": "^2.0.0"
      },
      "dependencies": {
        "@solana/buffer-layout": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/@solana/buffer-layout/-/buffer-layout-3.0.0.tgz",
          "integrity": "sha512-MVdgAKKL39tEs0l8je0hKaXLQFb7Rdfb0Xg2LjFZd8Lfdazkg6xiS98uAZrEKvaoF3i4M95ei9RydkGIDMeo3w==",
          "requires": {
            "buffer": "~6.0.3"
          }
        },
        "@solana/spl-token": {
          "version": "0.1.8",
          "resolved": "https://registry.npmjs.org/@solana/spl-token/-/spl-token-0.1.8.tgz",
          "integrity": "sha512-LZmYCKcPQDtJgecvWOgT/cnoIQPWjdH+QVyzPcFvyDUiT0DiRjZaam4aqNUyvchLFhzgunv3d9xOoyE34ofdoQ==",
          "requires": {
            "@babel/runtime": "^7.10.5",
            "@solana/web3.js":  "^1.21.0",
            "bn.js": "^5.1.0",
            "buffer": "6.0.3",
            "buffer-layout": "^1.2.0",
            "dotenv": "10.0.0"
          }
        }
      }
    },

Seems like TypeScript somehow imports the dependency? To resolve this weirdness, I found a workaround:

import { getOrCreateAssociatedTokenAccount, transfer } from "../node_modules/@solana/spl-token"

This isn't a final solution, which is why I'm leaving this question open. Unsure why TypeScript is loading the subfolder instead of the main one.

typescriptsolanasolana-web3jssolana-program-library

Answer №1

Seems like there is another dependency causing your @solana/spl-token library to remain at version 0.18.0.

To resolve this issue, manually import the latest version using:

npm i @solana/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dba8abb7f6afb4b0beb59bebf5e9f5eb">[email protected]</a>

or

yarn add @solana/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6615160a4b12090d0308265648544856">[email protected]</a>

Additionally, remove the ^ to ensure exact version enforcement in your package.json.

Answer №2

This issue arises when there are conflicting versions of the @solana/spl-token package installed.

For instance, I encountered this problem while using the metaplex npm package, which relied on version 0.1.8 of spl token, and I had also installed version 0.2.0 separately.

To resolve this, simply remove one of the conflicting versions and keep only one in your project.

Answer №3

To create multiple versions of the @solana/spl-token library, you can follow the steps outlined in this question. One approach is to execute the following commands to generate two distinct libraries.

npm install @solana/spl-token-0.1.8@npm:@solana/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec9f9c80c19883878982acdcc2ddc2d4">[email protected]</a>

npm install @solana/spl-token-0.2.0@npm:@solana/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="384b4854154c57553e54535956">[email protected]</a>

Once installed, you can import the module using:

import { getOrCreateAssociatedTokenAccount, transfer } from "@solana/spl-token-0.2.0"

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

The NUXT project encounters issues when trying to compile

I am currently working on an admin panel using the nuxt + nest stack. I am utilizing a template provided at this link: https://github.com/stephsalou/nuxt-nest-template While in development mode, the project starts up without any issues. However, when I ...

javascripttypescriptvue.jsnuxt.js

Sharing interfaces and classes between frontend (Angular) and backend development in TypeScript

In my current project, I have a monorepo consisting of a Frontend (Angular) and a Backend (built with NestJS, which is based on NodeJS). I am looking to implement custom interfaces and classes for both the frontend and backend. For example, creating DTOs s ...

angulartypescript

The Angular/Typescript framework encountered an issue when trying to locate a differ that can handle an object of type 'object'. NgFor is limited to binding with Iterables like Arrays and is not compatible with plain objects

I am currently utilizing Angular for my project. I am attempting to call an API to fetch data from it, but I keep encountering this error: core.js:4352 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object&ap ...

angulartypescript

TypeError: describe is not a function in the Mocha testing framework

Encountering an issue with mocha-typescript throwing an error indicating that describe is not defined. TypeError: mocha_typescript_1.describe is not a function at DatabaseTest.WrongPath (test/database_test.ts:21:9) at Context.<anonymous> ...

typescriptmocha.jsdescribe

Idea fails to detect imports

I have been attempting to use Angular2 in IntelliJ IDEA IDE. Although my code is valid (I have tried compiling and executing it), the IDE keeps showing me this error: https://i.stack.imgur.com/w6wIj.jpg Is there a way to configure IntelliJ IDEA to hide t ...

javascriptangulartypescriptintellij-idea

Ensuring Type Compatibility Between Classes and Object Literals in TypeScript

When working with TypeScript, it is important to note that an object literal can be assigned to a class typed variable as long as the object provides all properties and methods required by the class. class MyClass { a: number; b: string; } // The co ...

typescript

Unable to set a union key type for dynamic objects

Within my object, I am dynamically assigning a field and its corresponding value: type PhoneFields = 'deliveryPhoneNumber' | 'pickupPhoneNumber' (props: { phoneField?: PhoneFields }) { const initialValues = { [props.phoneField ...

typescript

The alignment of the first and second steps in Intro.js and Intro.js-react is off

There seems to be an issue here. Upon reloading, the initial step and pop-up appear in the upper left corner instead of the center, which is not what I anticipated based on the Intro.js official documentation. https://i.stack.imgur.com/ICiGt.png Further ...

javascriptreactjstypescriptnext.jsintro.js

The function res.status is not defined

Currently, I am in the process of integrating my upcoming app with Google Sheets. I have relocated the function that manages the post request to "app/api/sheets" as per the recommended documentation. import type { NextApiRequest, NextApiResponse } from &ap ...

typescriptnext.jsgoogle-api

Optimal Approach for Redirecting Authorization

I'm currently working on setting up an authorization feature for my Angular application. Here is the detailed process I am following: First, I generate a state and code in the front end. Upon clicking the login button, the application redirects to /a ...

angulartypescriptredirectoauth-2.0oauth

How to Invoke a TypeScript Function in Angular 2 Using jQuery

Using the Bootstrap-select dropdown in Angular 2 forms with jQuery, I am attempting to call a Typescript method called onDropDownChangeChange on the onchange event. However, it seems to not be functioning as expected. import { Component, OnInit, ViewChi ...

angulartypescriptangular2-formstypescript2.0

The attribute 'commentText' is not found within the 'Comment' data type

Currently, I am immersed in building a user-friendly social network application using Angular 12 for my personal educational journey. Running into an error has left me puzzled and looking for assistance. About the Application: The home page (home.compone ...

angulartypescript

Mastering the Type Model on Firestore Function to Retrieve Field ValuesUnlock the potential of the Type

When retrieving data from Firestore, I am able to print the entire object using doc.data. However, I am having trouble accessing the specific value of unixtime as it is coming through as undefined. I need help in correctly applying my type model so that I ...

node.jstypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

Angular8 with the [tinymce] library for customizing editor elements and configuring multiline options

I am currently working with Angular 8 and in the template, we have the following code snippet: <editor required class="research-modal__control__input research-modal__control__input__description" formCo ...

angulartypescripttinymce

Is there a way to insert data from one table into a MySQL Table in Drizzle and update the entry if it already exists?

My goal is to utilize Drizzle for inserting data into a table and updating it if the key already exists. In MySQL, the code would look like this: INSERT INTO myTable1(field1,field2,field3,field4) SELECT fieldOne,fieldTwo,fieldThree,fieldFour FROM myTable2 ...

typescriptnext.jsdrizzle

Cheerio fails to retrieve items from the specified directory

My main goal with cheerio is to scrape the titles from this IMDb ranking: Despite following the documentation and specifying the exact HTML path for the titles, I am getting back random and confusing objects like: 'x-attribsNamespace': [Object ...

typescriptweb-scrapingaxioscheerio

Using the pipe operator in RXJS to transform an Event into a KeyboardEvent

I'm encountering an error when trying to add a keydown event and convert the parameter type from Event to KeyboardEvent as shown below. fromEvent(document, "keydown") .pipe<KeyboardEvent, KeyboardEvent>( filter((event) => even ...

angulartypescriptrxjs

The react-bootstrap module does not have any members available for export

I'm looking to incorporate the npm module react-bootstrap from this link into my Layout component, following the ASP.NET Core 2.1 template client project structure. The challenge I'm facing is that the template uses a .js file extension, but I pr ...

reactjstypescriptnpmreact-bootstrap

Mastering Angular Service Calls in TypeScript: A Comprehensive Guide

In the midst of my TypeScript angular project, I am aiming to revamp it by incorporating services. However, I have encountered an issue where when calling a function within the service, the runtime does not recognize it as the service class but rather the ...

angularjstypescriptthisangular-services

What is the process for expanding types for a section element in Typescript?

When working with TypeScript, we define our component props types by extending a div like so: import { HTMLAttributes } from "react"; export interface IContainerProps extends HTMLAttributes<HTMLDivElement> { // Additional custom props for the c ...

reactjstypescript