Flow rollup, react and babel TypeError: Super expression must either 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

问题属于您的 React 导入。因为 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是如何工作的。

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

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

rollup

reactjs

flowtype

babeljs