-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: bundle packages to be Ecmascript modules (T-186) #64
Conversation
|
d8007d4
to
8fd1dad
Compare
Link T-186 |
<Link to={`/profile/handle/${profile.handle}`}> | ||
<ProfilePicture picture={profile.picture} /> | ||
</Link> | ||
<ProfilePicture picture={profile.picture} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is no support, for now, to provide route param
with the handle so it was pointing to a nonexisting route.
Thank you for the exhaustive explanation! I'll provide a proper code review shortly. |
There is one thing I forgot to include, the generation of |
@@ -3,7 +3,7 @@ | |||
"target": "ESNext", | |||
"useDefineForClassFields": true, | |||
"lib": ["DOM", "DOM.Iterable", "ESNext"], | |||
"allowJs": false, | |||
"allowJs": true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this intentional?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All changes to the package.json
in src/packages
are intentional, this one is just making everything in sync across all tsconfig
.
Not a blocker. Do we still need the separation between Or is that left as precursor for a |
@cesarenaldi the |
testEnvironment: 'node', | ||
testPathIgnorePatterns: ['/node_modules/', '/dist/'], | ||
transformIgnorePatterns: [`/node_modules/(?!@lens-protocol/*)`], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I assume this was previously working cause it was loading the CJS files.
Jest support for ESM confuses me all the times I look into it. What would happen if we were to keep ts-jest
preset and add NODE_OPTIONS=--experimental-vm-modules
to the Jest script?
@@ -12,7 +12,7 @@ import { | |||
} from '@lens-protocol/domain/use-cases/transactions'; | |||
import { assertNever, invariant } from '@lens-protocol/shared-kernel'; | |||
import { IStorage } from '@lens-protocol/storage'; | |||
import differenceBy from 'lodash/differenceBy'; | |||
import differenceBy from 'lodash/differenceBy.js'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Out of curiosity, are you aware of any plan for Lodash to have proper exports
configuration?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is lodash-es
that's under the hood using es
exports, maybe it's worth to migrate at some point (or completely remove the use of lodash given it's used in just a couple of places)
Great work! Thank you for looking into this annoying issue. |
# Conflicts: # examples/web-wagmi/src/publications/components/PublicationCard.tsx
The current support of ESM modules seems to be inconsistent and some of the libraries still don’t provide proper support.
All major bundlers support ESM but also on top of that provide good patching when a module is not proper ESM modules.
The most strict implementation has the Node.js which is the cause reason why next.js example fails.
(For .e.g when no
package.json#exports
is present it will switch back and usepackage.json#module
which is the case with apollo client (apollographql/apollo-feature-requests#287 and apollographql/apollo-client#9890) but node.js doesn't supportpackage.json#modules
and therefore converts module to CommonJS which is different than what bundlers doo (see https://nodejs.org/api/esm.html#commonjs-namespaces))I had also a look if we can get rid of
folder packages
(the one with justpackage.json
files) but unfortunately, we have at least 2 blockers:package.json#exports
until we switch our packages to usemoduleResolution:
node nextwhich on the other hand would require us to add
.js` to all relative imports (see types field in package.json exports doesn't work microsoft/TypeScript#51862 (comment))package.json#exports
(see Feature: support new package.json exports field facebook/metro#670)I tried to get rid also of
mocks
folders as they are importingdevDependencies
which is somethingtsup
does bundle by default (and we want to still keepimport
and use the single version ofjest
)I have considered using
project references
or importing directlysrc
files but without any quick success:ts-jest
(see Tests fail when using TypeScript project references kulshekhar/ts-jest#1648)src
imports won’t work causets-jest
is usingpackage.json.exports
wheremocks
that point directly tosrc
should not be present as we omitsrc
folder when publishing packageSo for now we just make sure
tsup
doesn't bundledevDependencies
by overridingexternal
config.The good news is that we can drop
CommonJS
support as all bundlers seem to properly handle ES imports/exports.jest
as it only supportsimports/exports
when running inESM modules
mode (https://jestjs.io/docs/ecmascript-modules). We can’t enable ESM for jest until apollo fixes Types are broken withcompilerOptions.module
set tonodenext
due to imports missing file extensions apollographql/apollo-client#9890. So for now I’m just transpiling@lens-protocol
packages by usingtransformIgnorePatterns
injest.config.js
.So to summarise:
@apollo/client
fixes the ESM modules support Next.js example won’t work without either@lens-protocol
package (the easiest and recommended)node.js
(which basically means no @lens-protocol imports inside files that are imported during SSR