Export was not found when importing LocateControl

[mrkvon]

It was great to find this fresh library just when I needed it. Thank you!

When I imported it to my CRA project:

import { LocateControl } from '@turtlesocks/react-leaflet.locatecontrol'

I got

ERROR in ./[...].tsx 84:35-48
export 'LocateControl' (imported as 'LocateControl') was not found in '@turtlesocks/react-leaflet.locatecontrol' (module has no exports)

ERROR in ./node_modules/@turtlesocks/react-leaflet.locatecontrol/dist/index.js 1:0-32
Module not found: Error: Can't resolve './LocateControl' in '/home/[...]/node_modules/@turtlesocks/react-leaflet.locatecontrol/dist'
Did you mean 'LocateControl.js'?
BREAKING CHANGE: The request './LocateControl' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I had to import it from the specific file

import { LocateControl } from '@turtlesocks/react-leaflet.locatecontrol/dist/LocateControl'

to resolve this.

I think this can be fixed by explicitly adding extension .js here.

---

If that's not enough, maybe also including

    "module": "nodenext",
    "moduleResolution": "nodenext",

in tsconfig.json compilerOptions could help. Not sure about that one.

[TurtIeSocks]

Hi there! I think this is actually an issue with Webpack, at least as far as I could find:
avoidwork/filesize.js#162

I don't know which version of webpack CRA is using, but I believe even the React maintainers no longer recommend that anyone use CRA. I would highly recommend checking out the React template from Vite!

npm create vite@latest my-react-app -- --template react-ts

I'm going to close this but if you're still running into this issue with Vite, please feel free to reopen :)

[mrkvon]

Thank you for the response @TurtIeSocks .

I'm planning to migrate to Vite + React (probably after React 19 is released), so I can report back when that's done. Well, since the demo uses Vite + React, I assume it will be fine.

I've recently learned that file extensions in ESM are mandatory¹, and that module specifiers aren't transformed in TypeScript. It follows that the extensions must be specified in TypeScript when package.json has "type": "module", and output javascript is ESM.

For the above reason, I maintain that this is an issue with the package, not webpack or CRA. It's convenient that Vite with its bundler makes it work anyways, but the same can't be guaranteed in other environments.

If including js extension can make the package work in generic environments, then why not include it? It is somewhat counterintuitive to write js extensions in ts code, but it's indeed the correct way.

If anybody gets the same error, for a workaround, the LocateControl can be exported directly, as I mentioned in OP. Imo fix would be preferable.

In any case, thank you for this package @TurtIeSocks ! ❤️

Footnotes

1. I haven't found it explicitly written on MDN (only Node), but the examples on MDN do include extensions. I've also found it explained less formally. ↩