Typescript module has no exported members - react

问题:

I am working on a react, redux Typescript application. I have a strange situation where after some changes one of the modules has stopped exporting its members.

The folder structure is:

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

The 'components' folder has the .tsx files while the wrapping .ts files are in the 'containers' folder.

The module NodeList.tsx is listed below:

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

The wrapping container NodeListContainer is:

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)

The import of NodeList above is being flagged with the error message

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

Can anyone provide any insight into what might have happened here?

回答1:

Your code should work if you fix your typo.

Instead of

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

you should write :

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

回答2:

If anyone is still having this problem, I found that I was only exporting one item from the file so changing

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

to

export function App() {
   ...
}

seemed to do the trick!

回答3:

Another thing to check is ambiguous / similar file names.

This can also happen if you have two files in the same package whose name differs only by the extension. For example if you have

folder
      foo.tsx
      foo.ts

When you do the following import:

import { Something } from "./foo";

It will only work with items from one of the files.

The solution in this case is to rename one of the files to remove the ambiguity. Then the imports will work just fine.

回答4:

Avoid having two different file extensions such as 'js' and 'txs' in similar project scope/folders otherwise it will lead to type-errors such as this.