Flow rollup, react and babel TypeError: Super expression must be null or a function, not undefined

Question

我正在尝试使用flow、babel 和rollup，但是在添加流时我的代码中断了。我已经尝试了rollup-plugin-flow 和不同的babel-..-.. 流插件（当前实现），但我仍然遇到同样的错误。

当我检查控制台时。我得到以下信息：（）我无法弄清楚我错过了什么）

(!) Missing exports
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src/components/ErrorBoundary/ErrorBoundary.js
createElement is not exported by node_modules/react/index.js
26:       if (this.state.errorInfo) {
27:
28:         return React.createElement(
                         ^
29:           'div',
30:           null,

rollup.config.dev.js

import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import serve from 'rollup-plugin-serve';
import scss from 'rollup-plugin-scss';
import visualize from 'rollup-plugin-visualizer';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
    sourcemap: true
  },
  plugins: [
    babel({
      babelrc: false,
      exclude: [
      'node_modules/**',
      '**/*.scss'
      ],
      presets: [
        [ "env", { "modules": false } ],
        "react"
      ],
      "plugins": [ ["external-helpers"], ["transform-flow-strip-types"], ["syntax-flow"] ]
    }),
    replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
    scss({
      output: 'dist/style.css'
    }),
    resolve(),
    cjs({
      include: 'node_modules/**',
    }),
...ommited_code
}

ErrorBoundary.js

// @flow
import * as React from 'react';

class ErrorBoundary extends React.Component { //<= it breaks here
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ error: error, errorInfo: errorInfo })
  }

  render() {
    const { children } = this.props;

    if (this.state.errorInfo) {

      return (
        <div>
          <h2>Oops something crashed ????</h2>
            <details style={{whiteSpace: 'pre-wrap', color: 'red' }}>
              {this.state.error && this.state.error.toString()}
              <br />
              {this.state.errorInfo.componentStack}
            </details>
        </div>
      );
    }
    return children;
  }
}

export default ErrorBoundary;

Answer 1

问题属于您的Reactimport。因为react 模块有export default，所以你不需要像你一样导入它。可以很简单：

import React from 'react' // and then you can use as you use

当您执行import * as React from 'react 时，这意味着您正在获取所有导出default & simple exports 并将其存储在React 变量中。然后要访问 React 本身，您应该将其用作 React.React。

请看看import/export 是如何工作的。