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?

Heavyhearted

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

Wasson

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!

Cupid

For me I didn't have a typo and this fixed it for me, thanks – Anastasiaanastasie

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.

Dyl

Answer 4

you can use react arrow function instead of export function that worked for me

Leila

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Coronado

Answer 5

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.

Quintuplicate