{"id":1399,"date":"2026-08-03T23:22:54","date_gmt":"2026-08-03T23:22:54","guid":{"rendered":"https:\/\/www.projectimmerse.com\/blog\/?p=1399"},"modified":"2026-08-03T23:27:25","modified_gmt":"2026-08-03T23:27:25","slug":"dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/","title":{"rendered":"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up)"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-1024x1024.png\" alt=\"Laptop displaying a package.json file illustrating the difference between dependencies and devDependencies in a Node.js project.\" class=\"wp-image-1401\" srcset=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-1024x1024.png 1024w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-300x300.png 300w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-150x150.png 150w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-768x768.png 768w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-100x100.png 100w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json.png 1254w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><figcaption class=\"wp-element-caption\">Understanding when packages belong in <code>dependencies<\/code> versus <code>devDependencies<\/code> is one of the easiest ways to avoid frustrating deployment issues.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;ve ever run <code>npm install<\/code> on a fresh clone of a React or Next.js project and thought, &#8220;cool, I have literally no idea why half of these packages are in <code>devDependencies<\/code> and the other half aren&#8217;t&#8221; \u2014 congratulations, you&#8217;re a normal developer. This is one of those things that <em>seems<\/em> obvious until you actually have to explain it, at which point your brain quietly leaves the room.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s fix that. By the end of this article, you&#8217;ll know exactly where a package belongs, why it matters more than you think, and how to stop guessing (or worse, copy-pasting from Stack Overflow and hoping for the best).<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">The Quick Answer<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every <code>package.json<\/code> file has two main buckets for third-party code:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>dependencies<\/code><\/strong> \u2014 packages your app needs to <em>run<\/em>. React, Next.js, your UI library, your API client. If it&#8217;s imported by code that executes when a real user loads your app, it goes here.<\/li>\n\n\n\n<li><strong><code>devDependencies<\/code><\/strong> \u2014 packages you only need while <em>building or developing<\/em> the app. Linters, test runners, type checkers, bundler plugins. Users never see these; your build server does the heavy lifting and then throws them away.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s the whole concept in two sentences. The tricky part is applying it consistently, because a surprising number of packages <em>feel<\/em> like they should be in one bucket when they actually belong in the other. More on that in a second.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why This Distinction Even Exists<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">npm didn&#8217;t add two dependency types just to give you more decisions to second-guess at 11pm. There&#8217;s a real, practical reason: <strong>production installs skip devDependencies entirely.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you (or your hosting platform) run:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">bash<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm install --production\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">or set <code>NODE_ENV=production<\/code> before installing, npm only installs what&#8217;s in <code>dependencies<\/code>. Everything in <code>devDependencies<\/code> \u2014 ESLint, Jest, TypeScript, your Tailwind config tooling \u2014 gets left behind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This matters for a few reasons:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Smaller, faster deploys.<\/strong> Fewer packages to download and install means faster build times and smaller <code>node_modules<\/code> folders on your production server or serverless function.<\/li>\n\n\n\n<li><strong>Smaller attack surface.<\/strong> Fewer installed packages in production means fewer potential vulnerabilities to worry about.<\/li>\n\n\n\n<li><strong>It catches your mistakes before they catch you.<\/strong> If you accidentally rely on a devDependency in code that runs at runtime, a proper production install will fail loudly \u2014 instead of quietly working on your machine and then exploding the moment it hits Vercel.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">That last point is the one that actually bites people. Locally, everything&#8217;s installed, so a misplaced package won&#8217;t cause an error. It&#8217;s only when a clean, production-only install happens that the gap shows up \u2014 usually at the worst possible time, like during a deploy on a Friday afternoon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The One Question That Settles It<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Whenever you&#8217;re not sure where a package goes, ask yourself:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>&#8220;Does this code need to exist when a real user visits my deployed app?&#8221;<\/strong><\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Yes<\/strong> \u2192 <code>dependencies<\/code><\/li>\n\n\n\n<li><strong>No, it only helps me write, check, or build the code<\/strong> \u2192 <code>devDependencies<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what that looks like in an actual Next.js or React <code>package.json<\/code>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">json<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&quot;dependencies&quot;: {\n  &quot;react&quot;: &quot;^18.2.0&quot;,\n  &quot;react-dom&quot;: &quot;^18.2.0&quot;,\n  &quot;next&quot;: &quot;^14.0.0&quot;,\n  &quot;axios&quot;: &quot;^1.6.0&quot;,\n  &quot;zustand&quot;: &quot;^4.4.0&quot;\n},\n&quot;devDependencies&quot;: {\n  &quot;typescript&quot;: &quot;^5.3.0&quot;,\n  &quot;eslint&quot;: &quot;^8.55.0&quot;,\n  &quot;prettier&quot;: &quot;^3.1.0&quot;,\n  &quot;@types\/react&quot;: &quot;^18.2.0&quot;,\n  &quot;@types\/node&quot;: &quot;^20.10.0&quot;,\n  &quot;jest&quot;: &quot;^29.7.0&quot;,\n  &quot;tailwindcss&quot;: &quot;^3.4.0&quot;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">React runs in the browser when your user opens the page, so it&#8217;s a dependency. ESLint runs on your laptop when you save a file, so it&#8217;s a devDependency. Simple enough \u2014 until you hit the packages that live in the gray zone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Gray-Zone Packages That Trip Everyone Up<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-comparison-1024x1024.png\" alt=\"Visual comparison showing which common Node.js, React, and Next.js packages belong in dependencies versus devDependencies within a package.json file.\" class=\"wp-image-1405\" srcset=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-comparison-1024x1024.png 1024w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-comparison-300x300.png 300w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-comparison-150x150.png 150w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-comparison-768x768.png 768w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-comparison-100x100.png 100w, https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-comparison.png 1254w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption class=\"wp-element-caption\">A side-by-side comparison of common packages that belong in <code>dependencies<\/code> versus <code>devDependencies<\/code>, helping developers avoid one of the most common package.json mistakes.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is where most of the &#8220;wait, why is this broken in production&#8221; moments come from. A few repeat offenders:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <code>@types\/*<\/code> packages<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Always devDependencies \u2014 even when the package they describe (like <code>react<\/code>) is a regular dependency. TypeScript types are erased during compilation. By the time your code runs in a browser, the types don&#8217;t exist anymore; they were only ever a development-time safety net.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Tailwind CSS, PostCSS, Autoprefixer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These feel like they belong with your &#8220;app styling,&#8221; so people instinctively drop them in <code>dependencies<\/code>. But they run at <strong>build time<\/strong> to generate a static CSS file. The generated CSS ships to users \u2014 the tools that generated it don&#8217;t. \u2192 <code>devDependencies<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. TypeScript itself<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Even if 100% of your codebase is TypeScript, the compiler is a devDependency. It transforms your <code>.ts<\/code> files into plain JavaScript during the build, then it&#8217;s done. Your production server never touches a <code>.ts<\/code> file directly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Testing libraries<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>jest<\/code>, <code>@testing-library\/react<\/code>, <code>cypress<\/code>, <code>vitest<\/code> \u2014 none of these ship to your users, no matter how much you love your test coverage. \u2192 <code>devDependencies<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Build tooling<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Babel plugins, webpack loaders, bundler config helpers. Next.js hides most of this from you already, but if you&#8217;re adding custom build tooling, it&#8217;s a devDependency.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The pattern across all five: if the package&#8217;s job is to help you <em>produce<\/em> the final code (compile, lint, style, bundle, test), it&#8217;s a devDependency \u2014 even if its output is something your users absolutely depend on.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Mental Model That Actually Sticks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Think of it like baking a cake for a party.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Flour, sugar, eggs, frosting<\/strong> \u2192 these end up <em>in<\/em> the cake. Your guests eat them. That&#8217;s <code>dependencies<\/code>.<\/li>\n\n\n\n<li><strong>Mixing bowls, oven, measuring cups, the recipe card<\/strong> \u2192 these help you <em>make<\/em> the cake, but nobody eats the oven. That&#8217;s <code>devDependencies<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind is the oven. React is the frosting. Nobody at the party wants to bite into your PostCSS config.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Packages Correctly (Without Overthinking It)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The good news: you don&#8217;t have to memorize categories forever. Let npm do it for you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">bash<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n# Adding a runtime package (goes to &quot;dependencies&quot;)\nnpm install axios\n\n# Adding a dev-only tool (goes to &quot;devDependencies&quot;)\nnpm install --save-dev jest\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">The <code>--save-dev<\/code> flag (shorthand: <code>-D<\/code>) is the whole trick. If you always type it consciously instead of running <code>npm install &lt;package&gt;<\/code> on autopilot, you&#8217;ll rarely miscategorize anything. It&#8217;s a two-second decision at install time versus a confusing production bug three weeks later \u2014 an easy trade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re auditing an existing <code>package.json<\/code> and something looks misplaced, you can move it manually. Just cut the line from one object and paste it into the other, then run <code>npm install<\/code> again to make sure your lockfile stays in sync.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Self-Check: Am I About to Mess This Up?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before you commit a new package, run through this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Does this code execute when a user loads the live site? \u2192 <code>dependencies<\/code><\/li>\n\n\n\n<li>Is this only used in scripts, config files, or my editor? \u2192 <code>devDependencies<\/code><\/li>\n\n\n\n<li>Would deleting <code>node_modules<\/code> and running <code>npm install --production<\/code> break my running app without it? \u2192 <code>dependencies<\/code><\/li>\n\n\n\n<li>Does it only break my <em>build<\/em> or <em>lint<\/em> or <em>test<\/em> command? \u2192 <code>devDependencies<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you can answer these four questions, you will basically never mix this up again. It&#8217;s genuinely one of the more forgiving mistakes in software \u2014 nothing catastrophic happens instantly, it just quietly waits to embarrass you during a deploy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why It&#8217;s Worth Getting Right (Even Though &#8220;It Still Works Locally&#8221;)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s tempting to shrug this off since a bloated <code>dependencies<\/code> list doesn&#8217;t break anything on your machine. But it costs you in ways that stack up over time:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Deploy times creep up<\/strong> as unnecessary packages get installed in production.<\/li>\n\n\n\n<li><strong>Bundle analyzers and security scanners<\/strong> often only check <code>dependencies<\/code>, so misplaced dev tools can hide from audits \u2014 or worse, misplaced runtime code can slip past checks meant to catch it.<\/li>\n\n\n\n<li><strong>New teammates get confused<\/strong> reading your <code>package.json<\/code>, since it&#8217;s supposed to double as documentation of what your app actually needs to run.<\/li>\n\n\n\n<li><strong>Platforms like Vercel, Netlify, and most CI pipelines<\/strong> run production-only installs by default, so a misplaced dependency can turn into a real deploy failure, not just a theoretical one.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">The Bottom Line<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>dependencies<\/code> are the ingredients in the cake. <code>devDependencies<\/code> are the kitchen equipment. React, Next.js, and anything your users&#8217; browsers actually execute go in the first bucket. TypeScript, ESLint, Jest, Tailwind&#8217;s build tooling, and your <code>@types<\/code> packages go in the second \u2014 even if it feels wrong to file your favorite CSS framework under &#8220;not real.&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When in doubt, ask if the package needs to exist <em>after<\/em> your build finishes and a real person is looking at your site. If yes, <code>dependencies<\/code>. If it&#8217;s already done its job and gone home by that point, <code>devDependencies<\/code>. Get in the habit of typing <code>--save-dev<\/code> on purpose instead of by accident, and this whole category of bug quietly disappears from your life.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve ever run npm install on a fresh clone of a React or Next.js project and thought, &#8220;cool, I have literally no idea why half of these packages are in devDependencies and the other half aren&#8217;t&#8221; \u2014 congratulations, you&#8217;re a normal developer. This is one of those things that seems obvious until you actually &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-1399","post","type-post","status-publish","format-standard","hentry","category-developer-tips-productivity"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up) - Project Immerse<\/title>\n<meta name=\"description\" content=\"Confused about dependencies vs devDependencies in your React or Next.js package.json? Here&#039;s the simple test to use, plus the common mistakes that break production builds.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up) - Project Immerse\" \/>\n<meta property=\"og:description\" content=\"Confused about dependencies vs devDependencies in your React or Next.js package.json? Here&#039;s the simple test to use, plus the common mistakes that break production builds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Immerse\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-03T23:22:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-03T23:27:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1254\" \/>\n\t<meta property=\"og:image:height\" content=\"1254\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alex Mercer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex Mercer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/\"},\"author\":{\"name\":\"Alex Mercer\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"headline\":\"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up)\",\"datePublished\":\"2026-08-03T23:22:54+00:00\",\"dateModified\":\"2026-08-03T23:27:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/\"},\"wordCount\":1349,\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/dependencies-vs-devdependencies-package-json-1024x1024.png\",\"articleSection\":[\"Developer Tips &amp; Productivity\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/\",\"name\":\"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up) - Project Immerse\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/dependencies-vs-devdependencies-package-json-1024x1024.png\",\"datePublished\":\"2026-08-03T23:22:54+00:00\",\"dateModified\":\"2026-08-03T23:27:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"description\":\"Confused about dependencies vs devDependencies in your React or Next.js package.json? Here's the simple test to use, plus the common mistakes that break production builds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/dependencies-vs-devdependencies-package-json.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/dependencies-vs-devdependencies-package-json.png\",\"width\":1254,\"height\":1254},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\",\"name\":\"Project Immerse\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\",\"name\":\"Alex Mercer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"caption\":\"Alex Mercer\"},\"description\":\"Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.\",\"sameAs\":[\"https:\\\/\\\/www.projectimmerse.com\"],\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/author\\\/projectimmerse\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up) - Project Immerse","description":"Confused about dependencies vs devDependencies in your React or Next.js package.json? Here's the simple test to use, plus the common mistakes that break production builds.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/","og_locale":"en_US","og_type":"article","og_title":"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up) - Project Immerse","og_description":"Confused about dependencies vs devDependencies in your React or Next.js package.json? Here's the simple test to use, plus the common mistakes that break production builds.","og_url":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/","og_site_name":"Project Immerse","article_published_time":"2026-08-03T23:22:54+00:00","article_modified_time":"2026-08-03T23:27:25+00:00","og_image":[{"width":1254,"height":1254,"url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json.png","type":"image\/png"}],"author":"Alex Mercer","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alex Mercer","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/#article","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/"},"author":{"name":"Alex Mercer","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"headline":"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up)","datePublished":"2026-08-03T23:22:54+00:00","dateModified":"2026-08-03T23:27:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/"},"wordCount":1349,"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-1024x1024.png","articleSection":["Developer Tips &amp; Productivity"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/","url":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/","name":"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up) - Project Immerse","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/#primaryimage"},"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json-1024x1024.png","datePublished":"2026-08-03T23:22:54+00:00","dateModified":"2026-08-03T23:27:25+00:00","author":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"description":"Confused about dependencies vs devDependencies in your React or Next.js package.json? Here's the simple test to use, plus the common mistakes that break production builds.","breadcrumb":{"@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/#primaryimage","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/dependencies-vs-devdependencies-package-json.png","width":1254,"height":1254},{"@type":"BreadcrumbList","@id":"https:\/\/www.projectimmerse.com\/blog\/dependencies-vs-devdependencies-in-package-json-the-difference-and-how-to-stop-mixing-them-up\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.projectimmerse.com\/blog\/"},{"@type":"ListItem","position":2,"name":"dependencies vs. devDependencies in package.json: The Difference (And How to Stop Mixing Them Up)"}]},{"@type":"WebSite","@id":"https:\/\/www.projectimmerse.com\/blog\/#website","url":"https:\/\/www.projectimmerse.com\/blog\/","name":"Project Immerse","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.projectimmerse.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5","name":"Alex Mercer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","caption":"Alex Mercer"},"description":"Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.","sameAs":["https:\/\/www.projectimmerse.com"],"url":"https:\/\/www.projectimmerse.com\/blog\/author\/projectimmerse\/"}]}},"_links":{"self":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/1399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/comments?post=1399"}],"version-history":[{"count":5,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/1399\/revisions"}],"predecessor-version":[{"id":1407,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/1399\/revisions\/1407"}],"wp:attachment":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media?parent=1399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/categories?post=1399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/tags?post=1399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}