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
  • 11,839
  • 9
  • 68
  • 137
  • 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,696
  • 3
  • 27
  • 39
  • 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
  • 3,661
  • 31
  • 35