Error when import my library on a project

Question

I'm creating a library using create-react-library . My library uses typescript, hooks and redux.

I think that my problem is by typescript or hooks.. because I've tried different ways to export and always show same error.

./src/redux/RootReducer.tsx
    Attempted import error: 'react-tree-library' does not contain a default export (imported as 'HierarchyTreeReducerState').

I've tried:

Use export const
// Export a variable
export const App = () => { ... }

// Import App in another file
import { App } from '...'


Use export default
// Export default
const App = () => { ... }
export default App

// Import App in another file
import App from "...";
// And this option
import { App } from "...";

As you can see:

const MainTree = ({
    data,
    portal,
    branch,
    ...
}: MainProps) => { ... }

const mapStateToProps = createStructuredSelector({
    branch: makeSelectBranchItem(),
    hierarchy: makeSelectHierarchyItem(),
});

const mapDispatchToProps = (dispatch: Dispatch) => {
    return {
        ...
        dispatch,
    };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect)(MainTree);

Reducers:

 const HierarchyTreeReducerState = (state = initialState, action: any) => {
    switch (action.type) {
        case HierarchyTreeConstants.SET_SELECTED: {
            return Object.assign({}, state, {
                selected: action.payload,
            });
        }
        case HierarchyTreeConstants.SET_DMA: {
            return Object.assign({}, state, {
                selectedDma: action.payload,
            });
        }
        case HierarchyTreeConstants.SET_HIDDEN_BRANCHS: {
            return Object.assign({}, state, {
                hiddenBranchs: action.payload,
            });
        }
        default:
            return state;
    }
};

export default HierarchyTreeReducerState;


const TreeReducerState = (state = initialState, action: any) => {
    switch (action.type) {
        case TreeConstants.SET_NUMBRANCHS: {
            return Object.assign({}, state, {
                numBranchs: action.payload
            });
        }
        case TreeConstants.SET_BRANCH: {
            return Object.assign({}, state, {
                branchs: action.payload,
            });
        }
        default:
            return state;
    }
};

export default TreeReducerState;

index.ts of Library:

export const TreeGoaiguaLibrary = ({
  portal,
  removeBranchWithChildren,
  data,
}: Props) => {
  return (
    <Main
      removeBranchWithChildren={removeBranchWithChildren}
      data={data}
      portal={portal}
    />
  );
};

export { TreeGoaiguaLibrary , TreeReducer, HierarchyTreeReducer };

And when I do yarn link to library, I import in RootReducer of other project to use my library I do this:

import { combineReducers } from "redux";
import TreeReducerState from "react-goaigua-tree-library";
import HierarchyTreeReducerState from "react-goaigua-tree-library";

const combinedReducers = combineReducers({
    branch: TreeReducerState,
    hierarchy: HierarchyTreeReducerState,
} as any);

export const RootReducer = (state: any, action: never): any => {
    return combinedReducers(state, action);
};

And show the error:

./src/redux/RootReducer.tsx
Attempted import error: 'react-tree-library' does not contain a default export (imported as 'HierarchyTreeReducerState').

Answer 1

I've solved ( I think )

index.ts of Library

import MainTree from "./components/main";
import HierarchyTreeReducerState from "./redux/reducers/HierarchyTreeReducer";
import TreeReducerState from "./redux/reducers/TreeReducer";

export { MainTree };
export default { TreeReducerState, HierarchyTreeReducerState };

Reducers:

export const HierarchyTreeReducerState = (state = initialState, action: any) => {
    switch (action.type) {
        case HierarchyTreeConstants.SET_SELECTED: {
            return Object.assign({}, state, {
                selected: action.payload,
            });
        }
        case HierarchyTreeConstants.SET_DMA: {
            return Object.assign({}, state, {
                selectedDma: action.payload,
            });
        }
        case HierarchyTreeConstants.SET_HIDDEN_BRANCHS: {
            return Object.assign({}, state, {
                hiddenBranchs: action.payload,
            });
        }
        default:
            return state;
    }
};

export default HierarchyTreeReducerState;


export const TreeReducerState = (state = initialState, action: any) => {
    switch (action.type) {
        case TreeConstants.SET_NUMBRANCHS: {
            return Object.assign({}, state, {
                numBranchs: action.payload
            });
        }
        case TreeConstants.SET_BRANCH: {
            return Object.assign({}, state, {
                branchs: action.payload,
            });
        }
        default:
            return state;
    }
};

export default TreeReducerState;

Now show me this error: