Parcel: Cannot resolve dependency 'react' from 'styled-components'

[StevenLangbroek]

🐛 bug report

When I import anything from styled-components, I get this error:

/Users/stevenlangbroek/Code/[redacted]/node_modules/styled-components/dist/styled-components.browser.esm.js:2:62: Cannot resolve dependency 'react'
  1 | import hyphenate from 'fbjs/lib/hyphenateStyleName';
> 2 | import React, { cloneElement, Component, createElement } from 'react';
    |                                                               ^
  3 | import Stylis from 'stylis';
  4 | import _insertRulePlugin from 'stylis-rule-sheet';
  5 | import PropTypes from 'prop-types';

This is my package.json:

{
  "name": "calculator",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel ./index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "@types/react": "^16.4.13",
    "@types/react-dom": "^16.0.7",
    "parcel-bundler": "^1.9.7",
    "parcel-plugin-typescript": "^1.0.0",
    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.11.0",
    "tslint-config-prettier": "^1.15.0",
    "tslint-react": "^3.6.0",
    "typescript": "^2.9.2"
  }
}

Here's my tsconfig.json, although I don't think it's a typescript issue:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": false,
    "jsx": "react",
    "lib": ["dom", "es2015"],
    "allowSyntheticDefaultImports": true
  }
}

I'm not using babel (cause typescript). My app (I'm just scaffolding at this point) works fine as soon as I drop my styled-components import:

import * as React from 'react'
import { ThemeProvider } from 'styled-components'

🤔 Expected Behavior

Not... break?

😯 Current Behavior

Break?

[DeMoorJasper]

Do you have react installed?

Perhaps try clearing the cache and re-populating node_modules (remove node_modules and run npm install) although that shouldn't change anything.

[StevenLangbroek]

@DeMoorJasper react is in the package.json I pasted above, and so yes I obviously double-checked whether it's in my node_modules, and I tried clearing the cache a couple of times as well (I also loosened up my tsconfig.json and cleared cache in the interim).

[DeMoorJasper]

But styled-components is not a dependency according to your pkg.json? So probably a good start to install that first

[DeMoorJasper]

If that doesn't work and you can create a minimal repro, I wouldn't mind fiddling around with it for a bit.

[StevenLangbroek]

But styled-components is not a dependency according to your pkg.json?

I tried reinstalling it, forgot to wrap up before creating this ticket (as you can see the error is an actual styled-components snippet). Weird thing happened: I added it again and now it works? I literally just did npm i styled-components and it started working...

[DeMoorJasper]

Kind of what I expected, failed node module install or something

[StevenLangbroek]

Yep. Bookmarked the ticket, I'll reopen if it happens again. Thanks for the help ✌️