web-dev-qa-db-fra.com

Le module dactylographié n'a aucun membre exporté - réagissez

Je travaille sur une application TypeScript réactive et redux. J'ai une situation étrange où, après quelques modifications, l'un des modules a cessé d'exporter ses membres.

La structure des dossiers est la suivante:

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

Le dossier "composants" contient les fichiers .tsx tandis que les fichiers d'habillage .ts se trouvent dans le dossier "conteneurs".

Le module NodeList.tsx est répertorié ci-dessous:

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>
    )

Le conteneur d'emballage NodeListContainer est:

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)

L'importation de NodeList ci-dessus est signalée avec le message d'erreur

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

Quelqu'un peut-il donner un aperçu de ce qui aurait pu se produire ici?

javascriptreactjstypescriptredux
8
user2302244

Votre code devrait fonctionner si vous corrigez votre faute de frappe.

Au lieu de

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

vous devez écrire:

import { NodeList } from "../components/NodeList"
//           ^ capital L
20
drinchev

Si quelqu'un a toujours ce problème, j'ai constaté que je n'exportais qu'un élément du fichier, ce qui change

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

à

export function App() {
   ...
}

semblait faire l'affaire!

2
alcomide

Une autre chose à vérifier est les noms de fichiers ambigus/similaires.

Cela peut également se produire si vous avez deux fichiers dans le même package dont le nom ne diffère que par l'extension. Par exemple, si vous avez

folder
      foo.tsx
      foo.ts

Lorsque vous effectuez l'importation suivante:

import { Something } from "./foo";

Il ne fonctionnera qu'avec les éléments d'un des fichiers.

La solution dans ce cas consiste à renommer l'un des fichiers pour supprimer l'ambiguïté. Ensuite, les importations fonctionneront très bien.

1
Jon