导入样式组件中的错误到组件React

Question

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

bundle.js:38257 Uncaught TypeError: Object(...) is not a function
    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

the index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import './index.css';
import App from './containers/App';
import reducer from './reducers';
import registerServiceWorker from './registerServiceWorker';



/* eslint-disable no-underscore-dangle */
const store = createStore(
  reducer, /* preloadedState, */
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
/* eslint-enable */

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root'),
);
registerServiceWorker();

What is the solution?

Thanks a lot.

Answer 1

this is solved @garetmckinley Thanks.

works fine if you install v3