Comments (11)
Here's how you can migrate your Typescript + Node application from commonjs to ESM:
- package.json: Add top-level key pair
"type": "module"
- tsconfig.json: Set
"module": "Node16"
and"moduleResolution": "Node16"
("target" can stay as "EsNext") - code: Add .js extensions to all of your local module imports. For example, change
import x from "./x"
toimport x from "./x.js"
. Don't try to get .ts extension to work, it's not worth it. - code: Add "node:" prefix to Node stdlin imports like
import stream from "node:stream"
. (not actually required since TS already knows how to resolve them) - quirk: a lot of major libraries don't let you destructure their imports anymore once you're using ESM. one example is
pg
(node-postgres). you have to changeimport {Client} from "pg"
toimport pg from "pg"
and then usepg.Client
in your code. you also may need to change some library usage formfoo(x)
tofoo.default(x)
.
I think that's it. That last step is most of the pain but if you're lucky it only affects a couple libraries you're using.
If you wonder why your Node project needs to be forced to use ESM even though everything on NPM supports commonjs except this one library, you're not alone. ;)
from graphql-request.
This poll might be relevant for you #863
from graphql-request.
Ok, so if I set "type":"module"
in package.json it works.
Everything ELSE breaks though... π
Is there any way to make "type":"module"
not a requirement? π€
from graphql-request.
@tofsjonas unfortunately not, this is an ESM project. Are you stuck in the CJS world? https://github.com/jasonkuhrt/graphql-request?tab=readme-ov-file#typescript-setup
from graphql-request.
@tofsjonas if you use "moduleResolution": "bundler"
in .tsconfig.json
you won't have to add file extensions
https://www.typescriptlang.org/tsconfig/#moduleResolution
I've gotten that far updating my project, now trying to get Jest working with ESM.. So I agree this brings a challenge for some established projects.
from graphql-request.
Eventually this combination worked from me:
tsconfig.json
{
"compilerOptions": {
"lib": ["ES2019"],
"module": "ES6",
"target": "ES6",
"esModuleInterop": true,
"moduleResolution": "bundler",
}
}
from graphql-request.
Haha, well, I wish I wasn't.
The repo I shared was a completely fresh nest.js project. (Sure, nest.js doesn't have as many downloads as graphql-request, but it's still a significant package)
If I add "type":"module"
to this tiny, tiny hello-world project I get
(In my actual project, I have hundreds of files with thousands of imports.)
To fix it I have to go into every single file that imports from another file and alter
import { AppService } from './app.service';
to
import { AppService } from './app.service.js';
Either that or figure out some bundler magic with babel or what have you.
It would be so, so very nice not to have to do that... π₯ΊπΆ
from graphql-request.
"moduleResolution": "bundler"
fixes that particular problem, thanks for that (I was sure I had tried that already, but I guess I messed it up somehow)
Now I just have to get the ci pipeline to work again. But I guess that can wait until Monday..
Thank you both for your time! π
from graphql-request.
Er, I take it back.
When using "moduleResolution": "bundler"
I didn't get any errors when running linting and tsc, so I moved on with my life. But when I tried to actually run the project I got the same error as before
Cannot find module '/Users/jonas/graphql-request-test/dist/app.module'
imported from /Users/jonas/graphql-request-test/dist/main.js
If I add .js
to the import it works as expected, but I can't do that in my actual project π
from graphql-request.
could be a good lightweight library, shame
from graphql-request.
Going to lock this issue now to keep my notification noise down. If you have comments about the library you can leave that in the discussions forum. There is also a poll I'm looking at occasionally to help gauge the impact of not supporting CJS linked to above. Sorry for users feeling the pain of CJS/ESM. Ultimately the way out of this is everyone dropping support for CJS and users upgrading their projects. Our Python 2/3 moment.
from graphql-request.
Related Issues (20)
- not able to process errorPolicy
- error TS2307 when upgraded to version 7.1.0 HOT 1
- Allow to specify fetch implementation HOT 2
- IE11 compatibility HOT 1
- Prefill generated client endpoint when possible
- Add support for document batches
- Finish Graffle documentation
- Polish Roundup
- Make orThrow methods come from an extension
- responseMiddleware isn't a middleware HOT 2
- Socket hang up error with Node 20 on second request
- All examples produce a 404 not found error HOT 1
- envelope response optional if errors in envelope
- Randomly generate names
- Issue with types since version 7.0.1 HOT 1
- Is `responseMiddleware` not a part of the `.request` flow? HOT 1
- The query not have an operationName HOT 1
- I can`t import the library in latest version HOT 2
- Support TypedDocumentString HOT 1
- ClientError not recieving errors from response HOT 1
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 graphql-request.