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

它是webpack 1还是2+？如果为1，则可能需要Babel加载程序来处理ESM构建。或者使用由Popper.js提供的UMD版本 –

答

您必须使用UMD构建它位于popper.js的dist/umd文件夹：（dist/umd/popper.js或dist/umd/popper.min.js）

下面的答案帮助我与引导4和波普尔的问题，看看这里：How to use popper 1.12.0 with bootstrap 4.0 beta

此外，我使用AngularCLI，它使用Webpack。从dist更改为dist/umd已解决了我的问题。

我希望这会帮助你。

你救了我的命，谢谢！ –

答

使用UMD分配目标：https://github.com/FezVrasta/popper.js#dist-targets

我对接受哪个答案感到厌倦，因为你们都给出了解决我的问题的“UMD”响应，但是另一个答案更直接地引导我解决问题（参考dist/umd'文件夹），所以我打算接受它，因为我相信这会对其他人偶然发现更有帮助 – stevendesu

答

您需要使用在节点模块中提供popper.js文件夹的UMD发行版，并将您的angular-cli.json指向您的popper.js路径。

Bootstrap 4，Popper.JS和WebPack - “导入和导出可能只出现在sourceType：模块中”

相关推荐