Зреагуйте на файл JSX із помилкою "Не вдається прочитати властивість 'createElement' з undefined"

У мене є файл 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 із 'Reag', то чому React буде невизначеним? Це _react.React, що б це не означало ...

Щоб імпортувати React, import React from 'react'ви додаєте дужки, коли те, що ви імпортуєте, не є типовим експортом у цьому модулі чи файлі. У разі реакції це експорт за замовчуванням.

Це може стосуватися інших ваших імпортів залежно від того, як ви їх визначили.

import React, { Component } from 'react'

Це працювало для мене. Але я не впевнений, чому це виправило мою версію цієї проблеми. Отже, якщо ви хтось натрапив на цю проблему, і ви використовуєте create-response-app як початковий шаблон, такий спосіб імпортування React зробить свою справу. (станом на жовтень 18, ха-ха)

Для тих, хто працює з ReactJS із TypeScript.

import * as React from 'react';

Зміни: імпортуйте {React} з 'React' на імпорт React з 'React', оскільки React є експортом за замовчуванням, і вам не потрібні фігурні дужки для будь-якого експорту за замовчуванням.

Якщо у випадку, якщо вам потрібно імпортувати декілька класів з 'response', ви можете мати для них псевдонім, крім React. Щось на зразок,

import React, * as react from 'react';

Ця помилка сталася у мене через необережність. Це насправді

import React from 'react';

Дужки призначені для іменованого експорту, наприклад:

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

React експортується за замовчуванням у цей модуль, не потрібно {}.