Estoy trabajando en una aplicación React, Redux TypeScript. Tengo una situación extraña en la que después de algunos cambios, uno de los módulos ha dejado de exportar sus miembros.

La estructura de la carpeta es:

src
|---- components
|---- containers

La carpeta 'componentes' tiene los archivos .tsx mientras que los archivos .ts de envoltura están en la carpeta 'contenedores'.

El módulo NodeList.tsx se enumera a continuación:

import * as React from "react";

export const NodeList = (props) => (
    <div id="NodeList">
        <ul>
        {props.items.map((item, i) => (
            <li key={i} >
                <span id={"Item_"+i}>{item}</span>
            </li>
            )
        )}
        </ul>
    </div>
    )

El contenedor de envoltura NodeListContainer es:

import { connect } from "react-redux";
import { Provider } from "react-redux";

import { Nodelist } from "../components/NodeList"

const nodesAsArrayOfType = (state, nodeType: string) => {
    console.log("Going for nodes of type ", nodeType)
    let a = state.data.model.nodes
    let k = Object.keys(a);
    let sub = k.filter((e) => {
                   return a[e].nodeType == nodeType
        }).map((e) => a[e])
    console.log("Got nodes ", sub)    
    return sub
}

const mapStateToProps = (state) => {
    var list = nodesAsArrayOfType(state, state.UIstate.focusNodeType).map((e) => {return JSON.stringify(e)})
    console.log("Returning ", list, list.length)
    return {
        items: list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        newTextValue: (e) => {dispatch({type: "ON_CHANGE", text: e.target.value})}
    }
}

export const NodeListContainer = connect(
    mapStateToProps,
    mapDispatchToProps
    )(NodeList)

La importación de NodeList anterior se marca con el mensaje de error

ERROR in ./src/containers/NodeListContainer.ts
(4,10): error TS2305: Module '"MyProject/src/components/NodeList"' has no exported member 'Nodelist'.

¿Alguien puede dar alguna idea de lo que podría haber sucedido aquí?

13
user2302244 10 may. 2016 a las 22:01

3 respuestas

La mejor respuesta

Su código debería funcionar si corrige su error tipográfico.

En lugar de

import { Nodelist } from "../components/NodeList"

Deberías escribir :

import { NodeList } from "../components/NodeList"
//           ^ capital L
21
drinchev 10 may. 2016 a las 21:57

Si alguien todavía tiene este problema, descubrí que solo estaba exportando un elemento del archivo, por lo que cambié

export default function App() {
   ...
};

Para

export function App() {
   ...
}

Parecía hacer el truco!

2
alcomide 17 jul. 2019 a las 21:34

Otra cosa para verificar es nombres de archivo ambiguos / similares.

Esto también puede suceder si tiene dos archivos en el mismo paquete cuyo nombre difiere solo por la extensión. Por ejemplo si tienes

folder
      foo.tsx
      foo.ts

Cuando haces la siguiente importación:

import { Something } from "./foo";

Solo funcionará con elementos de uno de los archivos.

La solución en este caso es renombrar uno de los archivos para eliminar la ambigüedad. Entonces las importaciones funcionarán bien.

2
Jon 21 sep. 2018 a las 18:39