I have a TypeScript package with the main module located in the src directory, named Popover.ts. The main index file is called index.js, and the main field in the package.json points to that file. Here's the content of the main module:
exports.Popover = require('./src/js/Popover');
When I try to include this plugin in another package by installing it using npm, issues arise. Everything works fine in JavaScript:
const Popover = require('popover');
However, when I attempt to import it into a TypeScript file (demo.ts), it doesn't work:
import Popover from 'popover';
In PhpStorm, 'popover' is highlighted with a red line and displays an error message: Can not find module 'popover'. Furthermore, when I build the demo with webpack, there are no errors, but the build file does not contain the contents of Popover.ts.
I'm struggling to understand why this is happening and how to resolve it.
Update: By setting "moduleResolution": "node" in tsconfig.json as suggested by @user254694, I was able to remove the red highlighting in PhpStorm. However, the build then failed with the following TypeScript error generated by Webpack:
Error: TypeScript emitted no output for
F:\dev\js\plugins\popover\demo\npm\node_modules\popover\src\js\Popover.ts.
By default, ts-loader will not compile .ts files in node_modules.
To address this, I added the allowTsInNodeModules option to ts-loader:
loader: 'ts-loader',
options: {
allowTsInNodeModules: true
}
Additionally, I included the following lines in tsconfig.js:
"include": [
"node_modules/popover/src/**/*",
"node_modules/popover/index.js",
"node_modules/popover/typings/**/*"
]
Although this resolved the webpack error and allowed successful compilation, the red highlighting reappeared in PhpStorm.
PS: I created declaration types in the typings directory, leading my package.json to look like this:
"main": "index.js",
"types": "typings/index.d.ts",
I am still seeking a solution to make everything function correctly.