Is it okay to make "OpenZeppelin contracts" a dev dependency in my React app?

Question

I am trying to reduce the bundle size of a React application. I deploy a smart contract during the project build pipeline. The contract needs to be inside the project folder of the React app so that it can access the contract ABI. So I have this in the dependencies:

"dependencies": {
  ...
  "@openzeppelin/contracts": "^4.3.2",
  ...
}

If I move this into devDependencies, my Solidity smart contract (^0.8.11 in case it matters) still compiles and deploys with yarn hardhat run path/to/deploy.js. I'm worried that maybe features from OpenZeppelin might not work correctly though. Their documentation says to run $ npm install @openzeppelin/contracts, without --save-dev or -D.

I was just wondering, why would they say to make it a non-devDependency if everything works fine as a devDependency? Perhaps it actually doesn't work as intended, and I just don't see Ownable not working. Does anyone know if I can safely place the OpenZeppelin dependency in devDependencies without unforeseen consequences?

Thanks for your help.

Answer 1

Short answer

It's probably safe. It depends on how you structured your contract build step, but odds are you'll be fine.

Long answer

The question really boils down to "what's the difference between dependencies and devDependencies?" This answer does a good job at explaining the difference, but I'll highlight the important bits and explain how they relate to your question.

dependencies are always installed when you install your package, while devDependencies aren't always installed. There are two common cases where devDependencies are not installed: (1) when installing your package from an external location (e.g. in another package or remotely), (2) when installing your package (in any case) with --production or NODE_ENV=production — the production environment variable is often set by frameworks at deployment.

So what does that mean for @openzeppelin/contracts? Well, if you are only compiling your contracts locally or if your compilation step only happens as part of your dev tooling then you probably don't need to worry about devDependencies not being installed (unless you're doing something funky). If your contract compilation step is part of your CI/CD, then you might need to worry: you should check what environment variables are set; odds are that you still won't have any problems though. If you're compiling you're contracts at runtime on your deployment platform, then you will probably run into issues.

But it might not matter (if you're using Webpack or similar)

Check out this blog post, devDependencies vs dependencies will probably not affect the size of your production build. You're probably using Webpack or a similar bundler to build your project, which will automatically ignore any dependencies that aren't actually required at runtime.