打字稿模块没有导出的成员 - 反应

Posted 2023-02-22

【中文标题】打字稿模块没有导出的成员 - 反应

【英文标题】：Typescript module has no exported members - react

【发布时间】：2016-09-05 22:09:44

【问题描述】：

我正在开发一个 react、redux Typescript 应用程序。我有一种奇怪的情况，在进行一些更改后，其中一个模块已停止导出其成员。

文件夹结构为：

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

“组件”文件夹包含 .tsx 文件，而包装 .ts 文件位于“容器”文件夹中。

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

谁能提供任何关于这里可能发生的事情的见解？

【参考方案1】：

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

代替

import  Nodelist  from "../components/NodeList"

你应该写：

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

【参考方案2】：

如果还有人遇到这个问题，我发现我只是从文件中导出一个项目，所以改变了

export default function App() 
   ...
;

到

export function App() 
   ...

似乎成功了！

【讨论】：

对我来说，我没有错字，这已为我解决了，谢谢

【参考方案3】：

要检查的另一件事是不明确/相似的文件名。

如果您在同一个包中有两个文件，它们的名称只是扩展名不同，也会发生这种情况。例如，如果您有

folder
      foo.tsx
      foo.ts

当您执行以下导入时：

import  Something  from "./foo";

它只适用于其中一个文件中的项目。

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

【参考方案4】：

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