“TopLevelWrapper.state：必须设置为一个对象或null” - React说

Question

我正在制作自己的Webpack配置。

当我运行Webpack开发服务器并试图查看我的应用程序是什么样的时候， 我得到了一个“漂亮”的情侣，包括一个警告和一个错误。

+++警告（首先出现）

消息

warning.js:36 Warning: TopLevelWrapper(...): When calling super() in 
`TopLevelWrapper`, make sure to pass up the same props that your 
component's constructor was passed.

调用堆栈

printWarning @ warning.js:36
warning @ warning.js:60
mountComponent @ ReactCompositeComponent.js:215
mountComponent @ ReactReconciler.js:45
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:143
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
119 @ index.tsx:20
__webpack_require__ @ bootstrap 45a9912…:54
webpackJsonpCallback @ bootstrap 45a9912…:25
(anonymous) @ main.js:1

+++错误（最后出现）

消息

invariant.js:44 Uncaught Error: TopLevelWrapper.state: must be set to an 
    object or null
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.mountComponent 
    (ReactCompositeComponent.js:247)
    at Object.mountComponent (ReactReconciler.js:45)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:143)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform 
    (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at Object._renderNewRootComponent (ReactMount.js:319)

调用堆栈

invariant @ invariant.js:44
mountComponent @ ReactCompositeComponent.js:247
mountComponent @ ReactReconciler.js:45
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:143
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
119 @ index.tsx:20
__webpack_require__ @ bootstrap 45a9912…:54
webpackJsonpCallback @ bootstrap 45a9912…:25
(anonymous) @ main.js:1

Chrome和Firefox都会出现错误，因此，这可能不是浏览器问题。

我在我的应用程序中使用TypeScript。 我正在使用的TypeScript加载器是awesome-typescript-loader。 编译我的TypeScript文件的过程不仅包括它。 在将TypeScript文件编译为ES6文件后，我也使用babel-loader。

我查看了调用堆栈，我发现在调用ReactDOM.render()时出现错误。

导致错误的脚本

/**
 * @file index.tsx
 * @author Dmitry Guzeev <dmitry.guzeev@yahoo.com>
 */

import * as React from 'react';
import * as ReactDOM from 'react-dom';

// I've commented out these lines in order to minimize the possible scope
// of the error cause.
/* import store, { history as storeHistory } from './store';
 * import AppWrapper from './components/AppWrapper';
 * import App from './components/App';
 *
 */

/* Create the application container element and append it to the document
   body. */
const appContainerElement = document.createElement('div');
appContainerElement.style.height = '100%';
appContainerElement.id = 'root';
document.body.appendChild(appContainerElement);

{/* <AppWrapper store={store} history={storeHistory}>
    <App />
    </AppWrapper>, */}

// Render the application onto the root element

// NOTE (for StackOverflow users): I've tried to render
// the actual application (the component instantiation code is above),
// but I've found out that the "Hello World" doesn't work either.

ReactDOM.render( // <<<<<<<< ERROR IS HERE
    <div>hello world</div>,
    appContainerElement
);

运行开发服务器的脚本

/**
 * @file run_dev_server.js
 * @author Dmitry Guzeev <dmitry.guzeev@yahoo.com>
 */

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const buildWebpackConfig = require('./build_webpack_config');
const logger = require('./logger');
const constants = require('./constants');
const config = require('./config');

/**
 * @summary
 * Run the development server.
 *
 * @return {undefined}
 */
const runDevServer = () => {
  const buildModeConfig = constants.buildMode.CONTINUOUS_DEV;
  const webpackConfig = buildWebpackConfig(buildModeConfig);
  const bundler = webpack(webpackConfig);
  const webpackDevServer = new WebpackDevServer(bundler, {
    stats: webpackConfig.stats,
    contentBase: false,
    compress: true,
    historyApiFallback: true,
  });
  webpackDevServer.listen(config.webpackDevServer.port, 
  config.webpackDevServer.host, () => {
    logger.log('info', 'listening on http://localhost:8080/');
  });
};

runDevServer();

TypeScript编译器配置文件

{
  "compilerOptions": {
    "baseUrl": "../src",
    "outDir": "../build/dev",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es6",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": false,
    "jsx": "preserve",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "paths": {
      "util": ["util"],
      "constants": ["util/constants"]
    },
    "strict": true,
    "strictNullChecks": true
  },
  "include": [
    "../src/index.tsx"
  ],
  "exclude": [
    "../node_modules",
    "node_modules"
  ]
}

注意

这是应用程序的主要入口点，所以，没有别的 是进口的。

当我直接从文件系统获取HTML时，以下代码可以很好地工作（即使使用导入）。

我的软件包版本：

• 反应：15.6.1
• react-dom：15.6.1
• awesome-typescript-loader：3.2.1
• webpack：2.2.0
• webpack-dev-server：2.5.0

实际问题

如何解决错误？