facebook / facebook/relay

babel eagerEsModules, ESM Modules, and missing file extensions

Open
#4,606 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
Rust
Stars
19k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

Hi !

I working to make a collection of react/relay components a pure ES package to be published on npm. I have figured out that, to remove the `require` calls in the generated relay queries/artifacts with babel, I should use the `eagerEsModule` option in the compiler and the babel plugin. The goal is to use `modules:false` in `@babel/preset-env` to only load very conservatively TS into ESM and not apply code transforms aside from the `relay` babel plugin. I have also enabled `"type":"module"` in package.json.

I have found that while `eagerEsModule` does get rid of the `require` calls, changed to `import` statements, I stumble on the following error, since the compiled relay code imports `.graphql` files instead of `.graphql.js`

```
Module not found: Error: Can't resolve './__generated__/ViewerProfileQuery.graphql' in '/front/packages/design-system/dist/ui/app.base/ViewerProfile'
Did you mean 'ViewerProfileQuery.graphql.js'?
BREAKING CHANGE: The request './__generated__/ViewerProfileQuery.graphql' 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.
```

This is the code generated by the compiler :

`import _ViewerProfileQuery from "./__generated__/ViewerProfileQuery.graphql"; `

I believe that, to comply with the ES Module specification, the `eagerEsModules` option should instead provide `import _ViewerProfileQuery from "./__generated__/ViewerProfileQuery.graphql.js"; `, or at least have an additional option to append a file extension. Not being so is painful, and makes is necessary to use another babel/webpack plugin or script to comply with the ES Module definition. I would love to hear your thoughts on that - also if I'm missing anything on my end to make that build work out. If I'm not mistaken, is this a change/feature that could be considered ?

For the past months, to resolve this issue I have been using a fork of https://github.com/silane/babel-plugin-replace-import-extension to manage that a compile time, but I believe it should not be necessary.

Finally, I would also like to bring to discussion a potential need for more documentation about the thinking behind eagerEsModules and its usage.

Thank you for the great library and work !

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.