Typescript module has no exported members - react

Question

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?

Answer 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

Answer 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!

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