Npm installed two plugins but functions are not found

I have installed two plugins through npm, that are leaflet-routing-machine and leaflet-locatecontrol.
I have imported the necessary modules, but in both cases if I write L.control.locate or L.Routing, it tells me that those properties does not exist. Could it be a problem of npm version maybe?
At first I thought it was a problem of the plugin, but since the error repeats for both, could it be that they were not correctly installed?

Is it only your IDE complaining or does it actually not import the library when you execute the code?

In the imports there is no error :

import {locate, locatecontrol} from 'leaflet.locatecontrol';
import { Routing, routing} from 'leaflet-routing-machine'; 

but then, when writing, it gives that error.
I’ve tried to change and use just locate().addTo(map), without L.control, but it gives me another error:

__webpack_require__.i(...) is not a function

While writing just “routing.control” doesn’t give any error, but doesn’t show anything on the map.

I see you importing Routing or locate, but in your first post you are talking about L.*. Where does this L magically come from?

L is the instance of leaflet, and it is imported from that module. It is used to have access to the leaflet map. As from the leaflet documentation, it is imported this way:

import L from "leaflet";

After that, you can use L to access all the functions of the map (L.LatLng, L.marker, etc).
At first I was using L.Routing because that’s how you are supposed to use the plugins,as explained in their docs (but giving me the above errors), but then I thought that since I directly import the module, I do not need to access it from L. For this reason, I’ve tried to change the code without using L.*, but it still doesn’t work as said.

Then I repeat my initial question:

To sum up: when using L.* the IDE is complaining, yes, saying that the property (locate or routing, same for both) does not exists on type L. If I run the code ignoring what the IDE says, the error shown run-time is the same. error

Instead, when using just the function (without L.* to access it), the IDE does not complain, and there is just the error runtime:

__webpack_require__.i(...) is not a function

for “locate()”, while for “routing()” there is no error but the route is not shown on the map.

The first screenshot you just posted shows it does indeed have L.control and only locate is missing. Can you dump (console.log) L.control and see if this looks anything like it should?

What are the imports used when you made these Runtime Error screenshots?

(I am a bit confused that one is written lowercase and the other Uppercase…)

L.control is given by Leaflet module itself and it is used to access, for example, the layers of the map.
The import used are:

import L from "leaflet"; 
import {locate, locatecontrol} from 'leaflet.locatecontrol';
import { Routing} from 'leaflet-routing-machine';

locate and Routing are the functions given by the two plugins.

If I dump L.control it returns layers, zoom,scale, attribution, locate (in order).

Ok, so with leaflet everything is ok and working properly, just the two additional plugins you try to add are not behaving as they should, correct?

Let’s continue to debug this.

In the screenshot above it can’t find locate(). Should your code maybe be L.control.locate.addTo()?

Yes, correct.
In the locate documentation is locate() , but I’ve just tried using locate and with L.control.locate.addTo() the property does not exist, while if using just locate.addTo there is the following run time error:

Cannot read property 'addTo' of undefined

I am really just fishing here: What does L.control.locate output?
You said dumping L.control contains locate, so I would check what it looks like.

It just outputs “undefined”.