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 ?
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
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.
Related
I'm working on an NPM package right now.
The main code for the package (repo/src/maincode.js) has a few dev dependencies and a few dependencies needed to run it. When the user installs the npm package (through npm i) these dependencies will need be installed.
Now, that being said, I also want to create a react project that showcases this npm package, and have it live in the same repo, in an examples directory (repo/examples/react/app.js). This react app may have its own dependencies and dev dependencies, but I really don't want all of these to be forced onto the user when they're installing my npm package just to use in their projects.
How might I go about solving this problem? Is there a way to create a set of dependencies that are only installed if you are running a particular script, or running example code ?
You can give the examples directory its own package.json file and instruct folks who want to run the examples to cd into the examples directory and run npm i there. Any code in the examples directory that imports a module will look in its own node_modules before checking the node_modules in the parent directory.
The MarkoJS examples repository takes this approach and even makes it more granular. Instead of having a single package.json for the examples directory, there is a package.json for each separate example.
If you want, you can create a helper script in the main package.json for the user so they can do something like npm run build-examples and it will do the npm install for them as part of the process.
I was running my project finely, but I merge my code with other which contain a package called react-modal, after that my code doesn't work. I revert that code from my project, but it doesn't work, I can't even run my project. "cannot read properties of undefined" error is occuring. I upgrade all my packages like webpack, webpack cli etc, but it doesn't helps. What I need to do to run my project?
Well you can do two things here.
First to revert your code back to your latest code before merge.
Run the below command to delete Node_modules npm prune --production
and then run npm install and then build your project.
When I run my Jenkins build for my React Native project it fails with the following errors:
Unable to resolve module `reactotron-core-client` from `/Users/nfib/Jenkins/Jenkins-Workspaces/ENGA/ENGAL/node_modules/reactotron-redux/dist/index.js`: Module does not exist in the module map
Execution failed for task ':app:bundleDevReleaseJsAndAssets'.
I followed the recommended rm -rf node_modules && npm install but I am not exactly sure that this would help since it seems to me like its a generic solution from the npm team.
React-Native version: 0.53.3 with "reactotron-react-native": "3.5.0", "reactotron-redux": "3.1.0",
Has anyone had similar issues to this? How can I ensure this does not continue to happen?
The issue is your Jenkins build server is unable to locate the reactotron-core-client module which is necessary to complete your Jenkins build. You can see this from your stack trace:
Unable to resolve module reactotron-core-client
The recommended solution from the npm team of:
rm -rf node_modules && npm install
is a generic solution because this command will remove your previous node_modules directory containing your project's dependencies and then reinstall the listed dependencies within in your project's package.json file. This may resolve issues stemming from your lock file as well as versioning issues if npm has been updated on your build server.
This solution may resolve your issue if all of your project's required libraries are listed within your package.json file. However, if the reactotron-core-client library isn't listed as a required dependency within your package.json file this problem will persist moving forward. Perhaps you could try the following:
npm i --save reactotron-core-client
as this will save and install the reactotron-core-client dependency for your project. By save I mean list this library as dependency within your package.json file.
Ideally, moving forward your best bet is to keep your package.json file up-to-date with your project's dependencies as well as installing dependencies prior to attempting a Jenkins build.
Hopefully that helps!
For react-admin-demo is it compulsory to do complete build of react-admin.
As per documentation it goes through clumsy make process.
Have anybody installed the folder itself by just npm install and run?
Any hints on how that can be simplified, to fork and create my own project?
Reference: https://github.com/marmelab/react-admin/tree/master/examples/demo
This is a mono repository which includes many packages. It uses learn and yarn workspaces. You'll have to use yarn.
There are several scripts inside the main package.json file which can help you start contributing without make. Each package inside packages can be built by running yarn build inside its folder.
To build all packages in one command, you can run ./node_modules/.bin/lerna run build inside the root folder.
First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.