The autoimport feature is not supported by the Types Library

My latest project involves a unique library with only one export, an interface named IBasic. After publishing this library on npm and installing it in another project, I encountered an issue. When attempting to import IBasic using the auto-import feature (ctrl+.), it couldn't be found. However, manually specifying the path as 

import { IBasic } from "node_modules/<libraryname>/src"
resolved the problem.

So, the question arises: How can I ensure that my library's interface works seamlessly with auto-import functionality when installed in a project?

Details of the library package.json:

{
      "name": "enzotypes",
      "version": "1.0.1",
      "description": "types library test",
      "main": "dist/cjs/index.js",
      "module": "dist/esm/index.js",
      "types": "dist/index.d.ts",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "rollup -c --bundleConfigAsCjs"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@rollup/plugin-commonjs": "^25.0.7",
        "@rollup/plugin-node-resolve": "^15.2.3",
        "@rollup/plugin-typescript": "^11.1.6",
        ...
      },
      "peerDependencies": {
        "react": "^18.2.0"
      }
}

Now, looking at the project's package.json:

{
    "name": "[...]",
    "version": "0.0.1",
    "description": "",
    "author": "",
    "private": true,
    "license": "UNLICENSED",
    "scripts": {
         ...
    },
    "dependencies": {
        [...]
        "enzotypes": "^1.0.1",
        [...]
    },
    "devDependencies": {
        [...]
    }
}
typescriptnpm

Answer №1

It appears that you are using a dual package setup, exporting both ES6 and CommonJS modules. To properly define what exports to use when consumers interact with your enzotypes module in either CJS or ESM format, it is recommended to include an exports definition in the package.json. This can be achieved by following a structure similar to:

"exports": {
  ".": {
    "require": "./dist/index.js",
    "import": "./dist/index.mjs",
    "types": "./dist/index.d.ts"
  }
},

By setting up the export paths for index.js and index.mjs in this manner, all necessary components will be accessible for import using statements like:

import { IBasic } from "enzotypes"

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

What is the best way to specify Next.js Context types in TypeScript?

Can someone help me with defining the types for next js Context and req? Below is the code for the getServerSideProps function- //Server side functions export const getServerSideProps: GetServerSideProps = async (context) => { await getMovies(conte ...

typescriptnext.js

"Seeking advice on how to nest a service provider within another one in AngularJS 2. Any

