Bootstrap 4, Popper.JS, and WebPack -- "import and export may appear only with sourceType: module"

Question

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"
      }
    ]
  }
}

Answer 1

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.

Answer 2

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

Answer 3

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.