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汇总，反应和babel TypeError：超级表达式必须为null或函数，而不是未定义

1 个答案: