We have a React app running on node 14.15.1 and I'm in the process of upgrading dependencies. I've upgraded the wretch (https://github.com/elbywan/wretch) dependency to wretch@2 which requires import of it's addon modules, e.g import QueryStringAddon from 'wretch/addons/queryString' however my app now no longer compiles with the following error:
Module not found: Can't resolve 'wretch/addons/queryString' in 'C:\Users\path\to\my\component'
I'm using VSCode and it recognizes the module import including giving tooltip support, and I've confirmed the files are in the expected node_modules folder. Additionally if I change my import to a relative import into node_modules from my current file (e.g. import QueryStringAddon from '../../../node_modules/wretch/dist/addons/queryString') then that does compile.
I'm looking for a diagnosis of why my import is not successful, and what I can do to import the addons successfully.
Edit #1:
I believe the underlying issue is having a / in the path I'm importing from as after further investigation I don't believe we have any other imports of the form module/sub_module and doing import { queryStringAddon } from 'wretch/addons' similarly fails.
Edit #2:
I've now run the app starting up with the traceResolution option set to true in my tsconfig.json, it resulted in the following relevant section of the output:
======== Resolving module 'wretch/addons' from 'C:/Users/jake/path/to/my-app/src/components/ApiResource/index.tsx'. ========
Explicitly specified module resolution kind: 'NodeJs'.
Loading module 'wretch/addons' from 'node_modules' folder, target file type 'TypeScript'.
Directory 'C:/Users/jake/path/to/my-app/src/components/ApiResource/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/jake/path/to/my-app/src/components/node_modules' does not exist, skipping all lookups in it.
Directory 'C:/Users/jake/path/to/my-app/src/node_modules' does not exist, skipping all lookups in it.
Found 'package.json' at 'C:/Users/jake/path/to/my-app/node_modules/wretch/package.json'.
'package.json' has a 'typesVersions' field with version-specific path mappings.
'package.json' has a 'typesVersions' entry '*' that matches compiler version '3.8.3', looking for a pattern to match module name 'addons'.
Module name 'addons', matched pattern '*'.
Trying substitution 'dist/*', candidate module location: 'dist/addons'.
File 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons.ts' does not exist.
File 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons.tsx' does not exist.
File 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons.d.ts' does not exist.
'package.json' does not have a 'typings' field.
'package.json' has 'types' field './dist/index.d.ts' that references 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons/dist/index.d.ts'.
'package.json' has a 'typesVersions' entry '*' that matches compiler version '3.8.3', looking for a pattern to match module name 'dist/index.d.ts'.
Module name 'dist/index.d.ts', matched pattern '*'.
Trying substitution 'dist/*', candidate module location: 'dist/dist/index.d.ts'.
Loading module as file / folder, candidate module location 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons/dist/dist/index.d.ts', target file type 'TypeScript'.
Trying substitution 'dist/*/index.d.ts', candidate module location: 'dist/dist/index.d.ts/index.d.ts'.
Loading module as file / folder, candidate module location 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons/dist/dist/index.d.ts/index.d.ts', target file type 'TypeScript'.
Trying substitution 'dist/index.d.ts', candidate module location: 'dist/index.d.ts'.
Loading module as file / folder, candidate module location 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons/dist/index.d.ts', target file type 'TypeScript'.
Trying substitution 'dist/*/index.d.ts', candidate module location: 'dist/addons/index.d.ts'.
File 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons/index.d.ts' exist - use it as a name resolution result.
Resolving real path for 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons/index.d.ts', result 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons/index.d.ts'.
======== Module name 'wretch/addons' was successfully resolved to 'C:/Users/jake/path/to/my-app/node_modules/wretch/dist/addons/index.d.ts'. ========
So from that it looks like typescript is able to resolve it, but it's not being found when it's running.