"main" field in package.json is ignored when importing from node-module

Avatar
Permanently deleted user
Created

I have a Typescript project, let's call it "projectA", which uses a node module, let's call it "@myCompany/moduleB".  

In "moduleB" I have the following structure:

- build
    - folder1
        - file1.js
    - index.js
    - index.d.ts
package.json

the package.json of "moduleB" contains the main-attribute to make ./build/index.js the entry file:

{  
  "main": "build/index.js",
  "name": "@myCompany/moduleB",  
  "version": "1.0.0"
}

 

In "projectA", I have installed "moduleB" as a dependency using 'npm install @myCompany/moduleB'. When I use a function from "moduleB" in "projectA", WebStorm always adds the '/build' directory to the import path.

So instead of

import { myFunction } from "@myCompany/moduleB";

myFunction();

I get

import { myFunction } from "@myCompany/moduleB/build";

myFunction();

When I manually remove the '/build' from the import path, the code still works as expected, but in WebStorm the syntax-highlighting for 'myFunction()' disappears and I can't do "jump to source" any more.

 

It seems like WebStorm just ignores the file specified in the "moduleB"s package.json. How can I make WebStorm use the cleaner import path without the '/build'-postfix? 
This issues occurs WebStorm and Rider.

Thanks in advance,
Annika

Votes

0

Share

4 comments
Avatar
Elena Pogorelova
Created

Try adding

"typings": "build/index.d.ts",

to the package.json of "moduleB" - does it help?

0
Avatar
Permanently deleted user
Created

Awesome, Elena! It works like a charm :)

Thanks a lot for your very fast help.

1
Avatar
Permanently deleted user
Created

I am facing the very same issue:

I am using a monorepo with two workspaces

common workspace: `package.json`

{
  "name": "@my/common",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "private": true,
  "main": "./src/index.ts",
  "workspaces": [
    "packages/**/*"
  ],
  "devDependencies": {
    "typescript": "^3.8.3"
  }
}

And I am not able to click via CMD + LEFT_MOUSE to the shared code:

import { add } from '@my/common';

I am attaching the sample project in case you want to try it out. Maybe that is just some misconfiguration.

This can be solved by adding this line:

"types": "./src/index.ts",

to a common package.json. But that field should be used for the definition files `d.ts`

This repo contain a test sample project.
https://github.com/koprivajakub/webstorm-issue

By opening this project in WebStorm and installing all dependecies you can see the project run fine by running `yarn build` in the app package.
But you are not able to navigate to the implementation file from `packages/app/src/index.ts` on the `add` function. Also you can see that if you remove the import line the suggested import is

import {add} from "@my/common/src"

which is not expected since the main file is specified in the `packages/common/package.json`

1
Avatar
Elena Pogorelova
Created

>But that field should be used for the definition files `d.ts`

and `main` field is for `.js` files:) It's not supposed to point to typescript source files that can't be directly executed, it's a module main file, a primary entry point for you module

0

Please sign in to leave a comment.