Develop Reference

why package.json exports field not working in npm package

I have developed an npm package that builds three js files.
in my project I want to import js files like this:
import MyButton from '#bslm/ui/MyButton'
so i used the exports field in my package.json like this:
"type": "module",
"exports": {
"./MyButton": "./dist/my-button.common.js",
"./MyInput": "./dist/my-input.common.js",
"./MyImage": "./dist/my-image.common.js",
}
but when i try:
import MyButton from 'mypackage/MyButton'
I get this error: These dependencies were not found
node version: 14.18.1
npm version: 8.5.4

Remove the leading '.'. If you use './' as the keys you need to use objects like {"default":"./dist/my-button-common.js" } instead of a simple name.

Property '' does not exist on type 'Request<ParamsDictionary>'

When trying to extend the Request interface from the package express to add some custom properties, I'm getting the following typescript error:
TS2339: Property '' does not exist on type 'Request<ParamsDictionary>'.
Do you know how to solve that?

Since a recent update of its typings and dependencies, I found that the following should fix the errors in your application.
In your tsconfig.json
{
"compilerOptions": {
//...
"typeRoots": [
"./custom_typings",
"./node_modules/#types"
],
}
// ...
}
And in your custom typings
// custom_typings/express/index.d.ts
declare namespace Express {
interface Request {
customProperties: string[];
}
}

Just add the following, what this does is it simply adds a custom property to the express Request interface
declare global {
namespace Express {
interface Request {
propertyName: string; //or can be anythin
}
}
}

I recently had the same issue, I followed the solution in the previous comments and this repo and I still had the same issue. After doing more digging it seems like it's a bug with ts-node.
To solve this you need to run your server with a --files flag
So if you normally run your server
ts-node ./src/server.ts or nodemon ./src/server.ts
Change it to
ts-node --files ./src/server.ts or nodemon --files ./src/server.ts
After that, I was able to get rid of both the VScode errors and errors while starting the server.

In my case it was missing types for express. What I'm currently working on is migrating our codebase from Yarn to PNPM. The difference with PNPM is it doesn't hoist dependencies the way Yarn does so I had to add the dependencies on the package.json for each workspace that would use that dependency.
This is the error I encountered:
TSError: ⨯ Unable to compile TypeScript:
../server/src/api/filters/googleFilter.ts:6:23 - error TS2339: Property 'headers' does not exist on type 'Request<core.ParamsDictionary>'.
6 const idToken = req.headers.authorization;
It took me quite a few searches to look for a fix when I decided to open up the node_modules folder of that workspace. Inside node_modules/#types/express/index.d.ts
/// <reference types="express-serve-static-core" />
/// <reference types="serve-static" />
import * as bodyParser from "body-parser";
import serveStatic = require("serve-static");
import * as core from "express-serve-static-core";
import * as qs from "qs";
I saw my IDE showing errors telling me that it cannot find the types for express-serve-static-core and serve-static so what I did was to add it on the package.json of that workspace and that fixed the errors on the terminal.
Hope this helps someone else who will encounter the same issue with PNPM.

This worked for me!
Using ts-node
Add the following file to add a property to the express Request interface as suggested by #Rishav Sinha
Add this file src/types/types.custom.d.ts
declare global {
declare namespace Express {
interface Request {
user?: any,
page?: number,
}
}
}
// If this file has no import/export statements (i.e. is a script)
// convert it into a module by adding an empty export statement.
export { }
Add in tsconfig.json
{
"compilerOptions": {
//...
"typeRoots": [
"./types",
"./node_modules/#types"
],
}
// ...
}
Run this command with --files options as suggested by #Shahar Sharron
If you installed globally ts-node
$ ts-node --files ./src/index.ts
or to run from your project dependencies ts-node
$ npx ts-node --files ./src/index.ts
Using nodemon
If you want to use nodemom
Add this file in folder project nodemon.json
{
"watch": ["src/**/*.ts"],
"ext": "ts,json",
"ignore": [
"src/**/*.spec.ts",
"src/**/*.test.ts"
],
"exec": "npx ts-node --files ./src/index.ts"
}
Run nodemon
$ nodemon

Using Third Party NPM packages in Angular-Cli

