web-dev-qa-db-ja.com

Typescriptモジュールにはエクスポートされたメンバーがありません-反応します

私はリアクション、リデュースTypeScriptアプリケーションに取り組んでいます。何らかの変更の後、モジュールの1つがそのメンバーのエクスポートを停止するという奇妙な状況があります。

フォルダ構造は次のとおりです。

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

「components」フォルダーには.tsxファイルがあり、ラッピング.tsファイルは「containers」フォルダーにあります。

モジュールNodeList.tsxを以下にリストします。

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

ラッピングコンテナNodeListContainerは次のとおりです。

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)

上記のNodeListのインポートには、エラーメッセージのフラグが付けられています

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

誰もがここで何が起こったのかについての洞察を提供できますか？

javascriptreactjstypescriptredux
8
user2302244

タイプミスを修正すれば、コードは機能するはずです。

の代わりに

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

あなたは書くべきです：

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

まだこの問題が発生している場合は、ファイルからアイテムを1つしかエクスポートしていないことがわかりました。

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

に

export function App() {
   ...
}

トリックをしたようだ！

2
alcomide

もう1つ確認するのは、あいまいな/類似したファイル名です。

これは、同じパッケージ内に拡張子のみが異なる2つのファイルがある場合にも発生する可能性があります。たとえば、あなたが持っている場合

folder
      foo.tsx
      foo.ts

次のインポートを行うとき：

import { Something } from "./foo";

いずれかのファイルのアイテムでのみ機能します。

この場合の解決策は、あいまいさを取り除くためにファイルの1つを名前変更することです。その後、インポートは正常に機能します。

1
Jon