I am faced with a product and cart list scenario. Below is the function I have created to iterate through the cart list and retrieve the specific product using its ID. getCartList(){ this.cart = CART; this.cart.forEach((cart: Cart) => ...

angulartypescriptangular-services

Unable to programmatically uncheck a checkbox after it has been manually checked: Angular

After being selected through the UI by clicking on the checkbox, I am encountering an issue where I cannot unselect the checkbox programmatically. To see this behavior in action, visit the sample app, where you can click on the checkbox to select it and t ...

angulartypescriptcheckbox

"Encountered an issue with resolving the dependency tree while trying to install the AWS CDK construct library - ERESOLVE error

$ npm i @aws-cdk/aws-ec2 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While trying to resolve the dependencies for <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0f0807331f0d01 ...

node.jsamazon-web-servicesnpmaws-cdk

Why not include a designated package version in the package.json file? This way, we can eliminate the need for the package-lock.json file

As a newcomer to NPM, please bear with me if my questions seem basic. Here's what I'm curious about: Q1- For instance, when I install a package and explicitly mention the version like this: npm install [email protected] why does it cha ...

node.jsnpm

React Project Encounter: RunError

After running my project on React, I encountered the error shown below. Despite reinstalling the node_module, the issue persists. Has anyone else experienced a similar problem? TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string ...

reactjsnpmredux

The issue lies with the inability of single quotes to function properly within the

I am struggling to configure my package.json file on Windows 10 with npm 5.5.1 to run the command npm run test-watch. Here is how my package.json looks: "scripts": { "test": "mocha server/**/*.test.js", "test-watch": "nodemon --exec 'npm te ...

node.jsnpmpackage.jsonnodemon

Utilize Function type while preserving generics

Is there a way in Typescript to reference a function type with generics without instantiating them, but rather passing them to be instantiated when the function is called? For instance, consider the following type: type FetchPageData<T> = (client : ...

typescript

Having issues with your Typescript in Sublime Text?

The issue with the TypeScript plugin in Sublime Text (version 3126) suddenly arose without any identifiable cause. It seems that the plugin no longer recognizes types, resulting in disabled error highlights and autocompletions. This problem occurred on M ...

typescriptpluginssublimetext

What could be the reason behind the error message 'No Bower components found' when running 'grunt serve'?

Starting an Angular app using angular-fullstack on my Windows 7 machine has been a bit of a challenge. I installed several npm packages globally, including grunt-bower-install. To create the application, I used the following command: yo angular-fullstac ...

angularjsnpmbower

I keep encountering a TypeError every time I attempt to execute npm

I've been attempting to install a package using npm, but I keep encountering errors no matter what command I enter in the console. My Node.js version is 16.6.2, installed via the executable file downloaded from the official website. Despite trying to ...

node.jsnpm

Streamline the transition between various environments for Python projects by automating the process of managing dependencies

I have been tackling a variety of Python projects that rely on different versions of the same library. When I use pip to install libraries, they are installed globally as a single version. The only workaround I'm aware of to manage multiple versions o ...

pythonnpmpip

Rule in ESLint mandating return type for arrow functions

I currently have the following arrow function within my Angular project: this.httpClient.get('url').subscribe((response)=>{ }); It is important to note that ESLint should detect an error in the above code due to not specifying a return type. ...

angulartypescripteslinteslintrctypescript-eslint

What steps are necessary to create an npm package utilizing three.js without any dependencies?

I have a challenge - I am trying to create an npm package that generates procedural objects for three.js. The issue I'm facing is how to properly include three.js in my code. I attempted to establish a dependency and use something like const THREE = r ...

javascriptnode.jsnpmthree.js

What is causing the consistent occurrences of receiving false in Angular?

findUser(id:number):boolean{ var bool :boolean =false this.companyService.query().subscribe((result)=>{ for (let i = 0; i < result.json.length; i++) { try { if( id == result.json[i].user.id) ...

javascriptangulartypescript

The export default statement could not be found, however, it functions correctly when accessed from within the node

When I load the library with npm, @ckeditor/ckeditor5-build-classic, it works fine. I can easily use it by importing ClassicEditor from '@ckeditor/ckeditor5-build-classic'. import ClassicEditor from '@ckeditor/ckeditor5-build-classic' ...

npmnode-moduleses6-module-loader

Error in Ionic Cordova Build prod: Module "." not found - Requires Typescript version >3

After updating my ionic project and all dependencies, I encountered an error when trying to build a --prod android apk: Uncaught Error: Cannot find module "." at vendor.js:1 at vendor.js:1 at Object.<anonymous> (vendor.js:1) at e (vendor.js:1) at Ob ...

androidangulartypescriptcordovaionic3

Ensure to update the npm package version before making any Git commit

My project is built with Ember using NPM and I utilize Git for version control. I am looking for a way to update or bump the package.json version before or during a Git commit. Is there a method to accomplish this? Should I be implementing Git hooks? ...

javascriptnode.jsgitgithubnpm

Two services declared with "providedIn: 'root'" that have identical names

Imagine if there are two distinct services in two separate project categories, both sharing the same name. /app/services/category1/my.service.ts: @Injectable({ providedIn: 'root' }) export class MyService { foo() { return 'foo&apo ...

angulartypescript

Struggling to configure my babel-watch in my node.js environment

Attempting to set up babel watch post-babel installation, my JSON file appears like this: { "name": "t3", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", ...

npm