Import Popper from /dist instead of /lib

[sorahn]

Running jest with react-popper@0.9.2:

Steps to reproduce the problem

1. Create new application (create-react-app)
2. Add react-bootstrap-typeahead (includes react-popper)
3. Add <Typeahead options={[]} /> to App.js
4. Run yarn test

What is the expected behavior?

Test Passes

What went wrong?

 FAIL  src/App.test.js
  ● Test suite failed to run

    /Users/darylr/Github/popper-test/node_modules/react-popper/lib/Popper.js:13
    import { Component, createElement } from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at new Script (vm.js:51:7)
      at Object.<anonymous> (node_modules/react-bootstrap-typeahead/lib/Overlay.react.js:31:15)

Any other comments?

from my yarn.lock file:

react-bootstrap-typeahead@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.0.0.tgz#33af5b08015e22f094cc205a87dffd36ec251777"
  dependencies:
    classnames "^2.2.0"
    escape-string-regexp "^1.0.5"
    invariant "^2.2.1"
    lodash "^4.17.2"
    prop-types "^15.5.8"
    prop-types-extra "^1.0.1"
    react-onclickoutside "^6.1.1"
    react-overlays "^0.8.1"
    react-popper "^0.9.0"
    warning "^3.0.0"

react-popper@^0.9.0:
  version "0.9.2"
  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.9.2.tgz#27a198e421e45e53261734dca28c6e57dd2c1604"
  dependencies:
    popper.js "^1.14.1"
    prop-types "^15.6.1"

[ericgio]

This seems like an issue with react-popper and how it's being transpiled (or not).

[sorahn]

If I include the libs from react-popper directly the problem doesn't occur.

( I tried this example here: https://github.com/souporserious/react-popper/tree/v0.x#usage )

[ericgio]

Which version? This lib uses react-popper v0.9.2.

[sorahn]

Yeah, 0.9.2 is installed.

If I create an app.js file with the imports from popper directly it works:
https://gist.github.com/sorahn/1b188aa4e88cd153c8ac220f3fba5656

This is the entirety of my package.json:

{
  "name": "popper-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-bootstrap-typeahead": "^3.0.0",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

[sorahn]

FWIW the library works totally fine as far as the app is concerned, it's only Jest that seems to have the problem.

[ericgio]

Thanks for the detailed notes and examples.

As far as I can tell, the calling code in this lib isn't doing anything different than what your working example is doing, so I'm not sure what the difference is.

[sorahn]

Yeah thats why I originally opened the bug over there. I'm kind of lost right now myself.

I can see that react-popper has a module definition (along with main, and umd:main) in it's package.json, I wonder if Jest has some problem with that.

[ericgio]

Ah, I think I know what the issue is. I incorrectly assumed that

import {Popper} from 'react-popper';

was the same as

import Popper from 'react-popper/lib/Popper.js';

which in many libs is the case. My Babel setup uses babel-plugin-transform-imports and explicitly imports from /lib rather than /dist.

[sorahn]

Great news! LMK if there's anything else I can do!

[ericgio]

I just released v3.0.1, which should resolve the issue. Please let me know if it doesn't, and thanks again for the report.