当前位置: 首页 > 知识库问答 >
问题:

react redux与webpack一起给出错误Uncaught TypeError:超级表达式必须为null或函数,而不是未定义的

龚德本
2023-03-14

我得到一个空白的浏览器和在控制台我得到这个错误

未捕获的TypeError:超级表达式必须为null或函数,而不是未定义的

我读过其他类似的帖子,但没有看到任何相关的内容。

这是我的webpack.config.js文件:

const path = require('path');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    root: path.resolve(__dirname, 'src'),
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

这是我的package.json文件:

{
  "name": "JSFaddle",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "repository": "git@github.com:ldco2016/JSFaddle.git",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "babel-standalone": "^6.7.7",
    "esprima": "^2.7.2",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-addons-create-fragment": "^15.1.0",
    "react-codemirror": "^0.2.6",
    "react-dom": "^0.14.3",
    "react-redux": "^4.0.0",
    "react-router": "^2.0.1",
    "react-split-pane": "^0.1.42",
    "redux": "^3.0.4",
    "reselect": "^2.5.1"
  }
}

这是src/index.js文件:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';
import Globals from './globals';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.render'));

您已经注意到,我正在运行一些旧版本的webpack和其他软件包,因为我正试图跟上webpack的速度,但我不确定这是否是问题所在。我不确定它指的是什么。

有人问我关于扩展的问题,我正在src/components/App.js中这样做:

import React, { Component } from 'react';
import SplitPane from 'react-split-pane';
import Editor from './editor';
import Viewer from './viewer';

export default class App extends Component {
  render() {
    const width = window.innerHeight;

    return (
      <SplitPane split="vertical" defaultSize={width}>
        <Editor />
        <Viewer />
      </SplitPane>
    );
  }
}

为了清楚,我已经彻底审查了关于这个错误的其他帖子,这里是我的组件文件。

Editor.js:

import _ from 'lodash';
import React, { Component } from 'react';
import CodeMirror from 'react-codemirror';
import 'codemirror/mode/jsx/jsx';
import * as actions from 'actions';
import { connect } from 'react-redux';

class Editor extends Component {
  onCodeChange(code) {
    this.props.updateCode(code);
  }

  render() {
    return (
      <div>
        <CodeMirror
          value={this.props.code}
          onChange={this.onCodeChange.bind(this)}
          options={{ mode: 'jsx', lineNumbers: true, tabSize: 2 }} />
      </div>
    );
  }
}

function mapStateToProps({code}) {
  return { code };
}

export default connect(mapStateToProps, actions)(Editor);

Viewer.js:

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import parseExpressions from 'selectors/parse_expressions';
import SplitPane from 'react-split-pane';

class Viewer extends Component {
  evaluateExpressions(expressions) {
    const formattedExpressions = _.mapValues(expressions, expression => {
      const result = eval(expression);

      if (result && result.type) {
        return result;
      } else if (_.isFunction(result) && result.name) {
        return <i>Function {result.name}</i>;
      } else if (_.isBoolean(result)) {
        return result ? 'True' : 'False';
      } else if (_.isObject(result) || _.isArray(result)) {
        return JSON.stringify(result);
      }

      return result;
    });

    return _.map(formattedExpressions, (expression, line) =>
      <div>{expression}</div>
    );
  }

  renderExpressions(code) {
    return this.evaluateExpressions(this.props.expressions);
  }

  render() {
    const defaultHeight = window.innerHeight / 1.3;

    return (
      <SplitPane split="horizontal" defaultSize={defaultHeight} className="viewer">
        <div className="result">
          {this.renderExpressions(this.props.code)}
        </div>
        <div className="errors">
          {this.props.errors}
        </div>
      </SplitPane>
    );
  }
}

function mapStateToProps(state){
  let expressions, errors;

  try {
    expressions = parseExpressions(state);
  } catch (e) {
    errors = e.toString();
  }

  return { expressions, errors };
}

export default connect(mapStateToProps)(Viewer);

共有1个答案

葛阳华
2023-03-14

因此,在经过漫长的消除过程后,我决定尝试从reactreact dom版本0.14.x升级到15.4.0,然后通过npm start重新启动应用程序,现在就可以运行了。

 类似资料:
  • 我一直在学习udemy的课程,但无论我做什么,都会出现一个错误: 以下是组件代码: 下面是我要导入的图表组件: 但显然是反应。组件未定义,所以它会抛出一个错误。

  • 跟踪这个问题的问题无法解决我的问题。 reactjs给出错误未捕获类型错误:超级表达式必须为空或函数,而不是未定义 我的反应版本是"^15.3.1"。 我添加了下面的代码片段

  • 从0.13.2更新到0.14.2后,我发现以下错误: 对此已经有几个问题了。最常见的错误是拼错React.component(没有大写字母C)。另一个是尝试使用ES6类的版本 但我已经成功地使用了带有React 0.13.x的ES6类,我在所有地方都使用大写字母C,并且记录React.Component似乎给出了一个合适的结果(函数ReactComponent(…) 经过一些搜索,我做了这3个测试

  • 问题内容: 我使用React编写此演示。我使用Webpack来构建此演示。启动此演示时,错误将显示给我。 错误: 未捕获的TypeError:超级表达式必须为null或函数,且未定义 我不知道该怎么解决。 问题答案: 代码中的唯一警告是由于您没有扩展正确的类,而需要扩展。

  • 问题内容: 我正在使用reactjs。 当我在浏览器下面运行代码时: 未捕获的TypeError:超级表达式必须为null或函数,且未定义 关于任何错误的任何暗示将不胜感激。 首先是用于编译代码的行: 和代码: 更新:在针对此问题的地狱之火中燃烧了三天后,我发现我没有使用最新版本的react。 全局安装: 在本地安装: 确保浏览器也使用正确的版本: 希望这可以为他人节省三天的宝贵生命。 问题答案:

  • 当我导航到此页面时,总是出现上述错误。我使用了最新的ECMA脚本语法和最新的react原生版本0.27。我的代码有什么问题? 如有任何建议,将不胜感激。