Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

error in import styled-components to components React

See original GitHub issue

I imported styled-components to component. import styled, { keyframes } from 'styled-components'; the error TypeError: Object(...) is not a function var ThemeContext = createContext(); occurred.

my package.js

"dependencies": {
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.1.0",
    "redux": "^3.7.2",
    "styled-components": "^4.2.0"
  },

code of component

import React from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes } from 'styled-components';
import FlyingObjectBase from './FlyingObjectBase';
import FlyingObjectTop from './FlyingObjectTop';

const FlyingObject = props => (
    <g>
      <FlyingObjectBase position={props.position} />
      <FlyingObjectTop position={props.position} />
    </g>
  );
  FlyingObject.propTypes = {
    position: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired
    }).isRequired,
  };
  export default FlyingObject;

error in console

    at Object.<anonymous> (bundle.js:38257)
    at Object../node_modules/styled-components/dist/styled-components.browser.esm.js (bundle.js:39107)
    at __webpack_require__ (bundle.js:679)
    at fn (bundle.js:89)
    at Object../src/components/FlyingObject.jsx (bundle.js:41736)
    at __webpack_require__ (bundle.js:679)
    at fn (bundle.js:89)
    at Object../src/components/Canvas.jsx (bundle.js:41498)
    at __webpack_require__ (bundle.js:679)
    at fn (bundle.js:89)
    at Object../src/App.js (bundle.js:41128)
    at __webpack_require__ (bundle.js:679)
    at fn (bundle.js:89)
    at Object../src/containers/Game.js (bundle.js:42377)
    at __webpack_require__ (bundle.js:679)
    at fn (bundle.js:89)
    at Object../src/index.js (bundle.js:42462)
    at __webpack_require__ (bundle.js:679)
    at fn (bundle.js:89)
    at Object.0 (bundle.js:42872)
    at __webpack_require__ (bundle.js:679)
    at bundle.js:725
    at bundle.js:728

What is the solution?

this is my stackoverflow question https://stackoverflow.com/questions/55861201/error-in-import-styled-components-to-components-react this is same problem in issues https://github.com/styled-components/styled-components/issues/2404 Thanks a lot.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

hamedhossanicommented, Apr 27, 2019

this is solved @garetmckinley Thanks. https://github.com/gatsbyjs/gatsby/issues/7897#issuecomment-419672087 works fine if you install v3

1reaction

hamedhossanicommented, Apr 27, 2019

this is my package.js

 "@types/react": "^16.8.14",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^5.1.1",
    "react-scripts": "1.1.0",
    "redux": "^3.7.2",
    "styled-components": "^4.2.0"

it’s not my correct answer,

Top Results From Across the Web

Error when styling React components imported from index file ...

1 Answer 1 · your solution worked perfectly where a styled component was imported and then styled again w/styled(), but did not help...

FAQs - styled-components

In general, always use the css helper when composing styling partials to be interpolated into a styled component.. import styled, { keyframes } ......

Module not found: Can't resolve 'styled-components'

To solve the error "Module not found: Error: Can't resolve 'styled-components'", make sure to install the styled-components package by opening your terminal in ......

How To Use React Styled Components Efficiently - Copycat

// Later in your app, you can go ahead to import and add the component along with every other top-level component you have...

module not found can't resolve 'styled-components' - YouTube

React #ReactSolutions #SyledComponentsThis video will solve can't resolve ' styled - components ' errors in react.