6

I want to contribute to an open source React Component and I'd like to use a fork of the project in my webpack bundle.

I am using yarn and I tried to install my fork using 

yarn add github:Startouf/react-coverflow

However, when webpack tries to compile my bundle, it raises weird errors

ERROR in ./~/react-coverflow/main.js
Module not found: Error: Can't resolve './dist/react-coverflow' in '/Users/Cyril/dev/MyApp/client/node_modules/react-coverflow'

Did I miss something ?

EDIT : when I use the released package from npm, the node module folder contains

LICENSE     README.md   dist        main.js     package.json

When I use my fork, it seems like the project isn't compiled and contains

LICENSE         README.md       package.json        src         webpack.config.js
Makefile        main.js         site            test

Seems like I'm missing a step... I though doing yarn add with a github fork would automatically make a release but seems like I'm wrong ?

Cyril Duchon-Doris
  • 12,964
  • 9
  • 77
  • 164
  • I guess the fork is missing something. Try checking and opening issues. – Tatsuyuki Ishi Apr 14 '17 at 09:21
  • @TatsuyukiIshi Even on a fork of the same project without additional commits it doesn't work (and of course the main repo works fine) – Cyril Duchon-Doris Apr 14 '17 at 09:25
  • This is caused by a wrongly configured repo on Github. It is missing a `.npmignore` or `package.json#files`. See [my answer](https://stackoverflow.com/a/57829896/4612476) (and the [full version](https://stackoverflow.com/a/57829251/4612476) on a related question) for more details. – Cameron Tacklind May 29 '21 at 01:41

2 Answers2

4

Unfortunately, using a repository directly as source can result in execution error. This is because it's not bundled at all, while the package expects an prebuilt version existing in dist. The bundling scripts are often executed before publishing releases to npm.

Some workarounds are:

  • execute the prepublish step in the target directory (this depends on what the project uses)
  • of course, using the published version is the best. create your own package on npm and upload it.

References: npm issue

Tatsuyuki Ishi
  • 3,883
  • 3
  • 29
  • 41
  • Thanks ! I was just editing to add this info, I will have a look at your link. If it's just for debugging it's okay for me to run scripts locally, but then I'll want to keep my own fork until the PR passes, so I guess I'll have to release my package as you say if I want to be able to use it in production :'( – Cyril Duchon-Doris Apr 14 '17 at 09:34
  • Could you just elaborate on the steps required for prepublishing ? I've tried to cd in the node_module directory, run `yarn` and `yarn run prerelease` that was in the package.json. I'm currently stuck at building the project since it uses annotations and I apparently don't have the preprocessor, but I wanted to check I was doing things right – Cyril Duchon-Doris Apr 14 '17 at 09:45
  • `prerelease` should do the job. What's your current error? – Tatsuyuki Ishi Apr 14 '17 at 09:48
  • I was actually trying to build the prerelease directly inside a node_module folder of one of my webpack apps. Didn't work there (complaining about annotations from Radium) but when I tried to clone the repo in a separate folder, and run yarn it worked perfect. So I guess I'll just make the changes on the new directory, and publish it when the component looks ready – Cyril Duchon-Doris Apr 14 '17 at 10:35
  • Also, just a final note for future readers, I ended up publishing my new packages with npm since yarn's publish was broken for me (cf https://github.com/yarnpkg/yarn/issues/3145) – Cyril Duchon-Doris Apr 19 '17 at 16:46
  • A good solution these days is to just add "prepare": "npm run build" to your scripts section. This will get run whenever the package is install from a git URL. See: - https://github.com/npm/npm/issues/3055#issuecomment-304698029 - https://docs.npmjs.com/misc/scripts, - https://stackoverflow.com/a/50490565/47185 – Tyler Rick Aug 27 '19 at 23:13
0

The package should be updated to include a prepare step.

A prepare step does exactly what you want in all cases.

https://stackoverflow.com/a/57503862/4612476

You can add the prepare script in package.json#scripts yourself that runs the build. Npm and Yarn will then automatically run the prepare script on install directly from GitHub. You can then treat it like any other package and it will always just work™.

Don't forget the package.json#files section. See the linked answer for more details.

Cameron Tacklind
  • 5,764
  • 1
  • 36
  • 45
  • Not sure why, but this didn't work for me. I had to add an install step instead. – texuf Jul 01 '22 at 18:25
  • Can you elaborate on what didn't work? Did you add the `files` section? – Cameron Tacklind Jul 01 '22 at 20:03
  • Sure, running yarn install when you specify your own fork as the repository version, i.e. '"some-package": "mygitusername/some-package#my-branch-withfix"` doesn't run prepare. Prepare is run before uploading to npm. Install _is_ run though. Caveat I am new at this, so maybe I'm missing something. – texuf Jul 02 '22 at 00:12
  • Hmmmm, it looks like Yarn [decided to drop support for `prepare`](https://github.com/yarnpkg/berry/issues/2305#issuecomment-753468942). It looks like they want you to [use `prepack` instead](https://yarnpkg.com/advanced/lifecycle-scripts). This should work in Npm too. That might be a more portable middle ground than `prepare`. – Cameron Tacklind Jul 02 '22 at 01:02
  • Scratch that. `prepack` does not work with Npm. I'm not sure what it takes to get this to work with current versions of Yarn... – Cameron Tacklind Jul 02 '22 at 06:38
  • Wow, I'm not even sure how to consistently get Yarn to run the `prepack` script... Yarn 2/3 have added a bunch of confusion here. – Cameron Tacklind Jul 06 '22 at 02:28