我将styled-components
导入了组件。
import styled, { keyframes } from 'styled-components';
错误
TypeError: Object(...) is not a function
var ThemeContext = createContext();
发生了。
我的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"
},
组件代码
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;
控制台错误
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
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();
解决方案是什么?
非常感谢。