Webpack-bundled output duplicates history/es/* and history/* imports

[mattdistefano]

Version

4.2.0 (w/ webpack 3.6.0)

Test Case

https://github.com/mattdistefano/react-router-repro

Steps to reproduce

See repo above - very basic webpack config, but compiled output in dist/index.js duplicates much of the history package (search for var createBrowserHistory to confirm) by including both the esm files from node_modules/history/es and CJS equivalents from node_modules/history.

It seems like the deep-import react-router does from history - import createHistory from 'history/createBrowserHistory'; - causes webpack to dup the imported code. Doing a named import instead - import { createBrowserHistory as createHistory } from 'history'; - seems to work better (though it looks like history doesn't re-export everything RR needs ATM).

I'm not sure if this is a webpack bug or an RR but figured I'd log it here first.

Expected Behavior

Should get just the ESM files in the bundle.

Actual Behavior

See above.

[pshrmn]

Possibly related to #5095.

[nikarh]

As far as I can tell, react-router imports history in two ways, first one:

import { createLocation, locationsAreEqual } from 'history';

Since history module has a "module": "es/index.js" key in package.json webpack resolves it to history/es/index.js.

The second is

import createHistory from 'history/createMemoryHistory';

According to the modules proposal, history package doesn't have a "modules.root" key in package.json, thus webpack doesn't translate this import to history/es/createMemoryHistory.

I think the most obvious solution here would be a PR to a history project with modules.root,
but for now you can alias specific imports used by react-router in webpack config:

resolve: {
    alias: {
      'history/createMemoryHistory':
        path.resolve(__dirname, 'node_modules/history/es/createMemoryHistory'),
      'history/createHashHistory':
        path.resolve(__dirname, 'node_modules/history/es/createHashHistory'),
      'history/createBrowserHistory':
        path.resolve(__dirname, 'node_modules/history/es/createBrowserHistory'),
      'history/PathUtils':
        path.resolve(__dirname, 'node_modules/history/es/PathUtils')
    }
}

[DullReferenceException]

I see the fix was merged 3 months ago; when can we expect a new version with this fix to be published?

[dawsonc623]

I am having sort of the flip-side to this issue. It seems React Router wants to import from history/es/*, but the package sent only contains history/*. Not sure if this is related or belongs in its own issue.

[KyleAMathews]

👍 to a new release