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

Posted 2023-02-22

【中文标题】更新反应后出错：TypeError: Cannot call a class constructor without |new|

【英文标题】：Error after updating react: TypeError: Cannot call a class constructor without |new|

【发布时间】：2019-10-04 15:13:17

【问题描述】：

节点版本：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.

我想用道具渲染一个容器，但显然它不再起作用了。其做法如下：

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"
  

【问题讨论】：

如果您在代码和框中发布示例代码的链接，它会更容易调试。

这是一个相当大的项目，这只是其中的一个小片段。而且我不被允许遗憾地分享所有代码。

【参考方案1】：

好吧，过了一会儿我想通了。 我基本上不得不更新所有的反应库和其他东西，因为一些命名约定发生了变化。