matrix-org / matrix-org/matrix-js-sdk
Simplify use as a git dependency in create-react-app
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.2k
- Forks
- 704
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 40
Description
Installing matrix-js-sdk as a git dependency (e.g. for a fork of the repo) in certain browser dev environments – like create-react-app – breaks builds. (I don't think this issue is limited to create-react-app, but that is what I'm using.)
Repro
I can create a repo for this if it's helpful, but I'd prefer not to keep one around on my Github account.
- Create a new create-react-app project with TypeScript enabled, using yarn 1 as package manager:
yarn create react-app matrix-js-sdk-git-dep-bug --template typescript - Add matrix-js-sdk as git URL dependency:
yarn add matrix-js-sdk@matrix-org/matrix-js-sdk yarn start
Project should build, but it has the following errors: https://gist.github.com/davidisaaclee/65a6d1a93b594b4d5e29fa3f352125a2
I think these are the causes:
- Update: Fixed in https://github.com/matrix-org/matrix-js-sdk/pull/3051
matrix-js-sdk'spackage.json#browseris set to./lib/browser-index.ts, which afaict is not actually created byyarn build(it appears to be an intermediate artifact ofyarn build:compile-web); so when looking for abrowserentrypoint, one is not found (and somainis likely used, which causes (1) errors sincesrc/index.tsrequires transpilation but is not being transpiled, and (2) the kinds of errors thatbrowser-indexwas created to solve, like undeclared global fields). matrix-js-sdkuses theprepublishOnlyhook to transpile and emit type declarations. This hook is not called for dependencies specified using git URLs (https://github.com/npm/npm/issues/3055); so installing via git URL dependency never creates these necessary files.
I've solved these problems for my use case by doing the following (links to actual code changes included):
Update: Fixed in https://github.com/matrix-org/matrix-js-sdk/pull/3051Not fixed, see my comment below. Setpackage.json#browserto./lib/browser-index.js, and add apackage.json#typesfield pointing to./lib/browser-index.d.ts. https://github.com/matrix-org/matrix-js-sdk/commit/5f9cb34a8307b64eba6d4ad5d31da855b2dd4875 https://github.com/matrix-org/matrix-js-sdk/commit/ef4f9f13c2f710dfe0ec660b4be7b2c7f1263782
- I tried using
./dist/browser-matrix.jsasbrowser, but with that,matrix-js-sdk's module at runtime was empty (i.e.import * as matrix from 'matrix-js-sdk'yieldedObject.keys(matrix).length === 0; same for default import) - I see that element-web uses
./src/browser-index.ts(by way ofmatrix_src_browser), and passesmatrix-js-sdkthrough Babel using its Webpack config. This isn't worth the extra configuration for my use case (especially difficult for create-react-app!); and I think the majority of people will not want to special-casematrix-js-sdkin their configs. - afaict,
package.json#typesdoes not have a way to export browser/Node-specific typings (a lamain/browser). I am not using my fork in any Node projects, so this isn't an issue for me. I'm not sure if this would cause an issue for Node projects.
- Update: looks like I made a typo in the linked commit. I still think using
prepackis a good approach. I'll address it if this issue gets any kind of traction. Change theprepublishOnlyscript to run instead atprepack(i.e. deleteprepublishOnlyhook inpackage.json, add"prepack": "yarn build") https://github.com/matrix-org/matrix-js-sdk/commit/972f256eb7b7343c13f66ec124e8a54d8b699260
prepareis another lifecycle hook that people use for this, but is not supported by Yarn, which I am using- I don't know all the places where
prepackwill run. It definitely runs when installing all dependencies inmatrix-js-sdk(e.g. by callingyarnin the mjs project dir); that stinks, since this is unnecessary andyarn buildcan take some time.
I'd be happy to turn the commits above into one or two PRs, but I thought I'd write this issue first in case there are gotchas or alternatives I'm missing. (For example, I see that some of the mentioned package.json fields are being manipulated by release.sh.)
Thanks for the useful SDK!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with package.json, especially the browser, types, and lifecycle-script fields, then inspect release.sh as noted in the issue. Reproduce the failure with the yarn 1 create-react-app TypeScript commands and compare the resulting errors with the linked gist. Done means a matrix-js-sdk git dependency builds and runs in that environment without requiring project-specific configuration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100