Cannot read property 'div' of undefined

System:

• OS: macOS High Sierra 10.13.6
• CPU: (4) x64 Intel® Core™ i5-5257U CPU @ 2.70GHz
• Memory: 428.57 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 8.11.4 - /usr/local/bin/node
• Yarn: 1.12.3 - /usr/local/bin/yarn
• npm: 6.5.0 - ~/.npm-global/bin/npm

npmPackages:

• styled-components: ^4.1.3 => 4.1.3

Reproduction

This issue occurred once I have updated project dependencies:

-    "babel-eslint": "^8.2.6",
-    "babel-loader": "^7.1.5",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
-    "flow-bin": "^0.86.0",
+    "flow-bin": "^0.89.0",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^8.1.0",
-    "styled-components": "^4.1.1",
+    "styled-components": "^4.1.3",

Steps to reproduce

git clone https://github.com/kettanaito/atomic-layout
cd atomic-layout
git checkout dependencies
npm install
npm run storybook

You can see all the config files (babel, webpack, etc.) on the mentioned branch.

See the following exception thrown by Storybook.

Cannot read property 'div' of undefined
    TypeError: Cannot read property 'div' of undefined
    at Module.srcComponentsBoxJsx (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:2172:76)
    at __webpack_require__ (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:199:27)
    at Module.srcIndexJs (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:2815:60)
    at __webpack_require__ (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:199:27)
    at http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:393:14
    at http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:395:6
    at webpackUniversalModuleDefinition (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:143:898)
    at Module.<anonymous> (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:144:3)
    at Module../index.js (http://localhost:6020/main.4a3566b995dd1c2ae279.bundle.js:5381:30)
    at __webpack_require__ (http://localhost:6020/runtime~main.4a3566b995dd1c2ae279.bundle.js:782:30)

The following outputs undefined in the console:

import styled from 'styled-components'

console.log(styled)

I do acknowledge that this is most likely not an issue with the styled-components package. However, I would be very thankful for help, as I couldn’t find any relevant issues anywhere else.

Expected Behavior

• styled can be imported as a default export of styled-components package

Actual Behavior

• import styled from 'styled-components' resolves styled to undefined

[mzalazar]

I was having the same error… i get rid of the selected code (in webpack.config.js):

and it worked for me =)

[altany]

I am facing the same issue as @kettanaito.

If I do const Element = styled.View I get this error:

It seems I need to change all my declarations to

import { View } from 'react-native
const Element = styled(View)

to make it work but I really don’t want to do that, or downgrade my babel-loader.

Any ideas on how to fix this?