You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 ?
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 !
The text was updated successfully, but these errors were encountered:
advl
changed the title
eagerEsModules, ESM Modules, and missing file extensions
babel eagerEsModules, ESM Modules, and missing file extensions
Jan 29, 2024
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 theeagerEsModule
option in the compiler and the babel plugin. The goal is to usemodules:false
in@babel/preset-env
to only load very conservatively TS into ESM and not apply code transforms aside from therelay
babel plugin. I have also enabled"type":"module"
in package.json.I have found that while
eagerEsModule
does get rid of therequire
calls, changed toimport
statements, I stumble on the following error, since the compiled relay code imports.graphql
files instead of.graphql.js
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 provideimport _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 !
The text was updated successfully, but these errors were encountered: