Definitelytyped: Problema de importação do React ES6

export default react = React; pode funcionar

Acho que o que você quer é import * as React, {Component} from 'react'; (mas posso estar errado, ainda estou aprendendo um pouco disso também :smiley:)

Então, eu passei um bom tempo com o ES6 recentemente e acredito que atualmente import React from 'react'; é um comportamento tecnicamente _não_ válido porque o React não usa módulos de classes ES6 e, portanto, não pode especificar uma exportação padrão.

Essa sintaxe funciona ao usar o Babel, mas isso é porque o Babel basicamente disse que "se estiver usando uma importação ES6 para obter um módulo CommonJS, a exportação padrão é a mesma que modules.export . No entanto, isso é inteiramente uma coisa do Babel e não é uma coisa de especificação.Do ponto de vista da especificação, eu diria que import * as React from 'react'; é realmente muito mais próximo em espírito (e funciona com o TypeScript pronto para uso).

No entanto, isso é inteiramente uma coisa de Babel e não uma coisa de especificação

Acordado. Mas o babel tem muita tração e as pessoas acreditam que essa é a maneira correta que os módulos ES6 _deveriam_ se comportar.

@vvakame fez algum trabalho para tornar a interoperabilidade com importações do tipo babel mais suave: https://github.com/Microsoft/TypeScript/pull/3586

Sim, exceto que o PR é principalmente sobre a exportação do TypeScript, enquanto esse problema é mais sobre a importação para o TypeScript. Em outras palavras, esse PR não ajuda com esse problema (mas é definitivamente bom para construir bibliotecas com TypeScript!).

Suspeito que esse problema vá embora em breve, pois o Babel foi contratado pelo Facebook e eu não ficaria surpreso se o React fosse reescrito como módulos ES6.

Ou, se você _realmente_ quiser usar essa sintaxe, você pode alterar o arquivo de declaração para export default React mas você deve direcionar o ES6 e usar o Babel para transpilar para CommonJS, caso contrário, não funcionará direito em tempo de execução (o TypeScript sempre transpile para moduleName.default ao usar importações ES6).

Obrigado por esclarecer. Resumindo, temos ts export -> babel import funcionando. Agora precisamos module.exports aliased to default -> ts import funcionando.

Estou um pouco atrasado para a festa, mas pelo que sei, essa não é uma correção da equipe do TypeScript.

tl;dr: você não pode traduzir um export default em um module.exports = . Use a sintaxe legada import ... = require(...) :(

Como a exportação padrão do ES-6 é basicamente apenas uma exportação regular com o nome 'default' , o equivalente em CJS seria exports.default = . e a importação ficaria assim em CJS var something = require('something').default . A sintaxe module.exports = não é suficiente porque torna o módulo igual ao próprio símbolo exportado, impossibilitando a resolução de dependências circulares. Isso vai contra o design dos módulos ES6. IMHO a equipe Babel exagerou um pouco com isso :(

@dreampulse que estou fazendo usando este syndax:

import {default as React,Component} from 'react';

@kataras que não funciona para mim infelizmente:

Error:(2, 9) TS2305: Module '"react"' has no exported member 'default'.

Código

import {default as React, Component, PropTypes} from 'react';

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "jsx": "react"
  }
}

O que está funcionando, está tendo duas importações. Como:

import * as React from "react";
import { Component } from "react";

Você pode usar a opção do compilador allowSyntheticDefaultImports que permitirá esse tipo de importação:

import React, {Component} from 'react';

obrigado @jbrantly. Aponte!!

@ligaz obrigado!

Apenas para referência, tive que adicionar "module": "es2015", ao tsconfig.json antes que a correção mencionada por @ligaz funcionasse para mim.

Estou usando import React, {Component, PropTypes} from 'react'; e recebendo erro Cannot resolve symbol PropTypes . Alguma dica de como resolver esse problema?

@kkarmalkar Se você estiver usando React >=15.5.0, você desejará migrar de React.PropTypes para o novo pacote prop-types e definitions .

Incrível, obrigado @corydeppen

Mesmo que eu tenha allowSyntheticDefaultImports, não consigo

import React, {Component} from 'react';

para trabalhar, mas usando

import React from 'react';
import {Component} from 'react';

funciona bem. Eu tenho meu módulo definido como es5. Ao compilar o código para o navegador, sugere-se usar es6? Eu adicionei es2015 à minha propriedade libs em tsconfig.json.

@richtera Possivelmente relacionado a?: https://github.com/Microsoft/TypeScript/issues/21621

Está relacionado sim. Curioso que, de acordo com este tópico, esteja funcionando para você.

Basta adicionar uma opção tsconfig esModuleInterop: true e então você pode usar as importações padrão, ou seja import React from 'react'

Se você estiver usando o webpack, também poderá abandonar o babel com esta configuração.

Isso funciona agora. Eu acho que estava relacionado a versões específicas do webpack e typescript que eu estava usando na época. Infelizmente, as configurações do Babel ainda são necessárias para usos não-javascript do babel.

"allowSyntheticDefaultImports": true

"module": "es2015
“allowSyntheticDefaultImports”：true

Trabalhando ....

"module": "es2015
“allowSyntheticDefaultImports”：true

Trabalhando ....

Isso é um troll? :) Aspas direcionais na última linha, e não são dois pontos antes true . Deve ser o seguinte:

  "module": "es2015",
  "allowSyntheticDefaultImports": true

import { default como ProjectInfoProfile } de './ProjectInfoProfile';
ou
importar ProjectInfoProfile de './ProjectInfoProfile';

neste caso, pode funcionar.

"module": "commonjs",
"alvo": "es6",
"esModuleInterop": verdadeiro,
"jsx": "reagir",
"allowSyntheticDefaultImports": true