How to import from subdirectory from a node_module?

Question

I'm using create-react-app and I have a line that says:

import createHistory from 'history/lib/createBrowserHistory'

but this doesn't work and it throws an error:

Error in ./src/deps/history.js.
Module not found: 'history/lib/createBrowserHistory' 
in /home/aurimus/Apps/projects/my-project/src/deps

Is this specifically not supported by create-react-app? How do I circumvent this?

***UPDATE***

After correction to the url of the lib (was using an outdated tutorial), I still get nothing imported, createBrowserHistory is undefined

I'm using additional file to abstract the import:

Inside deps/history.js

import createBrowserHistory from 'history/createBrowserHistory.js'
export default createBrowserHistory

Inside index.js

import history from './deps/history';
history.listen(render); // history is undefined

Am I doing anything wrong?

score 2 · Accepted Answer · answered Feb 20 '17 at 00:42

2

Is this specifically not supported by create-react-app?

No, this has nothing to do with create-react-app.

How do I circumvent this?

The error tells you exactly what the problem is:

Module not found: 'history/lib/createBrowserHistory'

That means history/lib/createBrowserHistory doesn't exist, i.e. you are using the wrong path.

I installed history, looked at the package contents and noticed that the file createBrowserHistory is located in the root of the package (in fact, there is no lib/ directory). That means you want to import history/createBrowserHistory.

answered Feb 20 '17 at 00:42

Felix Kling

795,719
175
1,089
1,143

Thanks, this solved the not found thing, but now it's still undefined after import. Any suggestions? Updated the question – Aurimas Feb 20 '17 at 00:56
@Aurimas: Look at the file and check what it exports and how. `history` shouldn't be `undefined`, but `history.listen` probably is. The file exports a function, not an object. The function returns an object with a `listen` property, so you need to call the function first. If you don't know what value(s) a module is exporting, look at its source. – Felix Kling Feb 20 '17 at 00:59
If you could say anything in following problem: http://stackoverflow.com/questions/42356481/how-to-get-the-last-key-of-object-which-has-a-value/42356657 – kind user Feb 21 '17 at 00:50

score 1 · Answer 2 · answered Feb 20 '17 at 00:44

From history docs:

Using npm:

$ npm install --save history
Then with a module bundler like webpack, use as you would anything else:

// using ES6 modules
import createHistory from 'history/createBrowserHistory'

// using CommonJS modules
var createHistory = require('history').createBrowserHistory

score 0 · Answer 3 · answered Feb 20 '17 at 17:10

My final solution that worked is thanks to Felix:

In deps/history.js

import createBrowserHistory from 'history/createBrowserHistory.js'
export default createBrowserHistory()

Then in index.js

import history from './deps/history';
...
...
history.listen(render);

How to import from subdirectory from a node_module?

3 Answers3