Definitelytyped: Problema de importación de React ES6

export default react = React; podría funcionar

Creo que lo que quieres es import * as React, {Component} from 'react'; (pero podría estar equivocado, todavía estoy aprendiendo algo de esto también :smiley:)

Así que pasé bastante tiempo con ES6 recientemente y creo que actualmente import React from 'react'; es un comportamiento técnicamente _no_ válido porque React no usa módulos de clases de ES6 y, por lo tanto, no puede especificar una exportación predeterminada.

Esta sintaxis funciona cuando se usa Babel, pero eso se debe a que Babel básicamente ha dicho que "si se usa una importación ES6 para obtener un módulo CommonJS, la exportación predeterminada es la misma que modules.export . Sin embargo, esto es completamente una cosa de Babel y no es una cosa de especificación Desde la perspectiva de la especificación, diría que import * as React from 'react'; es en realidad mucho más cercano en espíritu (y funciona con TypeScript listo para usar).

Sin embargo, esto es completamente una cuestión de Babel y no una cuestión de especificaciones.

Acordado. Pero babel tiene mucha tracción y la gente cree que esa es la forma correcta en que los módulos ES6 _deberían_ comportarse.

@vvakame ha trabajado un poco para que la interoperabilidad con las importaciones de tipo babel sea más fluida: https://github.com/Microsoft/TypeScript/pull/3586

Sí, excepto que PR se trata principalmente de exportar desde TypeScript, mientras que este problema se trata más de importar a TypeScript. En otras palabras, ese PR no ayuda con este problema (¡pero definitivamente es bueno para construir bibliotecas con TypeScript!).

Sospecho que este problema desaparecerá pronto, ya que Babel fue contratado por Facebook y no me sorprendería en absoluto si React se reescribiera como módulos ES6.

O, si _realmente_ quiere usar esa sintaxis, puede cambiar el archivo de declaración a export default React pero debe apuntar a ES6 y luego usar Babel para transpilar a CommonJS; de lo contrario, no funcionará correctamente en tiempo de ejecución (TypeScript lo hará). transpilar siempre a moduleName.default al usar importaciones ES6).

Gracias por aclararlo. En resumen, tenemos ts export -> babel import funcionando. Ahora necesitamos module.exports aliased to default -> ts import funcionando.

Llegué un poco tarde a la fiesta, pero por lo que sé, esta es una solución del equipo de TypeScript.

tl; dr: no puede traducir un export default en un module.exports = . Use la sintaxis heredada import ... = require(...) en su lugar :(

Dado que la exportación predeterminada de ES-6 es básicamente una exportación normal con el nombre 'default' , el equivalente en CJS sería exports.default = . y la importación se vería así en CJS var something = require('something').default . La sintaxis module.exports = no es suficiente porque hace que el módulo sea igual al propio símbolo exportado, lo que hace que las dependencias circulares sean imposibles de resolver. Esto va en contra del diseño de los módulos ES6. En mi humilde opinión, el equipo de Babel se pasó un poco con esto :(

@dreampulse que estoy haciendo usando esta sindax:

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

@kataras eso no me funciona desafortunadamente:

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"
  }
}

Lo que está funcionando es tener dos importaciones. Me gusta:

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

Puede usar la opción del compilador allowSyntheticDefaultImports que permitirá este tipo de importación:

import React, {Component} from 'react';

gracias @jbrantly. ¡¡Correcto!!

@ligaz gracias!

Solo como referencia, tuve que agregar "module": "es2015", a tsconfig.json antes de que la corrección mencionada por @ligaz me funcionara.

Estoy usando import React, {Component, PropTypes} from 'react'; y obtengo el error Cannot resolve symbol PropTypes . ¿Algún consejo sobre cómo resolver este problema?

@kkarmalkar Si está usando React >=15.5.0, querrá migrar de React.PropTypes al nuevo paquete y definiciones de prop-types.

Impresionante, gracias @corydeppen

Aunque tengo allowSyntheticDefaultImports, no puedo obtener

import React, {Component} from 'react';

para trabajar, pero usando

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

funciona bien. Tengo mi módulo configurado en es5. Al compilar el código para el navegador, ¿se sugiere usar es6? Agregué es2015 a mi propiedad libs en tsconfig.json.

@richtera ¿ Posiblemente relacionado con?: https://github.com/Microsoft/TypeScript/issues/21621

Está relacionado, sí. Sin embargo, es curioso que, según este hilo, te funcione.

Simplemente agregue una opción tsconfig esModuleInterop: true y luego puede usar las importaciones predeterminadas, es decir import React from 'react'

Si está utilizando un paquete web, también puede deshacerse de Babel con esta configuración.

Esto funciona ahora. Creo que estaba relacionado con versiones específicas de webpack y mecanografiado que había estado usando en ese momento. Desafortunadamente, aún se requieren configuraciones de Babel para usos de babel que no sean javascript.

"permitir importaciones predeterminadas sintéticas": verdadero

"module": "es2015
“allowSyntheticDefaultImports”：true

Trabajando ....

"module": "es2015
“allowSyntheticDefaultImports”：true

Trabajando ....

¿Es esto un troll? :) Comillas direccionales en la última línea, y no son dos puntos antes true . Debería ser como sigue:

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

importar {predeterminado como ProjectInfoProfile} desde './ProjectInfoProfile';
o
importar ProjectInfoProfile desde './ProjectInfoProfile';

en este caso, podría funcionar.

"módulo": "commonjs",
"objetivo": "es6",
"esModuleInterop": verdadero,
"jsx": "reaccionar",
"permitir importaciones predeterminadas sintéticas": verdadero