TL;DR;
If you are writing a library/package, make sure you will update your dependencies in time before pinning all dependencies. Otherwise, issues may be caused.
You might have used tools like renovate to manage dependencies of your GitHub repository. The first thing it will do is to pin your dependencies.
Pinning dependencies can:
Avoid potential bugs caused by upstream package/library updates. (Such bugs are still possible because upstream packages may not have pinned their dependencies.)
Help your collaborators or people who are interested in your project to reproduce your dev environment. (It will be even sweeter if combined with docker.)
However, it can also cause issues sometimes. And I am going to share with you a recent experience.
I am doing a Google Map project, and I have two repositories for this. (I tried lerna, but failed to get everything to work well and had to give up.)
One is a React wrapper around Google Map API:
lucifer1004
/
react-google-map
Easier Google Map Integration for React projects.
React Google Map
Easier Google Map Integration for React projects.
NOTE
This project has been moved to @googlemap-react.
Why a new package
There has been similar packages such as tomchentw/react-google-maps, google-map-react/google-map-react, fullstackreact/google-maps-react, so why bother writing a new library?
The aim is to make an easier-to-use Google Map library for React users,
empowered by React's latest features (React >= 16.8.0 is required) and
TypeScript.
What is different
- Component position is free (generally)
- Direct access to Google Map objects
- More uniform API
- Type safe
Example usage
Prerequisites
- npm or yarn
yarn add @lucifer1004/react-google-map
# Or you can use
npm install --save @lucifer1004/react-google-map
- a valid Google Map API key (to replace the place holder in the code snippet below)
import {
GoogleMapProvider,
HeatMap,
InfoWindow,
MapBox,
Marker,
Polygon,
} from '@lucifer1004/react-google-map'
// In your component
return (…The other is the application:
lucifer1004
/
boycott
A map app.
Boycott
This is a Udacity project. It is statically deployed here via Now.
To run it locally
git clone https://github.com/lucifer1004/boycott
cd boycott
yarn install
yarn start
You can then visit it at localhost:3000
Features
- Search for places using Yelp Fusion API (
cors-anywhereis used to address the CORS issue) - Filter options: All/Open/High Rating/Low Price
- Use of Google Map API is via
@googlemap-react/core, which is a React wrapper for Google Map written by myself.
For both repositories, the dependencies are pinned. One day, to my surprise, all my React hooks failed to work. Such error messages kept occurring:
React Hooks Error: Hooks can only be called inside the body of a function component...
They provided no useful information at all! I WAS calling hooks inside the body of functional components.
After a tough search, I finally found something inspiring. This error can occur when there is React version inconsistency. I then checked package.json of both the library repo and the application repo, and found that the library was using React 16.8.1 while the application was using React 16.8.2. I quickly updated my library to use React 16.8.2, and then the errors went away.
Now, I have moved react and react-dom to peerDependencies and relaxed the version restrictions to ^16.8.2. I think this is enough to prevent similar issues.
What I have learned from this experience is that something GOOD (pinning dependencies) is not always RIGHT. It DEPENDS! Dependency pinning is GREAT for an application. However, you should be more CAREFUL when writing a library/package.
Top comments (0)