I have read countless tutorials on how to use third party packages but none actually say what needs to happen in the component.ts to make things work in regards to the import statement and how to get access to the function.
package: https://www.npmjs.com/package/#vote539/excel-as-json
Here are the steps I followed:
1) Npm Install excel-as-json --save
2) Add script to angluar-cli.json scripts array
3) Add typings in typings.d.ts
4) Add import statesments
1) Using Angular-Cli I installed the package
I have added this package to my scripts array inside angular-cli.json.
2) .Angular-Cli.json
...
"styles": [
"styles.scss"
],
"scripts": [ "../node_modules/excel-as-json/lib/excel-as-json.js" ],
"environmentSource": "environments/environment.ts",
"environments": {
...
3) I added in some typings
typings.d.ts
declare var module: {
id: string;
};
declare var require: any;
4) Inside my component.ts file I have added in the import statement
convertExcel = require('excel-as-json').processFile;
and then in my constructor I added in the code needed to run the conversion:
compoent.ts
export class DashboardComponent implements OnInit{
constructor() {
convertExcel('../assets/excel/assignedresources.xlsx', '../assets/excel/assignedresources.json');
}
ngOnInit() {
}
}
I tried many various of the import state, Always getting the following errors:
errors
Cannot find module 'excel-as-json'.)
(14,5): Cannot find name 'convertExcel'.)

Browserify with jQuery plugins

I'm trying to get some jQuery plugins to work with browserify. I have my package.json setup like this:
"browser": {
"jquery": "./client/js/vendors/jquery-2.2.2.min.js",
"jquery-validation": "./client/js/vendors/jquery.validate.js"
},
"browserify-shim": {
"jquery": "global:$"
},
However, when I require('jquery-validation'), I get cannot read property fn of undefined as it relates to this plugin. I'm trying to also have it so that $ will be global as it's used all over, without having to require it.
I've seen so many different articles and configs for this, but nothing seems to work.
Any suggestions or clarity would be greatly appreciated.
EDIT:
I also sometimes get Uncaught Error: Cannot find module 'jquery'

You don't need to shim jquery, it's conpatible with node yoo can simply install it with npm install jquery --save and make var $= require("jquery") in your code.
Yo do need to shim jquery.validate.
package.json:
{
"browser":{
"jquery-validation":"./node_modules/jquery-validation/dist/jquery.validate.js"
},
"browserify-shim":{
"jquery-validation":{
"depends":[
"jquery:jQuery"
]
}
},
"browserify":{
"transform":[
"browserify-shim"
]
},
"dependencies":{
"jquery":"^2.0.0",
"jquery-validation":"^1.15.1"
}
}
Note: jquery.validate depend on jQuery version 2.0^ ( you can see in the package.json file of the jquery-validation's npm package ) so you have to set dependency on jquery ^2.0 in your project otherwise jquery-validation will load he's own version of jQuery and integration will not work.

It seems like you have typo, you should call require('jquery-validation') instead of require('jquery-validate')

How to install fastclick with ember-cli?

I've got an ember-cli project. I've used bower to install fastclick and have added it to my brocfile.
Now I'm trying to initialise it. In my app.js file I've added:
import FastClick from 'bower_components/fastclick/lib/fastclick';
But this gives me an error in the console: "Uncaught TypeError: Cannot read property 'default' of undefined". The inspector shows the following generated code:
["ember","ember/resolver","ember/load-initializers","bower_components/fastclick/lib/fastclick","exports"],
function(__dependency1__, __dependency2__, __dependency3__, __dependency4__, __exports__) {
"use strict";
var Ember = __dependency1__["default"];
var Resolver = __dependency2__["default"];
var loadInitializers = __dependency3__["default"];
var FastClick = __dependency4__["default"]; # chrome highlights this line
I assume the problem is that fastclick isn't compatible with the ES6 loader that ember-cli uses. I don't have requirejs, so how can I install fastclick into my project? Docs are at https://github.com/ftlabs/fastclick.
I've also tried adding this to index.html, but it doesn't have any effect when I build an iOS app:
$(function() {
FastClick.attach(document.body);
});

With Ember-cli v0.0.42
Install fastclick with bower
bower install fastclick --save
In your Brocfile.js, add the following above module.exports = app.toTree();
app.import('bower_components/fastclick/lib/fastclick.js');
Then in your app.js you can add
var App = Ember.Application.extend({
...
ready: function(){
FastClick.attach(document.body);
}
});
You'll also need to add "FastClick":true to your .jshintrc file's predefs, to prevent it from complaining. More info in the docs about Managing Dependencies.

You can also use ember-cli-fastclick :)

OK the jquery version didn't work, but putting the following in my index.html file did:
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);