Bootstrap 4，Popper.JS和WebPack - 「導入和導出可能只出現在sourceType：模塊中」

我有一個項目與[email protected]完美配合。我只是試着將這個項目升級到[email protected]，並注意到Popper.js而不是Tether的新依賴。Bootstrap 4，Popper.JS和WebPack - 「導入和導出可能只出現在sourceType：模塊中」

我更新了我的package.json包括[email protected]^1.11.0和更新我的代碼：

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

到：

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

現在我發現了以下錯誤：

./~/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

我不太熟悉或擅長使用WebPack。它被Laravel 5.4強加給我，所以我一直在爲此而煩惱。我webpack.config.js文件看起來像這樣：

module.exports = { 
    devtool: "source-map", 
    module: { 
    loaders: [ 
     { 
     test: /\.js/, 
     loader: "transform?brfs" 
     } 
    ] 
    } 
}

來源

2017-08-15 stevendesu

它是webpack 1還是2+？如果爲1，則可能需要Babel加載程序來處理ESM構建。或者使用由Popper.js提供的UMD版本 –