reactjs - 更新反应后出错：TypeError: Cannot call a class constructor without |new|

问题描述

节点版本：v10.15.3

我正在做一个项目。一切正常，但是在有人执行 npm install 后显示以下错误：

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.

我想用道具渲染一个容器，但显然它不再起作用了。它的完成方式如下：

搜索.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"
  }
}

标签： reactjsreactjs-fluxreact-dom

reactjs - 更新反应后出错：TypeError: Cannot call a class constructor without |new|

问题描述

解决方案

推荐阅读