5

I had a project working perfectly with [email protected]. I just tried upgrading this project to [email protected] and noticed the new dependency on Popper.js instead of Tether.

I updated my package.json to include popper.js@^1.11.0 and updated my code from:

window.Tether = require("tether");
require("bootstrap");

to:

window.Popper = require("popper.js");
require("bootstrap");

Now I'm getting the following error:

./~/popper.js/dist/esm/popper.js
Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (2429:0)
    at Parser.pp$4.raise (/project/node_modules/acorn/dist/acorn.js:2610:13)
    at Parser.pp$1.parseStatement (/project/node_modules/acorn/dist/acorn.js:782:16)
    at Parser.pp$1.parseTopLevel (/project/node_modules/acorn/dist/acorn.js:690:23)
    at Parser.parse (/project/node_modules/acorn/dist/acorn.js:543:15)
    at parse (/project/node_modules/acorn/dist/acorn.js:3670:37)
    at module.exports (/project/node_modules/falafel/index.js:22:15)
    at /project/node_modules/static-module/index.js:30:13
    at ConcatStream.<anonymous> (/project/node_modules/concat-stream/index.js:36:43)
    at emitNone (events.js:91:20)
    at ConcatStream.emit (events.js:185:7)
 @ ./resources/assets/js/common/bootstrap.js 12:16-36
 @ ./resources/assets/js/website/app.js

I'm not super familiar with or good at using WebPack. It was forced upon me by Laravel 5.4, so I've just been floundering up until this point. My webpack.config.js file looks like so:

module.exports = {
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: "transform?brfs"
      }
    ]
  }
}
stevendesu
  • 15,753
  • 22
  • 105
  • 182
  • Is it webpack 1 or 2+? If 1, you may need a Babel loader to handle the ESM build. Or use the UMD build provided by Popper.js – Fez Vrasta Aug 16 '17 at 21:20

3 Answers3

9

You have to use the umd build which is located in the dist/umd folder of popper.js: (dist/umd/popper.js or dist/umd/popper.min.js)

The following answer helped me with an issue with bootstrap 4 and popper, take a look here: How to use popper 1.12.0 with bootstrap 4.0 beta

Also, I'm using AngularCLI, which uses Webpack. Changing path from the dist to dist/umd has solved my issue.

I hope this will help you.

Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160
Adnan
  • 517
  • 3
  • 8
8

Use the UMD distributive target: https://github.com/FezVrasta/popper.js#dist-targets

Vasya Petrov
  • 145
  • 7
  • I'm torn on which answer to accept because you both gave the "UMD" response which fixed my issue, however the other answer lead me more directly to the solution (referencing the `dist/umd` folder) so I'm going to accept it as I believe it will be more helpful to others who stumble upon this – stevendesu Aug 23 '17 at 14:29
1

You need to use the UMD distribution which is provided popper.js folder in node module and point your angular-cli.json to your popper.js path.

Sarif Mia
  • 71
  • 1
  • 3