Typescript模块没有导出成员 - react

Question

我正在开发一个使用React、Redux和TypeScript的应用程序。我遇到了一个奇怪的情况，就是在进行了一些更改后，其中一个模块停止导出其成员。

文件夹结构如下：

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'.

有人能提供一些关于这里可能发生了什么的见解吗？

- user2302244

Answer 1

如果你修正了打字错误，你的代码应该可以工作。

与其使用

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

你应该写：

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

- drinchev

Answer 2

如果有人仍然遇到此问题，我发现我只从文件中导出了一个项目，所以更改 。

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

to

export function App() {
   ...
}

似乎解决了问题！

- kiwikodes

---

对我来说，我没有打错字，这个解决方法对我有用，谢谢。 - aonepathan

Answer 3

还有一件需要检查的事情是模糊/相似的文件名。

如果您在同一个包中有两个仅扩展名不同的文件，则可能会发生这种情况。例如，如果您有：

folder
      foo.tsx
      foo.ts

当您执行以下导入操作时：

import module_name

import { Something } from "./foo";

它只能使用来自其中一个文件的项目。

在这种情况下的解决方案是将其中一个文件重命名以消除歧义。然后导入将正常工作。

- Jon

Answer 4

避免在相似的项目范围/文件夹中使用两个不同的文件扩展名，如'js'和'txs'，否则将会导致类型错误。

- Salah Osman