Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Import Popper from /dist instead of /lib

See original GitHub issue

Running jest with react-popper@0.9.2:

Steps to reproduce the problem

Create new application (create-react-app)
Add react-bootstrap-typeahead (includes react-popper)
Add <Typeahead options={[]} /> to App.js
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"

Issue Analytics

State:
Created 5 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

1reaction

sorahncommented, Apr 4, 2018

Fixed! Thank you!

1reaction

ericgiocommented, Apr 4, 2018

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.

Top Results From Across the Web

How to import popper.js? - Stack Overflow

The problem is there is no dist folder and the popper.min.js file. Bootstrap 4 guide links to CDN: https://cdnjs.cloudflare.com/ajax/libs/popper ...

Popper (v2.×)

import { createPopper } from '@popperjs/core/lib/popper-lite.js'; ... /lib , and one for browsers with native support for ES Modules, under /dist/esm .

Path to local popper.js should be changed to reflect default ...

Okay I came across another issue, to use it correctly the UMD version of popper.js is needed. See https://github.com/FezVrasta/popper.js#dist- ...

Download · Bootstrap v5.0

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and...

Module not found: Can't resolve 'popper.js' | bobbyhadz

If you prefer to use the CDN scripts instead, refer to the Installation section of the npm page for @popperjs/core . Popper is...