Comments (5)
Confirmed this is TypeScript behavior:
index.ts
import test from 'test-package';
console.log(test);
node_modules/test-package/package.json
{ "exports": "./file.js" }
node_modules/test-package/file.ts
export default 1234;
Output
$ npx tsc --noEmit --traceResolution
...
======== Resolving module 'test-package' from '/test-js-ext-ts/index.ts'. ========
Explicitly specified module resolution kind: 'Node16'.
File '/test-js-ext-ts/package.json' exists according to earlier cached lookups.
Loading module 'test-package' from 'node_modules' folder, target file type 'TypeScript'.
Found 'package.json' at '/test-js-ext-ts/node_modules/test-package/package.json'.
'package.json' does not have a 'typesVersions' field.
File name '/test-js-ext-ts/node_modules/test-package/file.js' has a '.js' extension - stripping it.
File '/test-js-ext-ts/node_modules/test-package/file.ts' exist - use it as a name resolution result.
Resolving real path for '/test-js-ext-ts/node_modules/test-package/file.ts', result '/test-js-ext-ts/node_modules/test-package/file.ts'.
======== Module name 'test-package' was successfully resolved to '/test-js-ext-ts/node_modules/test-package/file.ts'. ========
...
from tsx.
Does TypeScript follow this resolution logic?
from tsx.
Does TypeScript follow this resolution logic?
Yes. (I think as of version 4.7)
from tsx.
To save anyone else blocked by this issue some time: I tried out a number of TypeScript loaders and unfortunately ts-node
is the only one I know of that handles this aspect of TypeScript's module resolution algorithm correctly.
from tsx.
Stumbled here when suspecting that tsx watch
did not recompile when a file imported via "Subpath imports" was edited.
Edit: After few changes in my local environment, tsx
seems to work just fine even when using subpath imports.
Something was off, one of them being that I had old builds in dist/
, which were picked up in "dev mode" with tsx
.
Sorry for the original inaccurate comment. I will leave my original comment (with fixed package.json) comment below.
Summary is that with TS 5.4-beta the combination of tsx watch
+ "imports": {"#app/*":...}
+ import logger from '#app/utils/logger.js'
+ no "paths":
in tsconfig.json
is working fine in watch mode.
FYI I am using tsx watch --conditions=development
to pick "correct" subpath import in development mode (./src/*
) vs in "production" mode when running with plain Node (./dist/*
).
Original comment about `tsx watch` with subpath imports in TS 5.4-beta
Stumbled here when noticing that tsx watch
did not recompile when file imported via "Subpath imports" was edited.
This is sort of FYI, but thought to inform that I was excited to use a TS feature, currently in TS 5.4-beta
(microsoft/TypeScript#55015), with which I was able to accomplish "single source of truth" by just defining package.json "imports"
, without using duplicate TS Config "paths"
declaration.
My "imports"
/"exports"
in package.json:
{
"name": "my-backend",
"version": "1.0.0",
"type": "module",
"engines": {
"node": ">= 18.17.0"
},
"exports": {
".": "./dist/index.js",
"./sensor.json": "./sensor.json"
},
"imports": {
"#app/*": {
"development": "./src/*",
"default": "./dist/*"
}
}
tsconfig.json from `tsc --showConfig`, long list of `"files": [..]` omitted
{
"compilerOptions": {
"lib": [
"es2023"
],
"module": "node16",
"target": "es2022",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "nodenext",
"composite": true,
"incremental": true,
"declaration": true,
"declarationMap": true,
"outDir": "./dist",
"rootDir": "./src",
"moduleDetection": "force",
"allowSyntheticDefaultImports": true,
"resolvePackageJsonExports": true,
"resolvePackageJsonImports": true,
"useDefineForClassFields": true,
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"alwaysStrict": true,
"useUnknownInCatchVariables": true
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
I have files:
- src/api/proxy/wms.ts
- src/utils/logger.ts
With wms.ts
having import logger from '#app/utils/logger.js'
, tsx watch
doesn't notice changes in logger.js.
TypeScript 5.4-beta successfully resolves the module, here is an excerpt from tsc --traceResolution
regarding successful resolution of subpath import:
======== Resolving module '#app/utils/logger.js' from 'src/api/proxy/wms.ts'. ========
Explicitly specified module resolution kind: 'NodeNext'.
Resolving in ESM mode with conditions 'import', 'types', 'node'.
'paths' option is specified, looking for a pattern to match module name '#app/utils/logger.js'.
File 'src/api/proxy/package.json' does not exist according to earlier cached lookups.
File 'src/api/package.json' does not exist according to earlier cached lookups.
File 'src/package.json' does not exist according to earlier cached lookups.
File 'package.json' exists according to earlier cached lookups.
Using 'imports' subpath '#app/*' with target './dist/utils/logger.js'.
File 'src/utils/logger.ts' exists - use it as a name resolution result.
Resolving real path for 'src/utils/logger.ts', result 'src/utils/logger.ts'.
======== Module name '#app/utils/logger.js' was successfully resolved to 'src/utils/logger.ts' with Package ID 'my-backend/src/utils/[email protected]'. ========
I think the 'paths' option is specified...
logging is confusing here, as the PR was recently merged and only released in beta, so I assume it is just a relic string in TS. Because I don't have any "paths": ...
declared in tsconfig.json
.
Dunno if this was of any help in the future, but anyway I want to thank you for the great tool and efforts here!
from tsx.
Related Issues (20)
- is there an option to watch html and css files?
- Property not assigned to child class when set by parent HOT 3
- VS Code breakpoint with tsx and Nodejs 20.12.0 does not work HOT 20
- The argument 'methodName' must be a method. Received undefined HOT 7
- Tsx ignores type commonjs in package.json HOT 1
- Add extra files to watch HOT 1
- Environment variables support HOT 5
- Typescript REPL HOT 1
- Multiline input in Typescript REPL
- Feature request: Extend 'tsx watch' for run command on detects file changes HOT 2
- Parse error when using classes and complicated hashbangs
- Script not running when node=21, type="module", watchmode is enabled, is importing from "node:process" and using turborepo HOT 1
- Support `--input-type=ts` HOT 2
- tsx can't run code with endent HOT 3
- Is Bundle / Compile command planned? HOT 1
- Regression with MikroORM introduced with tsx v4.9.1 HOT 2
- Regression in 4.9.1 – Cannot find module (…) Did you mean to import "….js"? HOT 2
- Modules imported dynamically from an absolute path are not loaded/handled by tsx v4.9.1 HOT 3
- 💅 Logo early preview and feedback
- `node:assert`'s `assert.ok(false)` is really slow when using tsx HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tsx.