我得到一个空白的浏览器和在控制台我得到这个错误
未捕获的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);
因此,在经过漫长的消除过程后,我决定尝试从react
和react 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。我的代码有什么问题? 如有任何建议,将不胜感激。