React JSX 文件给出错误“无法读取未定义的属性‘createElement’”答案

【问题标题】：React JSX file giving error "Cannot read property 'createElement' of undefined"React JSX 文件给出错误“无法读取未定义的属性‘createElement’”
【发布时间】：2017-01-18 06:46:23
【问题描述】：

我有一个文件 test_stuff.js 正在使用 npm test 运行

看起来像这样：

import { assert } from 'assert';
import { MyProvider } from '../src/index';
import { React } from 'react';

const myProvider = (
  <MyProvider>
  </MyProvider>
);

describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

不幸的是，我得到了错误

/Users/me/projects/myproj/test/test_stuff.js:11
var myProvider = _react.React.createElement(_index.MyProvider, null);
                             ^

TypeError: Cannot read property 'createElement' of undefined
    at Object.<anonymous> (/Users/me/projects/myproj/test/test_stuff.js:7:7)

这是什么意思？我成功地从 'react' 导入了 React，那么为什么 React 是未定义的呢？就是_react.React，不管是什么意思……

【问题讨论】：

标签： javascript reactjs npm react-jsx

【解决方案1】：

要导入 React，请执行 import React from 'react' 当您要导入的东西不是该模块或文件中的默认导出时添加括号。在发生反应的情况下，它是默认导出。

这可能适用于您的其他导入，具体取决于您如何定义它们。

【讨论】：

我不知道为什么，但对我来说是import * as React from "react"
从技术上讲，import React from 'react' 是无效的，因为 React 不是默认导出，但由于将 ES6 与 babel 结合使用，它可以工作。也许您的 babel 配置不同，迫使您使用正确的有效语法 import * as React from 'react'。欲了解更多信息：github.com/DefinitelyTyped/DefinitelyTyped/issues/5128
我忘记提到的另一件重要的事情是 JSX 要求 React 在工作范围内。但是，除了 Component 和其他命名的导出之外，您实际上并不需要 React。也许将来你不会导入 React。
我在 expo 中使用 react-native，我的 babel 预设是 babel-preset-expo github.com/expo/babel-preset-expo/blob/master/index.js
如果使用typescript，导入样式也会受到tsconfig中esModuleInterop设置的影响。 tsconfig 必须适用于测试文件（检查include 和files）。

【解决方案2】：

import React, { Component } from 'react'

这对我有用。不过，我不确定为什么它修复了我的这个问题的版本。所以如果你是一个偶然发现这个问题的人，并且你使用 create-react-app 作为你的起始样板，那么这种导入 React 的方式就可以解决问题。（截至 18 年 10 月，哈哈）

【讨论】：

这是我在尝试导入备忘录、useEffect、useState 时遇到的问题，除了反应。最初看到错误“无法读取未定义的属性'备忘录'”，但这修复了它
这也为我修复了它（尽管我导入了 useState 而不是组件）。我现在很好奇与我原来的错误import { React, useState } from 'react' 的区别；
@JosFabre 这是错误的，因为'react' 不会将React 导出为非默认值。然而它export useState、export Component等。

【解决方案3】：

对于那些使用 TypeScript 使用 ReactJS 的人。

import * as React from 'react';

【讨论】：

这是我的问题。谢谢！
为什么这是必要的？运行 jest 时，我在整个代码库中都收到此错误。
有一种方法可以让导入“再次美丽”。将“esModuleInterop：true”添加到您的 tsconfig.json。并享受您的“从'react'导入React”！ ——舒利克·沃拉迪米尔

【解决方案4】：

由于粗心，我发生了这个错误。其实是

import React from 'react';

括号用于命名导出，例如：

import React, { useState, useEffect } from 'react';

【讨论】：

如果您有新问题，请点击按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。 - From Review

【解决方案5】：

改变： 从 'react' 导入 { React } 到 从 'react' 导入 React 因为 React 是一个默认导出，你不需要任何默认导出的花括号。

【讨论】：

【解决方案6】：

如果你需要从 'react' 导入多个类，你可以为它们指定一个别名，除了 React。类似的，

import React, * as react from 'react';

【讨论】：

【解决方案7】：

React 在该模块中默认导出，不需要 {}。

【讨论】：

【解决方案8】：

尝试使用析构函数来导入 React 对象可能会导致像 import {React} from 'react'; 这样的问题。这可能是在 90% 的时间运行上述代码时出错的原因。

相当使用： import React from 'react';

然后您可以通过以下方式访问 React 类的任何成员： 反应。

【讨论】：