Reputation: 137
I have a project which needs to import a component from an external node module, the project and component both use React and Redux and I would like them to both share the same store.
Heres's a sample of the reducer of the node module component:
export default function search(state = INITIAL_STATE, action) {
switch (action.type) {
case SET_SEARCH_STRING:
return state.set("searchString", action.searchString);
case SET_SEARCH_TYPE:
return state.set("searchType", action.searchType);
Here's the exporting of the component in the node module:
var SearchReducer = require("./WebContent/js/reducers/search");
var CollectionsReducer = require("./WebContent/js/reducers/collections");
exports.SearchReducer = SearchReducer;
exports.CollectionsReducer = CollectionsReducer;
Here's the import in the main project
import content from "./content"
import SearchReducer from "search-ui";
import CollectionsReducer from "search-ui";
const REDUCERS = {content, SearchReducer, CollectionsReducer};
export default combineReducers(REDUCERS);
When I try to load the page I get a Type Error
Uncaught TypeError: reducer is not a function - combineReducers.js:37
Now if I provide a direct path to the node module reducers -
i.e import collections from "../../../node_modules/search-ui/WebContent/js/reducers/collections";
it works fine, so my questions is, what am I doing wrong in terms of importing and exporting?
Upvotes: 3
Views: 1457
Reputation: 500
Since it's not a default export, try this.
import {SearchReducer, CollectionsReducer} from 'search-ui'
Alternatively, you could provide the full path but there is no need to make it relative
import SearchReducer from 'search-ui/WebContent/js/reducers/search'
import CollectionsReducer from 'search-ui/WebContent/js/reducers/collections
Upvotes: 3