节点版本：v10.15.3
我正在做一个项目。一切正常，但是在有人进行npm安装后，显示以下错误：
TypeError: Cannot call a class constructor without |new|
在SContainer.js中
其次：
The above error occurred in the <FluxContainer(SContainer)> component:
in FluxContainer(SContainer)
Consider adding an error boundary to your tree to customize error handling behavior.
我想用道具渲染一个容器，但是显然它不再起作用了。完成的方式如下：
search.js：
'use strict'
import React from 'react';
import ReactDOM from 'react-dom';
import SContainer from './containers/sContainer'
ReactDOM.render(
<SContainer page="search"/>,
document.getElementById('search')
);
和SContainer.js：
'use strict';
// import area
// framework related imports
import React from 'react';
import { Container } from 'flux/utils';
import {MuiThemeProvider} from '@material-ui/core/styles';
// application related imports
import ShopStore from './../../stores/shopStore';
import ContentContainer from './contentContainer';
import ProviderRegistration from '../../components/views/providerRegistration';
import ProviderServiceRegistration from '../../components/views/providerServiceRegistration';
// variables area
class SContainer extends React.Component {
constructor(props) {
super(props);
this.className = this.constructor.name;
this.state = {};
this.style = {
routerContent: {
flexGrow: 1
}
};
}
static getStores() {
let stores = [
ShopStore
];
return stores;
}
static calculateState(prevState) {
let state = {
shopStore : ShopStore.getState(),
}
return state;
}
render() {
const shopStore = this.state.shopStore;
const theme = shopStore.get('theme');
const renderPageObject = {
// /provider-page
"providerPage": <ProviderRegistration {...this.state} />,
// /search-page
"searchShop": <ContentContainer {...this.state} />,
// /service-registration
"serviceRegistration": <ProviderServiceRegistration {...this.state} />,
}
return (
<MuiThemeProvider theme={theme.object} >
<section className="container">
<div className='row app'>
<div className="col-sm-10">
<div id='routerContent' style={this.style.routerContent}>
{renderPageObject[this.props.page]}
</div>
</div>
</div>
</section>
</MuiThemeProvider>
);
}
}
export default Container.create(SContainer);
我在github上找到了一种解决方法，建议在SContainer.js中执行以下操作：
var fluxContainerConverter = require('./FluxContainerConverter');
export default Container.create(fluxContainerConverter.convert(ShopContainer));
以及在FLuxContainerConverter.js中：
module.exports = {
convert: function(containerClass) {
const tmp = containerClass;
containerClass = function(...args) {
return new tmp(...args);
};
containerClass.prototype = tmp.prototype;
containerClass.getStores = tmp.getStores;
containerClass.calculateState = tmp.calculateState;
return containerClass;
}
};
但是这也不起作用，我得到其他错误，最终导致警告：意外的光纤弹出错误。老实说，我对错误一无所知，因此不胜感激。如果我忘记发布重要信息，请告诉我。
这是package.json：
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:dev": "webpack --config ./webpack.config.js --watch --progress --color",
"build:prod": "rm -rf build node_modules && npm i --unsafe-perm && webpack --config ./webpack-production.config.js --progress",
"yarn:prod": "rm -rf build node_modules && yarn install --unsafe-perm && webpack --config ./webpack-production.config.js --progress",
"build:preprod": "rm -rf build node_modules && npm i --unsafe-perm && webpack --config ./webpack.config.js --progress",
"yarn:preprod": "rm -rf build node_modules && yarn install && webpack --config ./webpack.config.js --progress",
"clean": "rimraf dist"
},
"author": "",
"license": "GPL",
"dependencies": {
"@material-ui/core": "^3.1.0",
"alt": "^0.18.4",
"axios": "^0.12.0",
"bcv-react-select": "^1.1.1",
"classnames": "^2.2.5",
"country-data": "0.0.29",
"dateformat": "^3.0.2",
"flux": "^3.1.3",
"history": "^4.7.2",
"immutable": "^3.8.2",
"jquery": "^3.3.1",
"material-design-icons": "^3.0.1",
"moment": "^2.14.1",
"online-event-tool": "1.0.2",
"react": "^16.8.6",
"react-addons-shallow-compare": "^15.2.1",
"react-addons-test-utils": "^15.6.2",
"react-avatar": "^3.4.3",
"react-copy": "^0.2.1",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.8.6",
"react-image-gallery": "^0.7.15",
"react-input-autosize": "^1.0.0",
"react-joyride": "^1.11.4",
"react-places-autocomplete": "^3.0.0",
"react-router-dom": "^4.2.2",
"react-select": "^1.0.0-beta14",
"react-slick": "^0.14.8",
"react-tabs": "^0.5.5",
"react-tap-event-plugin": "^1.0.0",
"sockjs-client": "^1.1.1",
"strip-loader": "^0.1.2",
"superagent": "^4.0.0-beta.5",
"unique-id-mixin": "^1.0.0",
"velocity-animate": "^1.4.2",
"velocity-react": "^1.2.1",
"vis": "^4.21.0",
"webpack-merge": "^4.1.0",
"xhr": "^2.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^0.26.1",
"enzyme": "^3.2.0",
"enzyme-adapter-react-15": "^1.0.5",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"node-sass": "^4.5.0",
"react-addons-css-transition-group": "^15.5.2",
"react-controllables": "^0.6.0",
"react-pure-render": "^1.0.2",
"react-test-renderer": "^15.6.2",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"transfer-webpack-plugin": "^0.1.4",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^3.11.0",
"webpack-cli": "^3.1.0"
}
}
答案 0 :(得分：0)
好的，过了一会儿我才知道了。 我基本上必须更新所有的React库和其他内容，因为某些命名约定已更改。