{"record":{"id":"204042cbfec34a17","repo":"gatsbyjs/gatsby","slug":"babel-plugin-styled-components-is-not-installed","errorCode":null,"errorMessage":"'babel-plugin-styled-components' is not installed which is needed by plugin 'gatsby-plugin-styled-components'","messagePattern":"'babel-plugin-styled-components' is not installed which is needed by plugin 'gatsby-plugin-styled-components'","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/gatsby-plugin-styled-components/src/gatsby-node.js","lineNumber":5,"sourceCode":"// Add Babel plugin\ntry {\n  require.resolve(`babel-plugin-styled-components`)\n} catch (e) {\n  throw new Error(\n    `'babel-plugin-styled-components' is not installed which is needed by plugin 'gatsby-plugin-styled-components'`\n  )\n}\n\nexports.pluginOptionsSchema = ({ Joi }) =>\n  Joi.object({\n    displayName: Joi.boolean()\n      .default(true)\n      .description(\n        `This option enhances the attached CSS class name on each component with richer output to help identify your components in the DOM without React DevTools. In your page source you'll see: <button class=\"Button-asdf123 asdf123\" /> instead of just <button class=\"asdf123\" />`\n      ),\n    fileName: Joi.boolean()\n      .default(true)\n      .description(`Prefix the displayName of a component with the filename.`),\n    minify: Joi.boolean()\n      .default(true)\n      .description(`Remove the whitespace from the CSS.`),\n    namespace: Joi.string()","sourceCodeStart":1,"sourceCodeEnd":23,"githubUrl":"https://github.com/gatsbyjs/gatsby/blob/8b06340921ffdf23125a365b9c9923690cb62ce6/packages/gatsby-plugin-styled-components/src/gatsby-node.js#L1-L23","documentation":"Thrown at plugin load time (gatsby-node.js top-level) by gatsby-plugin-styled-components when require.resolve('babel-plugin-styled-components') fails, meaning the peer dependency babel-plugin-styled-components is not installed in node_modules. The plugin needs the Babel plugin to transform styled-components at compile time.","triggerScenarios":"require.resolve() throws MODULE_NOT_FOUND when the package is absent; the catch converts it into this descriptive error. This happens the moment gatsby loads the plugin, before any build step.","commonSituations":"User installed gatsby-plugin-styled-components but forgot the peer dependency babel-plugin-styled-components, used npm install without --save, or has a monorepo where the dependency is hoisted incorrectly.","solutions":["Install the missing peer dependency: npm install babel-plugin-styled-components.","If using yarn workspaces or a monorepo, ensure babel-plugin-styled-components is resolvable from the package that uses the plugin.","Delete node_modules and lockfile, then reinstall to fix hoisting issues.","Verify styled-components itself is also installed as a dependency."],"exampleFix":"# before: only gatsby-plugin-styled-components installed\nnpm install gatsby-plugin-styled-components\n# after: install the peer dependency too\nnpm install gatsby-plugin-styled-components babel-plugin-styled-components styled-components","handlingStrategy":"validation","validationCode":"// Pre-build check for peer dependencies\nconst { execSync } = require('child_process')\ntry {\n  execSync('require.resolve(\"babel-plugin-styled-components\")', { stdio: 'pipe', cwd: process.cwd() })\n} catch {\n  console.error('Run: npm install babel-plugin-styled-components styled-components')\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Install all peer dependencies listed in the plugin's package.json.","Use npm ls to verify peer dependencies are resolvable.","Add a postinstall script that checks for required peer deps in CI."],"tags":["gatsby","styled-components","peer-dependency","missing-module","babel"],"backgroundTag":null,"analyzedSha":"8b06340921ffdf23125a365b9c9923690cb62ce6","analyzedAt":"2026-08-13T02:36:21.405Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}